api endpoint progress loading

How do create a progress loader that is based on the uploadFile method/service , for example on the method below it should show keep loading unless the uploadFile is success , what is needed to and to be considered? should a finalize(() be added ?

Thanks.

#html code

 <div style="padding-top:16px;"></div>
                                        <div ngfDrop class="well my-drop-zone drop-box" selectable="selectable"
                                            [(validDrag)]="baseDropValid" (fileOver)="hasBaseDropZoneOver=$event"
                                            (filesChange) = "lastFileAt=getDate()"
                                            [(files)]="files" [accept]="accept" [maxSize]="maxSize"

#tscode

getDate(){
  if(this.files) {
    this.uploadFile()
  }
  return new Date()
}
  uploadFile() {

    const formData: FormData = new FormData();

    this.files.map((file) => {
      formData.append('attachment', file, file.name);
    });

    this.service.uploadCSV(formData)
    .pipe(debounceTime(500))
    .subscribe(
      res=>{
        if(res.isSuccess){
          console.log('res' , res)
        }  
      },
      err=>{
        
      }
    )
  }

Answer

You can have a flag called uploadInProgress and set that to true when the file is uploading, false otherwise.

In your HTML code, have an *ngIf="uploadInProgress" on a progress-spinner element (something you could create yourself or import from a third party library).

Advertisement

Answer