title: why HttpEventType.UploadProgress event executeonly one time in Angular file upload request?
body: <p>I am trying to upload files from angular. and I wanted to show the upload progress also.</p>
  
  <p><strong>upload.service.ts</strong></p>
  
  <pre><code>public uploadProductImage(obj: FormData, id: string) {
      return this._http.post(baseUrl + `/product/upload`, obj, {
        headers: {
          product_id: id,
        },
        reportProgress : true,
        observe : 'events'
      });
    }
  </code></pre>
  
  <p><strong>upload.component.ts</strong></p>
  
  <pre><code>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 =&gt; {
            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 =&gt; {
            console.log(err);
          }
        );
    }
  </code></pre>
  
  <p>Now image uploading is working. only progress bar is not working. I am getting one event with <code>HttpEventType.UploadProgress</code> immediately and <code>event.loaded</code> and <code>event.total</code> both are equal.</p>
  
  <p>so progressbar directly become <code>100</code> but to complete the request it take some time.</p>