Firebase Uploader Component with Angular 2

upload.component.ts

import { Component, Input } from '@angular/core';
import { Router } from '@angular/router';
import { AngularFire, FirebaseListObservable } from 'angularfire2';

import { Observable } from 'rxjs';

declare var firebase: any;

interface Image {
    path: string;
    filename: string;
    downloadURL?: string;
    $key?: string;
}

@Component({
    selector: 'image-upload',
    template: `
  <h2>Upload a File</h2>
  <form ngNoForm>
    <input id="file" name="file" type="file" >
    <button (click)="upload()" type="button">Upload</button>
    </form>
    <h2>File Gallery</h2>
    <div style="overflow:hidden;">
        <div *ngFor="let img of imageList | async" style="position:relative;width:100px;height:100px;float:left;display:flex;justify-content:center;align-items:center;">
            <img [src]="img.downloadURL | async" style="max-width:100px;max-height:100px;">
            <button (click)="delete(img)" style="position:absolute;top:2px;right:2px;">[x]</button>
        </div>
    </div>
  `,
})
export class UploadComponent {
    /**
     * The name of the folder for images
     * eg. posts/angular-is-awesome
     */
    @Input() folder: string;
    
    fileList : FirebaseListObservable<Image[]>;
    imageList : Observable<Image[]>;

    constructor(public af: AngularFire, public router: Router) {
    }
    ngOnInit() {
        
    }

    ngOnChanges() {
        console.log("new values for folder");
        let storage = firebase.storage();
        
        this.fileList = this.af.database.list(`/${this.folder}/images`);
        console.log("Rendering all images in ",`/${this.folder}/images`)
        this.imageList = this.fileList.map( itemList =>
            itemList.map( item => {
                var pathReference = storage.ref(item.path);
                let result = {$key: item.$key, downloadURL: pathReference.getDownloadURL(), path: item.path, filename: item.filename};
                console.log(result);
                return result;
            })
        );
    }


    upload() {
        // Create a root reference
        let storageRef = firebase.storage().ref();

        let success = false;
        // This currently only grabs item 0, TODO refactor it to grab them all
        for (let selectedFile of [(<HTMLInputElement>document.getElementById('file')).files[0]]) {
            console.log(selectedFile);
            // Make local copies of services because "this" will be clobbered
            let router = this.router;
            let af = this.af;
            let folder = this.folder;
            let path = `/${this.folder}/${selectedFile.name}`;
            var iRef = storageRef.child(path);
            iRef.put(selectedFile).then((snapshot) => {
                console.log('Uploaded a blob or file! Now storing the reference at',`/${this.folder}/images/`);
                af.database.list(`/${folder}/images/`).push({ path: path, filename: selectedFile.name })
            });
        }
        
    }
    delete(image: Image) {
        let storagePath = image.path;
        let referencePath = `${this.folder}/images/` + image.$key;

        // Do these as two separate steps so you can still try delete ref if file no longer exists

        // Delete from Storage
        firebase.storage().ref().child(storagePath).delete()
        .then(
            () => {},
            (error) => console.error("Error deleting stored file",storagePath)
        );

        // Delete references
        this.af.database.object(referencePath).remove()
            
        

    }
}

Best example I've seen so far. Thanks for helping me get started with storage in ng2.

Pretty good thanks!

dont you think in the line 56 something like this will work -

this.fileList.subscribe(imageRefs => {
            var that = this;
            this.imageList = [];
            if (imageRefs) {
                imageRefs.forEach(imageItem => {
                    var pathReference = storage.ref(imageItem.path);
                    (function (imageItem, pathReference) {
                        pathReference.getDownloadURL().then(url => {
                            that.imageList.push({
                                $key: imageItem.$key,
                                downloadURL: url,
                                path: imageItem.path,
                                fileName: imageItem.fileName,
                            });
                        })
                        .catch(error => {
                            console.error('something is problem ${imageItem.fileName}');
                        });
                    })(imageItem, pathReference);
                });

            }

Awesome! example but I have little doubt. how works this piece? "(/${this.folder}/images)" where from this.folder

I tried it , It is showing firebase is not defined at firebase.storage()

Router is provided but never used. @bhawin-bigstep try and follow this implementation of initializing the app and see if it works: http://stackoverflow.com/questions/39067832/accessing-firebase-storage-with-angularfire2-angular2-rc-5

this line "[(document.getElementById('file')).files[0]]" doesn't work for me and always returning "TypeError: Cannot read property 'files' of null"

Hi.

I've been trying the "ngOnChanges" method to retrieve all the files from my firebase Storage, but increasingly it seems to be more confusing :(

Well before it happened I tried to get only one image with like this:

  **let storage = firebase.storage();
  var storageRef = storage.ref();
  // Create a reference to the file we want to download
  var starsRef = storageRef.child('images/IMG_0956 (1).JPG');
  // Get the download URL      
   starsRef.getDownloadURL().then(url => this.image = url  );** 

it successfully worked, but when I tried to get all the pictures using the "ngOnChanges" method which I found here, sadly I couldn't get the URL from the Item object.

here is where appear the exception:
let result = {$key: item.$key, downloadURL: pathReference.getDownloadURL(), path: item.path, filename: item.filename};//

This is the exception:

EXCEPTION: Firebase Storage: The operation 'getDownloadURL' cannot be performed on a root reference, create a non-root reference using child, such as .child('file.png').
Error: r {code: "storage/invalid-root-operation", message: "Firebase Storage: The operation 'getDownloadURL' c…", serverResponse: null, …}

Does anyone knows what is happening?

Thanks.

This code is outdated now
import { AngularFire, FirebaseListObservable } from 'angularfire2'; is no longer supported in the Angularfire2 V4.0
please correct it accordingly

You need import { Component, OnInit, OnChanges, Input } from '@angular/core'; and implements OnInit, OnChanges { for valid code.