What could be the reason for the HttpEventType.UploadProgress event only triggering once during an Angular file upload request?

Question

What could be the reason for the HttpEventType.UploadProgress event only triggering once during an Angular file upload request?

I am currently working on implementing file uploads in Angular and am looking to display the upload progress as well.

upload.service.ts

public uploadProductImage(obj: FormData, id: string) {
    return this._http.post(baseUrl + `/product/upload`, obj, {
      headers: {
        product_id: id,
      },
      reportProgress : true,
      observe : 'events'
    });
  }

upload.component.ts

uploadClick() {
    const fd = new FormData();

    // for(const f of this.file_url) {
    //   fd.append('image', f.file, f.file.name);
    // }
    fd.append('image', this.file_url[0].file, this.file_url[0].file.name);
    this.service.uploadProductImage(fd, this.product_id.toString())
      .subscribe(
        event => {
          if (event.type === HttpEventType.UploadProgress) {
            console.log(event.loaded, event.total);
            this.progress = Math.round(event.loaded / event.total * 100);

          } else if (event.type === HttpEventType.Response) {
            console.log(event.body);
            this.file_url = [];
          }

        },
        err => {
          console.log(err);
        }
      );
  }

The image uploading functionality is now up and running smoothly. However, the progress bar feature seems to be experiencing some glitches. I am receiving one event with HttpEventType.UploadProgress immediately, with both event.loaded and event.total values being equal.

As a result, the progress bar jumps to 100 immediately, even though there is a delay in completing the request.

angular typescript file-upload

Answer 1

Answer №1

I encountered a similar problem when my server was on localhost, leading to immediate uploads with progress always showing 100%. To experience a more realistic upload progress, try throttling the request in Chrome.

Here's how you can throttle the network in Chrome:

Open DevTools by pressing F12
Go to the 'Network' tab
Select the type of connection you wish to mimic (choose 'Slow 3G' for accurate results)

Answer 2

I encountered a similar problem when my server was on localhost, leading to immediate uploads with progress always showing 100%. To experience a more realistic upload progress, try throttling the request in Chrome.

Here's how you can throttle the network in Chrome:

Open DevTools by pressing F12
Go to the 'Network' tab
Select the type of connection you wish to mimic (choose 'Slow 3G' for accurate results)

Answer 3

Answer №2

I've successfully implemented this code snippet in a recent project. It's functioning as expected, and I believe it could be beneficial for your use case as well.

import { HttpRequest, HttpEventType, HttpResponse } from '@angular/common/http';


handleFileUpload() {
        const formData: FormData = new FormData();
        formData.append('file', this.selectedFile);

        const request = new HttpRequest('POST', apiUrl, formData, {
          reportProgress: true,
        });

        this.http.request(request)
        .subscribe(
          (event) => {
            if (event.type === HttpEventType.UploadProgress) {
              // Processing and displaying upload progress percentage:
              this.uploadPercentage = Math.round(100 * event.loaded / event.total);
              console.log(`File upload progress: ${this.uploadPercentage}%`);
            } else if (event instanceof HttpResponse) {
              console.log('File upload completed successfully!');
              console.log(event.body);
            }
          },
          error => console.error(error)
        );
}

Answer 4

I've successfully implemented this code snippet in a recent project. It's functioning as expected, and I believe it could be beneficial for your use case as well.

import { HttpRequest, HttpEventType, HttpResponse } from '@angular/common/http';


handleFileUpload() {
        const formData: FormData = new FormData();
        formData.append('file', this.selectedFile);

        const request = new HttpRequest('POST', apiUrl, formData, {
          reportProgress: true,
        });

        this.http.request(request)
        .subscribe(
          (event) => {
            if (event.type === HttpEventType.UploadProgress) {
              // Processing and displaying upload progress percentage:
              this.uploadPercentage = Math.round(100 * event.loaded / event.total);
              console.log(`File upload progress: ${this.uploadPercentage}%`);
            } else if (event instanceof HttpResponse) {
              console.log('File upload completed successfully!');
              console.log(event.body);
            }
          },
          error => console.error(error)
        );
}

Answer 5

Answer №3

Dealing with a similar problem, I discovered that the culprit was a custom HttpInterceptor that utilized the toPromise method:

intercept(req: HttpRequest<any>, next: HttpHandler): any {
    return from(this.handle(req, next));
}

private async handle(req: HttpRequest<any>, next: HttpHandler) {
  try {
      return await next.handle(req).toPromise();
  } catch (err: any) {
      // error-handling logic
  }
}

By making the following adjustments to the code:

intercept(req: HttpRequest<any>, next: HttpHandler){
    return next.handle(req)
      .pipe(catchError(err => {
        // error-handling logic
        return throwError(err);
      }));
  }

I was able to successfully resolve the issue.

Answer 6

Dealing with a similar problem, I discovered that the culprit was a custom HttpInterceptor that utilized the toPromise method:

intercept(req: HttpRequest<any>, next: HttpHandler): any {
    return from(this.handle(req, next));
}

private async handle(req: HttpRequest<any>, next: HttpHandler) {
  try {
      return await next.handle(req).toPromise();
  } catch (err: any) {
      // error-handling logic
  }
}

By making the following adjustments to the code:

intercept(req: HttpRequest<any>, next: HttpHandler){
    return next.handle(req)
      .pipe(catchError(err => {
        // error-handling logic
        return throwError(err);
      }));
  }

I was able to successfully resolve the issue.

What could be the reason for the HttpEventType.UploadProgress event only triggering once during an Angular file upload request?

Answer №1

Answer №2

Answer №3

Similar questions

What could be the reason for the failure of Angular Material Table 2 selection model?

Unusual behavior when importing in Angular 2 using TypeScript

The constructor in a Typescript Angular controller fails to run

What is the reason behind a tuple union requiring the argument `never` in the `.includes()` method?

How can I enable autofocus on a matInput element when clicking in Angular 6?

When ts-loader is used to import .json files, the declaration files are outputted into a separate

Modifying PDF files using Angular 4

Error in Vue 3 Script Setup with Typescript: Implicit 'any' type for parameter 'el' in Template ref

The child component stays consistent across all Angular routing configurations

Obtaining Data from an Array with Reactive Forms in Angular 4

Develop a TypeScript class by incorporating a static function from an external library, while ensuring type safety

Looking to retrieve the AssetLoadedFunc properties in the LoadAssets function? Wondering if you should use TypeScript or JavaScript

Tips for crafting a test scenario for input alterations within Angular

Ways to incorporate a notification feature with an icon or image

The automatic inference of function argument types and the implementation of conditional types

Manipulating a MongoDB object using node.js

Mastering the implementation of type refinements for io-ts in processing input data

How to deactivate Kendo Dropdownlist in Angular 2

Challenge encountered when utilizing angular 2 RC router for programmatic route navigation

Successfully generated files, now patiently awaiting typecheck results... encountering an issue with importing SASS modules