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?