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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
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 Images
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
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:
|
1 2 3 4 |
<div *ngFor="let file of fileUploads"> {{file.name}} <img src="{{file.url}}"/> </div> |
4. Check image format
|
1 2 3 4 5 |
if (file.type.match('image.*')) { // do something } else { alert('invalid 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:
|
1 2 3 4 5 6 7 8 9 10 11 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
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
|
1 2 3 4 5 6 7 8 9 10 11 |
export class FileUpload { key: string; name: string; url: string; file: File; constructor(file: File) { this.file = file; } } |
2.5 Service
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
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) { const file = event.target.files.item(0); if (file.type.match('image.*')) { this.selectedFiles = event.target.files; } else { alert('invalid format!'); } } 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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<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> |
2.7 DetailsUpload Component
details-upload.component.ts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
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
|
1 2 3 4 |
{{fileUpload.name}} <button (click)='deleteFileUpload(fileUpload)' class="btn btn-danger btn-xs" style="float: right">Delete</button> <img src="{{fileUpload.url}}" alt="{{fileUpload.name}}" style="max-width:350px"/> |
2.8 ListUpload Component
list-upload.component.ts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
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
|
1 2 3 4 5 6 7 8 |
<div class="panel panel-primary"> <div class="panel-heading">List of Images</div> <div *ngFor="let file of fileUploads"> <div class="panel-body"> <details-upload [fileUpload]='file'></details-upload> </div> </div> </div> |
2.9 App Component
app.component.ts
|
1 2 3 4 5 6 7 8 9 10 11 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<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> |
2.10 Check Result
Run the App, go to http://localhost:4200/.
Check Firebase Console:
– Database:
– Storage:
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
Hi Radvil,
Thank you so much for your comment, it makes us feel motivated to keep working 🙂
Best Regards,
JSA.
[ts] Property ‘map’ does not exist on type ‘Observable<AngularFireAction<DatabaseSnapshot>[]>’.
error in ListUploadComponent.ts.
Please help.
Property ‘key’ does not exist on type ‘DatabaseSnapshot’.
Property ‘key’ does not exist on type ‘DatabaseSnapshotExists’.
Getting this error, Please help.
I have the same problem with the key does not exist on type ‘DatabaseSnapshot’.
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.
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.
Greetings.
error TS2339: Property ‘map’ does not exist on type ‘Observable<AngularFireAction<DatabaseSnapshot>[]>’