How to display file upload progress using Angular Fire Modular and Firebase Storage in a Angular 17 project?

30 views Asked by At

I am migrating an Angular 16 project to Angular 17 and changing over to @angular/fire from @angular/fire/compat.

I am able to upload files successfully however I cannot get my component to display the upload progress.

I am using

  • @angular/core 17.3.1
  • @angular/material 17.3.1
  • @angular/fire 17.0.1

I am working off the upload example provided by Firebase here.

The Material progress bar does not update as intended. Everything else works as it should (file is uploaded, console logs, etc).

Here is the pertinent code:

upload.component.ts

import { ref, Storage, uploadBytesResumable } from '@angular/fire/storage';

export class UploadComponent {
   constructor {private storage: Storage} ()

   progress:number = 0; //Used to display the file upload progress to the user
   uploadInProgress:boolean = false; //Used to toggle the visibility of the progress bar

   //Takes a file from an Input element and saves to Firebase Storage
   uploadFile(file: any) {      
      this.uploadInProgress = true;
      const fileRef = ref(this.storage, `storage/path/here`);

      uploadBytesResumable(fileRef, file).on('state_changed',
         (snapshot) => {
            //Log the progress to the console
            console.log('Uploading: ', snapshot.bytesTransferred, ' of ', snapshot.totalBytes, ' bytes');

            //Calculate and set the upload progress
            this.progress = Math.round((snapshot.bytesTransferred / snapshot.totalBytes) * 100);
         },
         (error) => {console.log(error);},
         () => {
            //Upload is complete
            this.uploadInProgress = false;
            this.progress = 0;
         }
      );
    }

upload.component.html

<ng-container *ngIf="this.uploadInProgress">
   <mat-progress-bar mode="determinate" [value]="this.progress"></mat-progress-bar>                     
</ng-container>

I am sure it is something silly but I'm having a mental block and would appreciate some help.

0

There are 0 answers