Firebase Storage is officially in AngularFire 2.3.0 – The easiest way to upload binary content

What’s up guys, Eze is here and today I want to talk you about some great news. The AngularFire team have released a new version which is 2.3.0 and you can check it here.  This new version officially supports Firebase Storage and believe me this feature it’s amazing. I already have a post explaining how to upload images using Firebase Storage from AngularJs in case you missed it  here you go the 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 it’s the same but this time I’ll add as a reference $firebaseStorage as you can see in the code below. The other change we need to do it’s 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) {
       if(!storage){
          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.

New unterface 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 part of the past. With this brand new version we are going to use  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');
					break;
				case firebase.storage.TaskState.RUNNING:
					console.log('Upload is running');
					break;
			}
	}); 
	vm.uploadTask.$complete(function(snapshot) {
		vm.newPlace.photoUrl = snapshot.downloadURL;
		vm.places.$add(vm.newPlace);
		$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.';
			break;
			case 'storage/canceled':
			msg = 'User canceled the upload.';
			break;
			case 'storage/unknown':
			msg = ' Unknown error occurred, Please try later.';
			break;
		}
		$rootScope.$broadcast('dangerAlert', { header: 'Oh snap!', msg: msg });
	});

As you can see now it’s much easier upload files and handle event 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 a google maps.

firebase_storage

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.

Advertisements

3 thoughts on “Firebase Storage is officially in AngularFire 2.3.0 – The easiest way to upload binary content

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s