How can I use a Progressbar with Angular and .NET?

Question

I am developing a system in Angular and .NET where I upload files and want to add a progress bar.

I have managed to display it with a dialog:

<p-dialog [(visible)]="dProgressBar" [style]="{width: '50vw', 'text-align': 'end'}" [modal]="true"
    header="Loading...">
    <ng-template pTemplate="content">
        <div>
            <p-progressBar *ngIf="progressBarVisible" [value]="value"></p-progressBar>
        </div>
    </ng-template>
</p-dialog>

In my component, I have declared:

value = 0;
progressBarVisible = false;

In the same component, I have a function that makes a request to my service like this:

getArchivo(formData: FormData) {
    this.blockedPanel = true;
    this.dProgressBar = true;
    this.progressBarVisible = true;
    this._http.post('/Files', formData).then((res: any) => {
        if (res && !res.error) {
            this.blockedPanel = false;
            this.progressBarVisible = false;
            this.dProgressBar = false;
            // Rest of the code...
        }
    });
}

And my service:

public async post(method: string, payload: any = {}): Promise<any> {
    this.http.post(`${this.apiUrl}${method}`, payload, {
        reportProgress: true,
        observe: 'events',
    })
    .subscribe(
        (event) => {
            if (event.type === HttpEventType.UploadProgress && event.total !== undefined) {
                // This is an upload progress event. Compute and show the % done:
                const progress = Math.round(100 * event.loaded / event.total);
                this.progresoSubject.next(progress);
            } else if (event instanceof HttpResponse) {
                console.log('File is completely uploaded!');
                console.log(event.body);
            }
        },
        (error) => {
            this.progresoSubject.next(-1); // Notify the component of an error
            this.message.add({
                severity: 'error',
                summary: 'Error querying',
                detail: error.message,
                life: 5000,
            });
        }
    );
}

Up to this point, the bar is displayed correctly, but it is filled before even entering the method. I have confirmed this by adding breakpoints to better visualize the progress, and it doesn't work.

If someone could provide an example, as I have researched and do not see that anything needs to be added on the server side.

Greetings and thank you very much.

Answer 1

Your service method is asynchronous and the post method is not awaited in your component.

async getArchivo(formData: FormData) {
    this.blockedPanel = true;
    this.dProgressBar = true;
    this.progressBarVisible = true;

    try {
        const res: any = await this._http.post('/Files', formData).toPromise();

        if (res && !res.error) {
        }
    } catch (error) {
    } finally {
        this.blockedPanel = false;
        this.progressBarVisible = false;
        this.dProgressBar = false;
    }
}