Over a million developers have joined DZone.

Firebase Storage Is Officially in AngularFire 2.3.0

DZone's Guide to

Firebase Storage Is Officially in AngularFire 2.3.0

With AngularFire natively supporting Firebase storage, including a new interface, your options for your data layer just got a bit more open.

· Database Zone ·
Free Resource

RavenDB vs MongoDB: Which is Better? This White Paper compares the two leading NoSQL Document Databases on 9 features to find out which is the best solution for your next project.  

What’s up guys, Eze is here. Today, I want to talk you about some great news. The AngularFire team has released a new version — 2.3.0 — and you can check it out here. This new version officially supports Firebase Storage, and believe me, this feature is amazing. I already have a post explaining how to upload images using Firebase Storage from AngularJs. In case you missed it, check it out at this link. So the idea for today's post is to refactor the actual working example I have (here is the link to the code) and make it work using Angular Fire Storage. Let's see how it works.

Creating Your Data Layer

I'm going to keep the same data layer because the concept is the same. But this time, I'll add as a reference $firebaseStorageas you can see in the code below. The other change we need to do is return an instance of this object in our service because we are going to use this object to communicate with Firebase directly.

 function storageService($http, $firebaseStorage, $q) {
    var storageRef = firebase.storage().ref();
    var storage = null;

    var service = {
       getStorage: getStorage

    return service;

    function getStorage(uid, fileName) {
          storage = $firebaseStorage(storageRef.child(uid).child(fileName));
       return storage;

So basically we are using the service to create our Firebase Storage object. This new object is going to handle all the communication with Firebase in order to upload our files.

A New Interface to Interact With

Previously, I've used the put method to upload our file. This method receives three functions as parameters to handle progress, error, and the completion or our upload. Well, all this is in the past. With this brand new version, we are going to use the method $put to upload our file and this method is going to return us an Upload Task object. We need to provide a callback function to the method $progress$error and $complete in order to handle the events as we did before.

vm.uploadTask = vm.storageRef.$put(vm.file);

vm.uploadTask.$progress(function(snapshot) {
  var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
  vm.progress = 'Upload is ' + progress + '% done';
  switch (snapshot.state) {
    case firebase.storage.TaskState.PAUSED:
      console.log('Upload is paused');
    case firebase.storage.TaskState.RUNNING:
      console.log('Upload is running');
vm.uploadTask.$complete(function(snapshot) {
  vm.newPlace.photoUrl = snapshot.downloadURL;
      $rootScope.$broadcast('successAlert', { header: 'Well done.', msg: 'Your request has been process successfully.' });
vm.uploadTask.$error(function(error) {
var msg = '';
switch (error.code) {
      case 'storage/unauthorized':
        msg = 'User does not have permission to access the object.';
      case 'storage/canceled':
        msg = 'User canceled the upload.';
      case 'storage/unknown':
        msg = ' Unknown error occurred, Please try later.';
  $rootScope.$broadcast('dangerAlert', { header: 'Oh snap!', msg: msg });

As you can see, now it's much easier upload files and handle events with this new Firebase Storage Service. I have a working example in this link if you want to see the complete implementation. In this example, I created an app that allows you to select different places around the world and upload an image that appears in Google Maps.


For a complete reference of Firebase Storage, use this link. For a complete reference of Angular Fire, use this link. For a complete reference of Firebase, use this link

If you found this post useful, please don't forget to press the like button and share it. If you are in doubt, don't hesitate to ask a question and, as always, thank you for reading.

Get comfortable using NoSQL in a free, self-directed learning course provided by RavenDB. Learn to create fully-functional real-world programs on NoSQL Databases. Register today.

firebase ,cloud storage ,data layer ,tutorial ,database

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}