Upload File to Firebase Storage with Angular 11 example

In this tutorial, I will show you how to make Angular 11 File Upload Application with Firebase Storage using @angular/fire & AngularFireStorage. Files’ info will be stored in Firebase Realtime Database for Display/Delete operations.

Angular 11 File Upload Firebase Storage example

We’re gonna build an Angular 11 App that helps us:

  • see the progress bar with percentage
  • save file metadata (name, url) to Firebase Realtime Database
  • display list of files
  • delete any file in the list

Data Flow

Following image shows the data flow with Angular Client, Firebase Cloud Storage & Firebase Realtime Database:

  • retrieve metadata (name, url) of the file from Firebase Cloud Storage
  • save metadata (name, url) to Firebase Realtime Database

Define File Upload Class

The FileUpload class has four fields: key, name, url, file:

export class FileUpload {
key: string;
name: string;
url: string;
file: File;
constructor(file: File) {
this.file = file;
}
}

File Upload with Firebase Storage

We need to do 2 actions:

  • save file’s info (name, url) to Firebase Database.
private basePath = '/uploads';constructor(private db: AngularFireDatabase, private storage: AngularFireStorage) { }pushFileToStorage(fileUpload: FileUpload): Observable<number> {
const filePath = `${this.basePath}/${fileUpload.file.name}`;
const storageRef = this.storage.ref(filePath);
const uploadTask = this.storage.upload(filePath, fileUpload.file);
uploadTask.snapshotChanges().pipe(
finalize(() => {
storageRef.getDownloadURL().subscribe(downloadURL => {
fileUpload.url = downloadURL;
fileUpload.name = fileUpload.file.name;
this.saveFileData(fileUpload);
});
})
).subscribe();
return uploadTask.percentageChanges();
}
uploadTask.snapshotChanges().pipe(
finalize(() => this.downloadURL = fileRef.getDownloadURL() )
)
.subscribe();
return uploadTask.percentageChanges();

Retrieve & Display List of Files from Firebase Storage

We get the list of files’info (name/url) from Firebase Realtime Database:

private basePath = '/uploads';constructor(private db: AngularFireDatabase, ...) { }getFiles(numberItems): AngularFireList<FileUpload> {
return this.db.list(this.basePath, ref =>
ref.limitToLast(numberItems));
}
this.uploadService.getFileUploads(6).snapshotChanges().pipe(
map(changes =>
changes.map(c => ({ key: c.payload.key, ...c.payload.val() }))
)
).subscribe(fileUploads => {
this.fileUploads = fileUploads;
});

Delete File from Firebase Storage

There are 2 steps:

  • delete file from Storage.
deleteFile(fileUpload: FileUpload): void {
this.deleteFileDatabase(fileUpload.key)
.then(() => {
this.deleteFileStorage(fileUpload.name);
})
.catch(error => console.log(error));
}
private deleteFileDatabase(key: string): void {
return this.db.list(this.basePath).remove(key);
}
private deleteFileStorage(name: string): void {
const storageRef = this.storage.ref(this.basePath);
storageRef.child(name).delete();
}

Implementation

Please visit: https://bezkoder.com/angular-11-file-upload-firebase-storage/

A passionate engineer in software development, especially web, mobile & cross-platform application. I love sharing knowledge by writing blogs & tutorials.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store