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

In the post, we have known how to upload file to Firebase Storage. This tutorial shows you way to upload, get, delete Images 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 Images

HTML template:

4. Check image format

III. Practice

1. Project Overview
1.1 Goal

We will build an Angular 5 Firebase App that can:
– helps user choose image file from local and upload it to Firebase Storage
– show progress with percentage
– save image metadata to Firebase Realtime Database
(Functions above from the posts: Angular 4 Firebase – Upload File to Storage)
– get list Images 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 Setup @NgModule

2.4 Model Class

2.5 Service

2.6 Form Upload Compoment


2.7 DetailsUpload Component



2.8 ListUpload Component



2.9 App Component



2.10 Check Result

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


Check Firebase Console:
– Database:


– Storage:


IV. Source Code


By grokonez | February 19, 2018.

Last updated on November 29, 2018.

Related Posts

11 thoughts on “Angular 5 Firebase – Upload/Display/Delete Images from Storage”

  1. Dear Admin of JavaSampleApproach. I’m very thankful for all of stuffs you did for this Angular and Firebase Tutorial, These are what I was looking for days. A great presentation of tutorial like this. God bless you admin. Thank you for all of these tutorials. Keep doing good content !

    Radvil from Indonesia

    1. Hi Radvil,

      Thank you so much for your comment, it makes us feel motivated to keep working 🙂

      Best Regards,

  2. [ts] Property ‘map’ does not exist on type ‘Observable<AngularFireAction<DatabaseSnapshot>[]>’.

    error in ListUploadComponent.ts.

    Please help.

  3. Property ‘key’ does not exist on type ‘DatabaseSnapshot’.
    Property ‘key’ does not exist on type ‘DatabaseSnapshotExists’.

    Getting this error, Please help.

    1. import { Component , OnInit} from ‘@angular/core’;
      import { Hero} from ‘./hero’;
      import {AngularFireList, AngularFireDatabase} from ‘@angular/fire/database’;
      selector: ‘app-root’,
      templateUrl: ‘./app.component.html’,
      styleUrls: [‘./app.component.css’]

      export class AppComponent implements OnInit {
      title = ‘Angular Pipe Testing’;
      todaydate = new Date();
      heros: AngularFireList;
      heroslist: Hero[];
      selectedhero: Hero;
      n = ”;
      a = ”;
      add = ”;

      constructor(private firebase: AngularFireDatabase) {}

      ngOnInit() {
      const x = this.getData().snapshotChanges();
      x.subscribe(item => {
      this.heroslist = [];
      item.forEach(element => {
      const y = element.payload.toJSON();
      y[‘$key’] = element.key;
      this.heroslist.push(y as Hero);

      getData() {
      this.heros = this.firebase.list(‘Forms’);
      return this.heros;

      Details(hero: Hero) {
      this.selectedhero = hero;

      MyFormUpload() {
      name : this.n,
      age : this.a,
      address: this.add
      console.log(‘Upload success’);

    1. I have review the code, the key error is triggered when trying to display the images from the: ‘ListUploadComponent’. If you delete that part of code it’ll run correctly. Besides, the uploading section works successfully.

      I’ll continue to try to display the images, if I find something useful I’ll share.

      1. I continue to trying to fix the error and I found that is related to the image save. When the image is saved it only gets save on the storage, but it doesn’t have a relation in the database, this is due to the fact that the url is not retrieved in the pushFileToStorage Method.

        I fixed that by using the method like the next one:

        this will return correctly the url of the image from the cloud storage and insert as a register in the database, once that is set the image display bring the images successfully.


        1. error TS2339: Property ‘map’ does not exist on type ‘Observable<AngularFireAction<DatabaseSnapshot>[]>’

        2. it is not sending the downloadURL to firebase database in
          angular7 and “angularfire2”: “^5.1.1”
          what can i do?

Got Something To Say:

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