why HttpEventType.UploadProgress event executeonly one time in Angular file upload request?

Question

I am trying to upload files from angular. and I wanted to show the upload progress also.

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);
        }
      );
  }

Now image uploading is working. only progress bar is not working. I am getting one event with HttpEventType.UploadProgress immediately and event.loaded and event.total both are equal.

so progressbar directly become 100 but to complete the request it take some time.

Same here, what would be the proposed solution? OP did find it? — DARKGuy
– DARKGuy, Commented Mar 15, 2020 at 3:42

Hallai Seiler Áron · Accepted Answer · 2020-03-25 08:08:44Z

6

I had the same issue. For me the server is on localhost and because of that the upload was instantaneously and the progress was always 100%. Try to throttle the request in Chrome and you will see some other progress percents before the upload is completed.

The steps how to throttle the network in Chrome:

Open DevTools (F12)
Click the 'Network' tab
Select which type of connection you want to imitate ('Slow 3G' will do the trick)

edited Mar 25, 2020 at 8:08

answered Mar 24, 2020 at 12:19

Hallai Seiler Áron

1311 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Niamatullah Bakhshi Over a year ago

How is this even a fix to the above question? The progress bar must be updated without modifying the throttle settings.

Hallai Seiler Áron Over a year ago

There is no fix for the question, because the code in the question works fine on a deployed web application. The issue with the percentage of the progress bar occured (for me) because both the web api and the angular project runs on localhost.

MaxySpark · Accepted Answer · 2020-03-25 13:34:00Z

2

I am Using this one in a new project. and it's working. Hope it will help you

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


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

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

        this.http.request(req)
        .subscribe(
          (event) => {
            if (event.type === HttpEventType.UploadProgress) {
              // This is an upload progress event. Compute and show the % done:
              this.percentDone = Math.round(100 * event.loaded / event.total);
              console.log(`File is ${this.percentDone}% uploaded.`);
            } else if (event instanceof HttpResponse) {
              console.log('File is completely uploaded!');
              console.log(event.body);
            }
          },
          err => console.error(err)
        );
}

answered Mar 25, 2020 at 13:34

MaxySpark

5632 gold badges10 silver badges28 bronze badges

2 Comments

Niamatullah Bakhshi Over a year ago

please explain what you have done differently than the original question. Pasting only the code that works for you isn't a good answer.

MaxySpark Over a year ago

@NiamatullahBakhshi its my question and nobody has posted a good answer. If u have any answer to this please post it. I am just trying to help others. I created a new HttpRequest instance then subscribing it.

eol · Accepted Answer · 2022-10-20 21:47:03Z

0

I was facing the same issue and in my case the cause was a custom HttpInterceptor where I used toPromise:

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
  }
}

After changing above code to:

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

the issue was resolved.

answered Oct 20, 2022 at 21:47

eol

24.7k6 gold badges53 silver badges72 bronze badges

Collectives™ on Stack Overflow

why HttpEventType.UploadProgress event executeonly one time in Angular file upload request?

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related