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

export class UploadFileService {

  private basePath = '/uploads';

  constructor(private db: AngularFireDatabase) { }

  pushFileToStorage(fileUpload: FileUpload, progress: { percentage: number }) {
    const storageRef = firebase.storage().ref();
    storageRef.child(`${this.basePath}/${fileUpload.file.name}`).put(fileUpload.file);

    fileUpload.url = downloadURL;
    fileUpload.name = fileName;
    this.saveFileData(fileUpload);
  }

  private saveFileData(fileUpload: FileUpload) {
    this.db.list(`${this.basePath}/`).push(fileUpload);
  }

  getFileUploads(numberItems): AngularFireList<FileUpload> {
    return this.db.list(this.basePath, ref =>
      ref.limitToLast(numberItems));
  }

  deleteFileUpload(fileUpload: FileUpload) {
    this.deleteFileDatabase(fileUpload.key)
      .then(() => {
        this.deleteFileStorage(fileUpload.name);
      })
      .catch(error => console.log(error));
  }

  private deleteFileDatabase(key: string) {
    return this.db.list(`${this.basePath}/`).remove(key);
  }

  private deleteFileStorage(name: string) {
    const storageRef = firebase.storage().ref();
    storageRef.child(`${this.basePath}/${name}`).delete();
  }
}

export class UploadFileService {

private basePath = '/uploads';

constructor(private db: AngularFireDatabase) { }

pushFileToStorage(fileUpload: FileUpload, progress: { percentage: number }) {

const storageRef = firebase.storage().ref();

storageRef.child(`${this.basePath}/${fileUpload.file.name}`).put(fileUpload.file);

fileUpload.url = downloadURL;

fileUpload.name = fileName;

this.saveFileData(fileUpload);

}

private saveFileData(fileUpload: FileUpload) {

this.db.list(`${this.basePath}/`).push(fileUpload);

}

getFileUploads(numberItems): AngularFireList<FileUpload> {

return this.db.list(this.basePath, ref =>

ref.limitToLast(numberItems));

}

deleteFileUpload(fileUpload: FileUpload) {

this.deleteFileDatabase(fileUpload.key)

.then(() => {

this.deleteFileStorage(fileUpload.name);

})

.catch(error => console.log(error));

}

private deleteFileDatabase(key: string) {

return this.db.list(`${this.basePath}/`).remove(key);

}

private deleteFileStorage(name: string) {

const storageRef = firebase.storage().ref();

storageRef.child(`${this.basePath}/${name}`).delete();

}

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

import { FileUpload } from '../fileupload';
import { UploadFileService } from '../upload-file.service';

export class ListUploadComponent implements OnInit {

  fileUploads: any[];

  constructor(private uploadService: UploadFileService) { }

