WIP AngularFireStorage

[jamesdaniels]

Checklist

• Issue number for this PR: Proposal: AngularFireStorage #940
• Docs included?: yes
• Test units included?: not yet
• e2e tests included?: no
• In a clean directory, npm install, npm run build, and npm test run successfully? yes

Description

Adding AngularFireStorage as proposed in #940

AngularFireStorage.upload(
  pathOrRef: string | firebase.storage.Reference,
  data: Blob | Uint8Array | ArrayBuffer,
  metadata: firebase.storage.UploadMetadata = {}
) : FirebaseUploadTaskObservable<firebase.storage.UploadTaskSnapshot>

AngularFireStorage.storage : firebase.storage.Storage

FirebaseUploadTaskObservable extends Observable<UploadTaskSnapshot>
FirebaseUploadTaskObservable.cancel() : Boolean
FirebaseUploadTaskObservable.pause() : Boolean
FirebaseUploadTaskObservable.resume() : Boolean
FirebaseUploadTaskObservable.uploadTask : firebase.storage.UploadTask 

I have to extend test coverage over this, but wanted to open my WIP to critique.

Further I adding the start of AngularFireMessaging. It only has .messaging which points towards the initialized firebase.messaging.Messaging object right now, for consistency. I will flush this out in another proposal/PR.

Code sample

import { Component } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Subscription } from 'rxjs/Subscription';
import * as firebase from 'firebase/app';
import { AngularFireAuth } from 'angularfire2/auth';
import { AngularFireStorage } from 'angularfire2/storage';

@Component({
  selector: 'app-upload',
  templateUrl: './upload.component.html',
  styleUrls: ['./upload.component.css']
})
export class UploadComponent {

  task: FirebaseUploadTaskObservable<firebase.storage.UploadTaskSnapshot>;
  state: Observable<String>;
  uploading: Observable<Boolean>;
  success: Observable<Boolean>;
  percentage: Observable<number>;

  constructor(private afAuth: AngularFireAuth, private afStorage: AngularFireStorage) {
    afStorage.storage.setMaxUploadRetryTime(1000)
  }

  upload(event) {
    const file = event.srcElement.files[0];

    this.task = this.afStorage.upload(`/uploads/${file.name}`, file, {
      customMetadata: {
        uid: this.afAuth.auth.currentUser.uid
      }
    });

    this.state = task.map(s => s.state);
    this.uploading = state.map(s => s === firebase.storage.TaskState.RUNNING);
    this.success = state.map(s => s === firebase.storage.TaskState.SUCCESS);
    this.percentage = task.map(s => s.bytesTransferred / s.totalBytes * 100);
  }
  
  pause(event) {
    task.pause();
  }

  resume(event) {
    task.resume();
  }

  cancel(event) {
    task.cancel();
  }
}

[listepo]

@jamesdaniels, when it will be in beta? I would help with testing.

[adsonrocha]

I am looking forward to this release!

[ankemp]

This is what I did for getting something from storage.
It works good, except in lists where data updates as it tries to re-load all of the items from storage again and I haven't taken the time to fix that.

import { Pipe, PipeTransform, Inject } from '@angular/core';
import { FirebaseApp } from 'angularfire2';
import * as firebase from 'firebase';

@Pipe({
    name: 'fromStorage'
})
export class FromStoragePipe implements PipeTransform {
    private storageRef: any;
    private bucket: string = 'gs://path-to-bucket';

    constructor(
        @Inject(FirebaseApp) firebaseApp: any
    ) {
        this.storageRef = firebase.storage(firebaseApp).refFromURL(this.bucket);
    }

    transform(url: string): Promise<string> {
        if (!url) {
            return Promise.resolve('');
        }
        if (url && url.includes('http')) {
            return Promise.resolve(url);
        }
        return this.storageRef.child(url).getDownloadURL();
    }

}

[abdel-ships-it]

This looks good! When will it be merged? 👍

[littleninja]

I'm new to helping on open source projects but would be glad to assist with tests.

Setting up on this branch, I ran into the Typescript 2.4 error that I think you already fixed with #1076 . Unless I missed something in the commit history on storage branch, could we merge changes from angular:master to fix the build? (I'll try to create a pull request to your storage branch if I'm able to beat you to it.)

[littleninja]

Adding comment pointing to a type error.

[littleninja]

I'm getting a type error here: Type 'R' is not assignable to type 'UploadTaskSnapshot'. I'm still poking at it but maybe someone else has insight into RxJS observer patterns.

[jamesdaniels]

Yeah, I'll get this back up to speed with master to fix shortly. Was letting David get in his systemjs fixes before piling on.

[Toxicable]

@jamesdaniels whats the status on this? Do you need a hand?
Also looks like it's missing a few features, downloading, and deleting, unless i've missed something.

[tigercosmos]

Want to see it soon.

[cluskii]

I would be keen to see this released, let me know if there's anything I can help with.

[davideast]

Closing due to 5.0.0 refactor. We will have a better solution in the near future.