Angular 8 – Upload/Display/Delete files to/from Firebase Storage using @angular/fire

angular-8-firebase-storage-tutorial-angular-fire-feature-image

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

angular-8-upload-files-firebase-storage-demo

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

angular-8-upload-files-firebase-storage-overview

– 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:

angular-8-firebase-storage-results

-> Firebase Realtime Database:

angular-8-firebase-storage-database-results

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:

Upload File to Firebase Storage

Uploading a File to Firebase includes 2 action:
– upload file to Firebase Storage.
– save file’s info to Firebase Database.

We use upload() method that returns an AngularFireUploadTask for monitoring.
AngularFireUploadTask has snapshotChanges() method for emitings the raw UploadTaskSnapshot when the file upload progresses.

To get the url of the uploaded file, we use the finalize() method from RxJS with getDownloadURL() doesn’t rely on the task.

Finally, we return the upload completion percentage as Observable<number> using AngularFireUploadTask‘s percentageChanges() method.

Retrieve List of Files from Firebase Storage

We get the list from Firebase Storage using files’info (name/url) stored in Firebase Realtime Database:

Display List of Files

With getFileUploads() method, we can get list of FileUploads including the key/id in Firebase Realtime Database.

We will use snapshotChanges().pipe(map()) to store the key, it’s so important to use this key for removing individual item (FileUpload):

Delete File from Firebase Storage

We delete file with 2 steps:
– delete file’s info from Database
– delete file from Storage

Practice

Project Structure Overview

angular-8-firebase-storage-turorial-project-structure

Integrate Firebase into Angular 8 App

Please visit this post to know step by step.

*Note: Don’t forget to set RULES for public read/write Database and Storage.

angular-8-firebase-storage-rules

Add Firebase config to environments variable

Open /src/environments/environment.ts file, add your Firebase configuration:

Create Service & Components

Run the commands below:
ng g s upload/UploadFile
ng g c upload/FormUpload
ng g c upload/ListUpload
ng g c upload/DetailsUpload

Setup @NgModule

app.module.ts

Create Model Class

fileupload.ts

Create Upload File Service

upload-file.service.ts

Create Component with Upload Form

form-upload.component.ts

form-upload.component.html

Create Component for Item Details

details-upload.component.ts

details-upload.component.html

Create Component to display List of Uploaded files

list-upload.component.ts

list-upload.component.html

Embed Components in App Component

app.component.ts

app.component.html

Source Code

Angular8FirebaseStorage

By grokonez | May 9, 2019.



Related Posts


Got Something To Say:

Your email address will not be published. Required fields are marked *

*