Thursday, 10 January 2019

File upload progress checking if file send as FormData in Angular 7?

I uploading file as FormData in Angular 7 with this code using HttpClient as http:

sendImageFile(subUri: string, id: number, fileToUpload: File): Observable<any> {
  const formData: FormData = new FormData();
  formData.append('file', fileToUpload, fileToUpload.name);
  formData.append('photoalbum_id', id.toString() );
  // ... some other .append()

  const customHeaders = new HttpHeaders({
    'Authorization': 'Bearer' + localStorage.getItem('token'),
    'Accepted-Encoding': 'application/json'
  });

  const customOptions = {
    headers: customHeaders,
    reportProgress: true
  };

  return this.http.post(this.url, formData, customOptions)
    .pipe(
      map( (event: HttpEvent<any>) => this.getEventMessage(event, fileToUpload)),
      tap(message => this.showProgress(message)),
      // last(),
      catchError(this.handleError));
}

private showProgress(message: any) {
  // ...
}

private getEventMessage(event: HttpEvent<any>, file: File) {
  // ...
}

The main problem is here isn't checking the uploading because the file is uploaded part of the FormData so I don't get any feedback until the upload is finished.

I'm a little bit confused about this progress checking. I must to upload file as FormData. How can I check the upload progress in this case?



from File upload progress checking if file send as FormData in Angular 7?

No comments:

Post a Comment