https://loizenai.com/angular-11-upload-file-to-firebase-storage/
@angular/fire/storage Angular 11 Upload files to Firebase
Technologies – Angular 11 Upload File to Firebase Storage
– Angular 11
– RxJs 6
– @angular/fire 5.1.3
– firebase 5.11.1
Overview Angular 11 Upload file to Firebase Storage
We will build an Angular 11 Firebase App that can:
– helps user choose file from local and upload it to Firebase Storage
– show progress with percentage
– save file metadata to Firebase Realtime Database
(Functions above from the posts: Upload File to Storage)
– get list Files and display
How to upload file from Angular to Firebase storage using @angular/fire/storage?
– Upload file:
- save file to Firebase Cloud Storage
- retrieve {name, url} of the file from Firebase Cloud Storage
- save {name, url} to Firebase Realtime Database
– Get/delete files: use file {name, url} stored in Database as reference to Firebase Cloud Storage.
So, after upload process, the results will be like:
-> Firebase Storage:
-> Firebase Realtime Database:
Top comments (2)
I never save the full firebase storage URL in the database, because it generates an access token by access time. I prefer fetching it by Firestore
getDownloadURL()method.You can save. URL (with token) does not change unless you overwrite the file, as far as I know.