How to display file upload progress using Angular Fire Modular and Firebase Storage in a...

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.

Continue reading...