Angular 6 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 6 App.

I. Technology

– Angular 6
– 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 6 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


1.2 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 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

2.4 Setup @NgModule


2.5 Model Class


2.6 Service


2.7 Form Upload Compoment



2.8 DetailsUpload Component



2.9 ListUpload Component



2.10 App Component



2.11 Check Result

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


Check Firebase Console:
– Database:


– Storage:


IV. Source Code


By grokonez | June 19, 2018.

Last updated on November 29, 2018.

Related Posts

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

  1. I have seen a ton of posts on the same topic .
    This is the best, well organised post , this Is perfect example of showing how to do something.
    I’m loving it.
    I’m hearty thankful to the author of this post.
    Than you so much.

    1. Hi Nasir Ahamad,

      I am so glad to see your comment. It makes motivation for me to create more things useful for the reader of grokonez. 🙂


Got Something To Say:

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