Firebase Storage + Angular 10: File Upload/Display/Delete example
In this tutorial, I will show you how to make File Upload/Display/Delete with Firebase Storage and Angular 10 with the help of @angular/fire. Files' info will be stored in Firebase Realtime Database.
Firebase Storage + Angular 10 example Overview
We’re gonna build an Angular 10 App that helps us:
- upload file to Firebase Storage
- 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
The result in Firebase Cloud Storage:
And Realtime Database:
Following image shows the data flow with Angular Client, Firebase Cloud Storage & Firebase Realtime Database:
- File upload:
- store a file to Firebase Cloud Storage
- retrieve metadata (name, url) of the file from Firebase Cloud Storage
- save metadata (name, url) to Firebase Realtime Database
- Display/get/delete files: use the file metadata (name, url) which is stored in Realtime Database as reference to interact with Firebase Storage.
For more details, please visit:
https://bezkoder.com/firebase-storage-angular-10-file-upload/
Further Reading
You can find how to make CRUD operations with Realtime DB or Firestore in the posts:
- Angular 10 Firebase CRUD Realtime DB with AngularFireDatabase
- Angular 10 Firestore CRUD with AngularFireStore
Or create Angular HTTP Client for working with Restful API in:
Angular 10 CRUD Application example with Web API
Source Code
You can find the complete source code for this tutorial on Github.
Originally published at https://bezkoder.com.
