What’s up guys, Eze is here. Yesterday we got an awesome post about Firebase and how to use the Real-Time database with AngularJs in case you missed it here you go the link. Today I want to talk about another useful feature of Firebase: Storage an amazing tool that allows us to store and serve user-generated content, such as photos or videos. As they explained in their website:
Firebase Storage adds Google security to file uploads and downloads for your Firebase apps, regardless of network quality. You can use it to store images, audio, video, or other user-generated content.
Adding Firebase to your web app
Well if you read my previous post you already knows how to add Firebase reference to your website. If you didn’t yet go and read it first here.
Creating your data layer
As I did for the Real-Time database I’m going to create a data layer. To do that I’m going to create an AngularJs service to use as data layer. This service will be responsible to create our links to the Firebase store. As you can see below is quite similar to the one we use to connect to our Real-Time database.
function storageService($http, $firebaseArray, $firebaseObject, $q) {
var root = firebase.database().ref();
var storageRef = firebase.storage().ref();
Now we have the reference so we can add a function to our service in order to upload the image.
function upload(file, uid, fileName) {
var deferred = $q.defer();
var fileRef = storageRef.child(uid).child(fileName);
var uploadTask = fileRef.put(file);
uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED,
function(snapshot) {
var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
console.log('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;
}
},
function(error) {
switch (error.code) {
case 'storage/unauthorized':
deferred.reject('User does not have permission to access the object.');
break;
case 'storage/canceled':
deferred.reject('User canceled the upload.');
break;
case 'storage/unknown':
deferred.reject(' Unknown error occurred, Please try later.');
break;
}
}, function() {
deferred.resolve(uploadTask.snapshot.downloadURL);
});
return deferred.promise;
}
Again we use the function child to create the path, in my case I’m using the user uid as a root folder so I’ll group all files per user and then another child with the file name. At this point it’s important to highlight that I’m using the function child twice but we can do it in this way child(‘folder_name/file_name’) and will create the same structure.
Uploading the file
Once we get the reference we need to use the put function to upload the file. This file object can be a blob, a file or byte array and it returns a promise that allows us to trace the progress, catch errors and handle the success response which provides us a downloadURL property to get the public url of our document. Our storage structure looks like this:
As you can see it’s really easy to get this storage up an running. 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.
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.
kieldev 