$firebaseStorage and fir-storage-src proposal

@jwngr @katowulf @abehaskins

This issue addresses two features

• $firebaseStorage() service
• fir-storage-src directive

$firebaseStorage

Here is my proposal for the $firebaseStorage() API, written in TypeScript:

You’ll notice that is follows the same binding convention as $firebaseObject(), and $firebaseArray(), as both of those services take a database reference. $firebaseStorage() is similar but it takes a storage reference.

The piece of feedback I’m most looking for is surrounding the events for the $put() method. I’ve currently wrapped each function of the state_change event into a method, $progress, $error, and $completed.

interface $firebaseStorage {
  (ref: firebase.storage.Reference): FirebaseStorage;
}

interface FirebaseStorage {
  new (storageRef: firebase.storage.Reference);
  $put(File): UploadTask;
  $getDownloadURL(): Promise<string>;
  $getMetadata(): Promise<Object>;
  $updateMetadata(): Promise<Object>;
}

interface UploadTask {
  $progress: (Object) => (); // Can't be a promise
  $error: (Error) => (); // Should this be a promise?
  $complete: (Object) => (); // Should this be a promise?
}

Here it is in action:

function MyCtrl($firebaseStorage) {
  // Create a reference (possible create a provider) 
  const storageRef = firebase.storage().ref('user/1.png');
  // Create the storage binding
  const storageFire = $firebaseStorage(storageRef);

  // Get the possible download URL
  storageFire.$getDownloadURL().then(url => {

  });

  const file = // get a file;
  // upload the file
  const task = userImage.$put(file);
  // monitor progress state
  task.$progress(metadata => console.log(metadata));
  // log a possible error
  task.$error(error => console.error(error));
  // log when the upload completes
  task.$completed(metadata => console.log(metadata.downloadURL));

  // meta data
  storageFire.$getMetadata(metadata => console.log(metadata)); 
  storageFire.$uploadMetadata({
    cacheControl: 'public,max-age=300',
    contentType: 'image/jpeg'
  });
}

fir-storage-src

To make displaying images from Firebase Storage simple and adhere to the security model I recommend we develop a directive that retrieve’s the download url and set’s the src attribute of the image:

<!-- no interpolation -->
<img fir-storage-src="users/1.png" />

<!-- interpolation -->
<img fir-storage-src"users/{{currentUser.uid}}.png" />

If you’re interested in seeing this in action, I’ve written a demo app here.

[tianweiliu]

I ported firebase storage upload example(https://firebase.google.com/docs/storage/web/upload-files) to a factory: https://gist.github.com/tianweiliu/6594f6cc09d0e5a3ef6c704db6d2f97a

[davideast]

I think I have a solution that makes everyone happy. We need to start breaking out functionality into specific modules for library size, but we could still expose the "firebase" module for convenience.

If you want individual modules:

const app = angular.module('app', ['angularfire.auth', 'angularfire.database', 'angularfire.storage']);

If you want everything

const app = angular.module('app', ['firebase']);

Thoughts?