почему событие HttpEventType.UploadProgress выполняется только один раз в запросе на загрузку файла Angular?

Question

Я пытаюсь загрузить файлы с угловых. и я также хотел показать ход загрузки.

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

Теперь загрузка изображений работает. не работает только индикатор выполнения. Я сразу получаю одно событие с HttpEventType.UploadProgress, а event.loaded и event.total оба равны.

так что прогрессбар напрямую становится 100, но для завершения запроса требуется некоторое время.