Angular 4 Firebase – Upload Image & Display List Images from Storage

In previous post, we have known how to upload file to Firebase Storage. This tutorial shows you way to get List Images and display in a simple Angular 4 App.

Related Posts:
How to integrate Firebase with Angular 4
Angular 4 Firebase – Upload File to Storage
Angular 4 Firebase – Delete File from Storage

I. Technology

– Angular 4
– AngularFire2 4.0

II. How to do

1. Set up the Firebase Project & integrate Firebase with Angular 4 App

Please visit this post to know step by step.

2. Upload File Service

We get List Files from Firebase Storage by files’info (name/url) stored in Firebase Realtime Database.

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

angular-4-firebase-storage-display-list-images-overview

1.2 Structure

angular-4-firebase-storage-get-list-files-structure

2. Step by step
2.1 Set up the Firebase Project & integrate Firebase with Angular 4 App

Please visit this post to know step by step.

angular-4-firebase-integration-copy-firebase-project-config

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-4-firebase-storage-display-list-images-overview

Check Firebase Console, the file that we deleted disappears:
– Database:
angular-4-firebase-storage-display-list-images-database-result

– Storage:
angular-4-firebase-storage-display-list-images-storage-result

IV. Source Code

Angular4FirebaseStorage-upload-display-list-images

By JavaSampleApproach | September 21, 2017.


Related Posts


Got Something To Say:

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

*