How to handle ProgressBar while image is uploading to firebase

Issue

I am uploading image to the firebase storage. But i am not able to handle the ProgressBar in my code.

Component

onSubmit(){
      const fileRef = this.storage.ref(filepath)
      this.storage.upload(filepath,this.selectedImage).snapshotChanges().pipe(
        finalize(() => {
          fileRef.getDownloadURL().subscribe((url) => {
            this.upSvc.insertImageDetails(this.daydetails.value);
            this.toaster.success("Submitted successfully")
            this.router.navigate(['../Home'],{relativeTo:this.activatedroute})
          })
        }),
      ).subscribe()
}

HTML

<div class="progress">
   <div class="progress-bar progress-bar-animated" [ngStyle]="{ 'width': progress + '%' }"></div>
</div>
Progress: {{progress}}% Complete

Solution

this.storage.upload() returns a AngularFireUploadTask. This task has a percentageChanges() observable that will output what you need.

So something like

uploadProgress$: Observable<number>

onSubmit(){
      const fileRef = this.storage.ref(filepath)
      const task = this.storage.upload(filepath,this.selectedImage)

      this.uploadProgress$ = task.percentageChanges()

      task.snapshotChanges().pipe(
        finalize(() => {
          fileRef.getDownloadURL().subscribe((url) => {
            this.upSvc.insertImageDetails(this.daydetails.value);
            this.toaster.success("Submitted successfully")
            this.router.navigate(['../Home'],{relativeTo:this.activatedroute})
          })
        }),
      ).subscribe()
}

<div class="progress" *ngIf="uploadProgress$ | async as progress">
   <div class="progress-bar progress-bar-animated" [ngStyle]="{ 'width': progress + '%' }"></div>
</div>

Answered By - Leon Radley