I work on angular 8 application I need to add progress bar
when click upload button so progress bar will work when click
button upload until finish upload
upload service
PostUpload(file)
{
const formData: FormData = new FormData();
formData.append('file', file,file.name);
return this.http.post('http://localhost:61265/api/DeliverySys/', formData,{responseType: 'blob'});
}
component upload.ts
public uploadFile = () => {
this._dataService.PostUpload(this.selectedoptions.toString(),this.fileToUpload)
.subscribe((response: Blob) => saveAs(response, this.fileToUpload.name + '.xlsx'));
}
component upload.html
<button (click)="uploadFile()"></button>
what I try as below
this._dataService.PostUpload(this.selectedoptions.toString(),this.fileToUpload)
.subscribe((event:any) => {
if (event.type === HttpEventType.Response) {
console.log('Upload complete');
this.message = 'Upload success.';
this.onUploadFinished.emit(event.body);
}
if (event.type === HttpEventType.UploadProgress) {
this.progress = Math.round(100 * event.loaded / event.total);
console.log('Progress ' + this.progress + '%');
}saveAs(event, this.fileToUpload.name + '.xlsx')
}
);
<div class="col-md-4">
<span class="upload">
{{progress}}%
</span>
<span class="upload" >
{{message}}
</span>
</div>
but issue still exist nothing effect on progress percent or when finish not give me uploaded success can you help me