  ngOnInit() {
    // Use snapshotChanges().map() to store the key
    this.uploadService.getFileUploads(6).snapshotChanges().map(changes => {
      return changes.map(c => ({ key: c.payload.key, ...c.payload.val() }));
    }).subscribe(fileUploads => {
      this.fileUploads = fileUploads;
    });
  }

}

import { FileUpload } from '../fileupload';

import { UploadFileService } from '../upload-file.service';

export class ListUploadComponent implements OnInit {

fileUploads: any[];

constructor(private uploadService: UploadFileService) { }

ngOnInit() {

// Use snapshotChanges().map() to store the key

this.uploadService.getFileUploads(6).snapshotChanges().map(changes => {

return changes.map(c => ({ key: c.payload.key, ...c.payload.val() }));

}).subscribe(fileUploads => {

this.fileUploads = fileUploads;

});

}

HTML template:

<div *ngFor="let file of fileUploads">
	{{file.name}}
	<img src="{{file.url}}"/>
</div>

</div>

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:

export const environment = {
  production: false,
  firebase: {
    apiKey: 'xxx',
    authDomain: 'jsa-angular5.firebaseapp.com',
    databaseURL: 'https://jsa-angular5.firebaseio.com',
    projectId: 'jsa-angular5',
    storageBucket: 'xxxbucket.appspot.com',
    messagingSenderId: 'xxx'
  }
};

export const environment = {

production: false,

firebase: {

apiKey: 'xxx',

authDomain: 'jsa-angular5.firebaseapp.com',

databaseURL: 'https://jsa-angular5.firebaseio.com',

projectId: 'jsa-angular5',

storageBucket: 'xxxbucket.appspot.com',

messagingSenderId: 'xxx'

}

};

2.3 Setup @NgModule

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AngularFireDatabaseModule } from 'angularfire2/database';
import { AngularFireModule } from 'angularfire2';
import { environment } from '../environments/environment';

import { AppComponent } from './app.component';

import { UploadFileService } from './upload/upload-file.service';

import { FormUploadComponent } from './upload/form-upload/form-upload.component';
import { ListUploadComponent } from './upload/list-upload/list-upload.component';
import { DetailsUploadComponent } from './upload/details-upload/details-upload.component';

@NgModule({
  declarations: [
    AppComponent,
    FormUploadComponent,
    ListUploadComponent,
    DetailsUploadComponent
  ],
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireDatabaseModule
  ],
  providers: [UploadFileService],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { AngularFireDatabaseModule } from 'angularfire2/database';

import { AngularFireModule } from 'angularfire2';

import { environment } from '../environments/environment';

import { AppComponent } from './app.component';

import { UploadFileService } from './upload/upload-file.service';

import { FormUploadComponent } from './upload/form-upload/form-upload.component';

import { ListUploadComponent } from './upload/list-upload/list-upload.component';

import { DetailsUploadComponent } from './upload/details-upload/details-upload.component';

@NgModule({

declarations: [

AppComponent,

FormUploadComponent,

ListUploadComponent,

DetailsUploadComponent

imports: [

BrowserModule,

AngularFireModule.initializeApp(environment.firebase),

AngularFireDatabaseModule

providers: [UploadFileService],

bootstrap: [AppComponent]

})

export class AppModule { }

2.4 Model Class

export class FileUpload {

  key: string;
  name: string;
  url: string;
  file: File;

  constructor(file: File) {
    this.file = file;
  }
}

export class FileUpload {

key: string;

name: string;

url: string;

file: File;

constructor(file: File) {

this.file = file;

}

2.5 Service

import { Injectable } from '@angular/core';
import { AngularFireDatabase, AngularFireList } from 'angularfire2/database';
import * as firebase from 'firebase';

import { FileUpload } from './fileupload';

@Injectable()
export class UploadFileService {

  private basePath = '/uploads';

  constructor(private db: AngularFireDatabase) { }

  pushFileToStorage(fileUpload: FileUpload, progress: { percentage: number }) {
    const storageRef = firebase.storage().ref();
    const uploadTask = storageRef.child(`${this.basePath}/${fileUpload.file.name}`).put(fileUpload.file);

    uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED,
      (snapshot) => {
        // in progress
        const snap = snapshot as firebase.storage.UploadTaskSnapshot;
        progress.percentage = Math.round((snap.bytesTransferred / snap.totalBytes) * 100);
      },
      (error) => {
        // fail
        console.log(error);
      },
      () => {
        // success
        fileUpload.url = uploadTask.snapshot.downloadURL;
        fileUpload.name = fileUpload.file.name;
        this.saveFileData(fileUpload);
      }
    );
  }

  private saveFileData(fileUpload: FileUpload) {
    this.db.list(`${this.basePath}/`).push(fileUpload);
  }

  getFileUploads(numberItems): AngularFireList<FileUpload> {
    return this.db.list(this.basePath, ref =>
      ref.limitToLast(numberItems));
  }

  deleteFileUpload(fileUpload: FileUpload) {
    this.deleteFileDatabase(fileUpload.key)
      .then(() => {
        this.deleteFileStorage(fileUpload.name);
      })
      .catch(error => console.log(error));
  }

  private deleteFileDatabase(key: string) {
    return this.db.list(`${this.basePath}/`).remove(key);
  }

  private deleteFileStorage(name: string) {
    const storageRef = firebase.storage().ref();
    storageRef.child(`${this.basePath}/${name}`).delete();
  }
}

import { Injectable } from '@angular/core';

import { AngularFireDatabase, AngularFireList } from 'angularfire2/database';

import * as firebase from 'firebase';

import { FileUpload } from './fileupload';

@Injectable()

export class UploadFileService {

private basePath = '/uploads';

constructor(private db: AngularFireDatabase) { }

pushFileToStorage(fileUpload: FileUpload, progress: { percentage: number }) {

const storageRef = firebase.storage().ref();

const uploadTask = storageRef.child(`${this.basePath}/${fileUpload.file.name}`).put(fileUpload.file);

uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED,

(snapshot) => {

// in progress

const snap = snapshot as firebase.storage.UploadTaskSnapshot;

progress.percentage = Math.round((snap.bytesTransferred / snap.totalBytes) * 100);

(error) => {

// fail

console.log(error);

() => {

// success

fileUpload.url = uploadTask.snapshot.downloadURL;

fileUpload.name = fileUpload.file.name;

this.saveFileData(fileUpload);

}

);

}

private saveFileData(fileUpload: FileUpload) {

this.db.list(`${this.basePath}/`).push(fileUpload);

}

getFileUploads(numberItems): AngularFireList<FileUpload> {

return this.db.list(this.basePath, ref =>

ref.limitToLast(numberItems));

}

deleteFileUpload(fileUpload: FileUpload) {

this.deleteFileDatabase(fileUpload.key)

.then(() => {

this.deleteFileStorage(fileUpload.name);

})

.catch(error => console.log(error));

}

private deleteFileDatabase(key: string) {

return this.db.list(`${this.basePath}/`).remove(key);

}

private deleteFileStorage(name: string) {

const storageRef = firebase.storage().ref();

storageRef.child(`${this.basePath}/${name}`).delete();

}

2.6 Form Upload Compoment

import { Component, OnInit } from '@angular/core';

import { UploadFileService } from '../upload-file.service';
import { FileUpload } from '../fileupload';

@Component({
  selector: 'form-upload',
  templateUrl: './form-upload.component.html',
  styleUrls: ['./form-upload.component.css']
})
export class FormUploadComponent implements OnInit {

  selectedFiles: FileList;
  currentFileUpload: FileUpload;
  progress: { percentage: number } = { percentage: 0 };

  constructor(private uploadService: UploadFileService) { }

  ngOnInit() {
  }

  selectFile(event) {
    this.selectedFiles = event.target.files;
  }

  upload() {
    const file = this.selectedFiles.item(0);
    this.selectedFiles = undefined;

    this.currentFileUpload = new FileUpload(file);
    this.uploadService.pushFileToStorage(this.currentFileUpload, this.progress);
  }
}

import { Component, OnInit } from '@angular/core';

import { UploadFileService } from '../upload-file.service';

import { FileUpload } from '../fileupload';

@Component({

selector: 'form-upload',

templateUrl: './form-upload.component.html',

styleUrls: ['./form-upload.component.css']

})

export class FormUploadComponent implements OnInit {

selectedFiles: FileList;

currentFileUpload: FileUpload;

progress: { percentage: number } = { percentage: 0 };

constructor(private uploadService: UploadFileService) { }

ngOnInit() {

}

selectFile(event) {

this.selectedFiles = event.target.files;

}

upload() {

const file = this.selectedFiles.item(0);

this.selectedFiles = undefined;

this.currentFileUpload = new FileUpload(file);

this.uploadService.pushFileToStorage(this.currentFileUpload, this.progress);

}

form-upload.component.html:

<div *ngIf="currentFileUpload" class="progress">
	<div class="progress-bar progress-bar-info progress-bar-striped"
		role="progressbar" attr.aria-valuenow="{{progress.percentage}}"
		aria-valuemin="0" aria-valuemax="100"
		[ngStyle]="{width:progress.percentage+'%'}">
		{{progress.percentage}}%</div>
</div>

<label class="btn btn-default"> <input type="file"
	(change)="selectFile($event)">
</label>

<button class="btn btn-success" [disabled]="!selectedFiles"
	(click)="upload()">Upload</button>

<div class="progress-bar progress-bar-info progress-bar-striped"

role="progressbar" attr.aria-valuenow="{{progress.percentage}}"

aria-valuemin="0" aria-valuemax="100"

[ngStyle]="{width:progress.percentage+'%'}">

{{progress.percentage}}%</div>

</div>

<label class="btn btn-default"> <input type="file"

(change)="selectFile($event)">

</label>

<button class="btn btn-success" [disabled]="!selectedFiles"

(click)="upload()">Upload</button>

2.7 DetailsUpload Component

details-upload.component.ts

import { Component, OnInit, Input } from '@angular/core';
import { FileUpload } from '../fileupload';
import { UploadFileService } from '../upload-file.service';

@Component({
  selector: 'details-upload',
  templateUrl: './details-upload.component.html',
  styleUrls: ['./details-upload.component.css']
})
export class DetailsUploadComponent implements OnInit {

  @Input() fileUpload: FileUpload;

  constructor(private uploadService: UploadFileService) { }

  ngOnInit() {
  }

  deleteFileUpload(fileUpload) {
    this.uploadService.deleteFileUpload(fileUpload);
  }
}

import { Component, OnInit, Input } from '@angular/core';

import { FileUpload } from '../fileupload';

import { UploadFileService } from '../upload-file.service';

@Component({

selector: 'details-upload',

templateUrl: './details-upload.component.html',

styleUrls: ['./details-upload.component.css']

})

export class DetailsUploadComponent implements OnInit {

@Input() fileUpload: FileUpload;

constructor(private uploadService: UploadFileService) { }

ngOnInit() {

}

deleteFileUpload(fileUpload) {

this.uploadService.deleteFileUpload(fileUpload);

}

details-upload.component.html

<a href="{{fileUpload.url}}">{{fileUpload.name}}</a>
<button (click)='deleteFileUpload(fileUpload)'
	class="btn btn-danger btn-xs" style="float: right">Delete</button>

<a href="{{fileUpload.url}}">{{fileUpload.name}}</a>

<button (click)='deleteFileUpload(fileUpload)'

class="btn btn-danger btn-xs" style="float: right">Delete</button>

2.8 ListUpload Component

list-upload.component.ts

import { Component, OnInit } from '@angular/core';

import { FileUpload } from '../fileupload';
import { UploadFileService } from '../upload-file.service';

@Component({
  selector: 'list-upload',
  templateUrl: './list-upload.component.html',
  styleUrls: ['./list-upload.component.css']
})
export class ListUploadComponent implements OnInit {

  fileUploads: any[];

  constructor(private uploadService: UploadFileService) { }

  ngOnInit() {
    // Use snapshotChanges().map() to store the key
    this.uploadService.getFileUploads(6).snapshotChanges().map(changes => {
      return changes.map(c => ({ key: c.payload.key, ...c.payload.val() }));
    }).subscribe(fileUploads => {
      this.fileUploads = fileUploads;
    });
  }

}

import { Component, OnInit } from '@angular/core';

import { FileUpload } from '../fileupload';

import { UploadFileService } from '../upload-file.service';

@Component({

selector: 'list-upload',

templateUrl: './list-upload.component.html',

styleUrls: ['./list-upload.component.css']

})

export class ListUploadComponent implements OnInit {

fileUploads: any[];

constructor(private uploadService: UploadFileService) { }

ngOnInit() {

// Use snapshotChanges().map() to store the key

this.uploadService.getFileUploads(6).snapshotChanges().map(changes => {

return changes.map(c => ({ key: c.payload.key, ...c.payload.val() }));

}).subscribe(fileUploads => {

this.fileUploads = fileUploads;

});

}

list-upload.component.html

<div class="panel panel-primary">
	<div class="panel-heading">List of Files</div>
	<div *ngFor="let file of fileUploads">
		<div class="panel-body">
			<details-upload [fileUpload]='file'></details-upload>
		</div>
	</div>
</div>

<div class="panel-heading">List of Files</div>

<details-upload [fileUpload]='file'></details-upload>

</div>

2.9 App Component

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'JavaSampleApproach';
  description = 'Angular5-Firebase Demo';
}

import { Component } from '@angular/core';

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

title = 'JavaSampleApproach';

description = 'Angular5-Firebase Demo';

}

app.component.html

<div class="container" style="width:400px">
	<div style="color: blue; margin-bottom: 20px">
		<h1>{{title}}</h1>
		<h3>{{description}}</h3>
	</div>

	<form-upload></form-upload>
	
	<br/>
	<br/>
	
	<list-upload></list-upload>
</div>

<h1>{{title}}</h1>

<h3>{{description}}</h3>

</div>

<form-upload></form-upload>

<br/>

<list-upload></list-upload>

</div>

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.

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

Marty says:

February 23, 2018 at 1:43 am

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:

service firebase.storage { match /b/{bucket}/o { match /{allPaths=**} { allow read, write; } } }

1
2
3
4
5
6
7

service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write;
    }
  }
}

The rules on my database:

service cloud.firestore { match /databases/{database}/documents { match /{document=**} { allow read, write; } } }

1
2
3
4
5
6
7

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write;
    }
  }
}

Any help is greatly appreciated.

1. JavaSampleApproach says:
  
  February 23, 2018 at 3:24 am
  
  Hi Marty,
  
  Please notice that I use Firebase Realtime Database, not Firestore 🙂
  
  Regards,
  JSA.
  
Rohit Raj says:

March 10, 2018 at 10:27 pm

How to dynamically set private variable base path in upload file service

Fayrouz Feki says:

May 28, 2018 at 1:17 am

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’.

shailesh Budakoti says:

June 11, 2018 at 12:30 pm

Hi, Thanks For the awesome tutorial, it worked for me

sangeeth says:

July 1, 2018 at 2:49 pm

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

Post Tags

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

Got Something To Say: Cancel reply

I. Technology

II. How to do

1. Set up the Firebase Project & Install AngularFire2

2. Upload File Service

3. Get and display List of Files

III. Practice

1. Project Overview

1.1 Goal

1.2 Structure

2. Step by step

2.1 Set up the Firebase Project & Install AngularFire2

2.2 Add Firebase config to environments variable

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

IV. Source Code

Related Posts

Post Tags

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

Got Something To Say: Cancel reply