How to add progress bar when click upload button?

547 views Asked by At

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

0

There are 0 answers