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:

Related post

• Reactjs CRUD Firebase Realtime Database Example
• Angular 10 CRUD Firebase Realtime Database – use @angular/fire