Angular 8 – Upload/Display/Delete files to/from Firebase Storage using @angular/fire
In this tutorial, grokonez.com shows you way to upload, get, delete Files to/from Firebase Storage in a simple Angular 8 App using @angular/fire. Files' info will be stored in Firebase Realtime Database.
Related Posts:
- Angular 8 Firebase tutorial: Integrate Firebase into Angular 8 App with @angular/fire
- Angular 8 Firebase CRUD operations with @angular/fire
- Angular 8 Firestore tutorial with CRUD application example – @angular/fire
Want to know to to deploy Angular App on Hostings?
Please visit this Series (with Instructional Videos)
Angular 8 App with Firebase Storage
Technologies
- Angular 8
- RxJs 6
– @angular/fire 5.1.3
– firebase 5.11.1
Angular 8 App Overview
We will build an Angular 8 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 do
- Upload file:
- save file to Firebase Cloud Storage
- retrieve
{name, url}of the file from Firebase Cloud Storage save
{name, url}to Firebase Realtime DatabaseGet/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:
Integrate Firebase into Angular 8 App
Please visit this post to know step by step.
Define Model Class
We define FileUpload class with fields: key, name, url, file:
More at:
Angular 8 – Upload/Display/Delete files to/from Firebase Storage using @angular/fire
Top comments (0)