Angular 4 Firebase – Get List Files from Storage

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

Updated Post:
Angular 5 Firebase – Upload/Display/Delete Files from Storage

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 Files

HTML template:

III. Practice

1. Project Overview
1.1 Goal

We will build an Angular 4 Firebase App that can:
– helps user choose file from local and upload it to Firebase Storage
– show progress with percentage
– save metadata to Firebase Realtime Database
(previous post‘s functions above)
– display list files from Firebase Storage

angular-4-firebase-storage-get-list-files-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-get-list-files-overview

Upload new file:
angular-4-firebase-storage-get-list-files-result

IV. Source Code

Angular4FirebaseStorage-GetListFiles

By JavaSampleApproach | September 20, 2017.

Last updated on February 20, 2018.


Related Posts


4 thoughts on “Angular 4 Firebase – Get List Files from Storage”

  1. ERROR in src/app/list-upload/list-upload.component.ts(3,9): error TS2305: Module ‘”/home/pedro/Projects/VenztecMaps/node_modules/angularfire2/database/index”‘ has no exported member ‘FirebaseListObservable’.
    src/app/services/uploadfile.service.ts(13,16): error TS2304: Cannot find name ‘FirebaseListObservable’.
    src/app/services/uploadfile.service.ts(44,7): error TS2345: Argument of type ‘{ query: {}; }’ is not assignable to parameter of type ‘QueryFn’.
    Object literal may only specify known properties, and ‘query’ does not exist in type ‘QueryFn’.

    I have this error in console :c

    1. Hi VengadorWeb,

      This tutorial uses AngularFire2 V4.
      FirebaseListObservable is replaced by AngularFireList in AngularFire2 V5. We will post new tutorials for AngularFire2 V5 in the future.

      Regards,
      JSA.

  2. ERROR in src/app/upload/upload-file.service.ts(46,7): error TS2345: Argument of type ‘{ query: {}; }’ is not assignable to parameter of type ‘QueryFn’.
    Object literal may only specify known properties, and ‘query’ does not exist in type ‘QueryFn’.

    1. Hi minakshi,

      This tutorial uses AngularFire2 V4. We will post new tutorials for AngularFire2 V5 in the future.

      Regards,
      JSA.

Got Something To Say:

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

*