Angular 5 Firebase – Upload/Display/Delete Files from Storage

In the post, we have known how to upload file to Firebase Storage. This tutorial shows you way to upload, get, delete Files in a simple Angular 5 App.

I. Technology

– Angular 5
– AngularFire2 5.0

II. How to do

1. Set up the Firebase Project & Install AngularFire2

Please visit this post to know step by step.

2. Upload File Service

– upload file to Storage and file’s info to Database.
– get List Files from Firebase Storage by files’info (name/url) stored in Database.
– delete file with 2 steps: delete file’s info from Database, then delete file from Storage

To know how to save file info to Firebase Realtime Database, please visit previous post:
Angular 4 Firebase – Upload File to Storage

3. Get and display List of Files

HTML template:

III. Practice

1. Project Overview
1.1 Goal

We will build an Angular 5 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: Angular 4 Firebase – Upload File to Storage)
– get list Files and display

angular-5-firebase-upload-get-files-storage-demo

1.2 Structure

angular-5-firebase-upload-get-images-storage-structure

2. Step by step
2.1 Set up the Firebase Project & Install AngularFire2

Please visit this post to know step by step.

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

2.2 Add Firebase config to environments variable

Open /src/environments/environment.ts, add your Firebase configuration that we have saved when Popup window was shown:

2.3 Setup @NgModule

2.4 Model Class

2.5 Service

2.6 Form Upload Compoment

form-upload.component.html:

2.7 DetailsUpload Component

details-upload.component.ts

details-upload.component.html

2.8 ListUpload Component

list-upload.component.ts

list-upload.component.html

2.9 App Component

app.component.ts

app.component.html

2.10 Check Result

Run the App, go to http://localhost:4200/.

angular-5-firebase-upload-get-files-storage-demo

Check Firebase Console:
– Database:

angular-5-firebase-upload-get-images-storage-result-database

– Storage:

angular-5-firebase-upload-get-images-storage-result-storage

IV. Source Code

Angular5FirebaseStorage-list-files

By grokonez | February 20, 2018.

Last updated on November 29, 2018.



Related Posts


6 thoughts on “Angular 5 Firebase – Upload/Display/Delete Files from Storage”

  1. I am able to upload files, but get the following error when the list component tries to display files:

    ERROR Error: Uncaught (in promise): Error: PERMISSION_DENIED: Permission denied
    Error: PERMISSION_DENIED: Permission denied

    The rules on my storage:

    The rules on my database:

    Any help is greatly appreciated.

  2. ERROR in src/app/upload/list-upload/list-upload.component.ts(20,48): error TS2339: Property ‘key’ does not exist on type ‘DatabaseSnapshot’.
    Property ‘key’ does not exist on type ‘DatabaseSnapshotExists’.

  3. Iam getting the following error
    Invalid argument in on at index 0: Expected one of the event types: [state_changed].”,”serverResponse_”:null,”name_”:”FirebaseError

Got Something To Say:

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

*