How to Implement Firebase Storage Using AngularJS
As of late, we got a magnificent post about Firebase and how to utilize the continuous database with AngularJS. On the off chance that you missed it here you go the connection. Today, I need to discuss another helpful element of Firebase: an astounding apparatus that permits us to store and serve client created content, for example, photographs or recordings. As they clarified on their site:
Adding Firebase to Your Web App
If you read my previous post, you already know how to add Firebase reference to your website. If you didn't it 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 a data layer. This service will be responsible to create our links to the Firebase store. As you can see below, it 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 that 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 ID as a root folder so I'll group all files per user and then anotherchild with the file name. At this point, it's important to highlight that I'm using the functionchild 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 a 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.
As should be obvious, it's extremely simple to get this stockpiling fully operational. I have a working model at this connection in the event that you need to see the total execution. Right now, made an application that permits you to choose better places the world over and transfer a picture that shows up in a google map.
For a total reference of Firebase stockpiling, utilize this connection. For a total reference of Angular Fire, utilize this connection. For a total reference of Firebase, utilize this connection.
On the off chance that you discovered this post helpful, kindly remember to press the like catch and offer it. In the event that you are in question, don't stop for a second to pose an inquiry. As usual, thank you for perusing.
