I recently wrote a useful tutorial on the topic of saving images taken with the device camera to Firebase. It demonstrates how to use the Apache Cordova camera plugin in combination with ngCordova for taking pictures on the device. It also demonstrates how to present images bound to Firebase in a sleek grid like format similar to Imgur.
If you’re not familiar with Firebase, it is a NoSQL hosted solution that makes it incredibly easy for synchronizing data between devices and platforms.
nice article, but a little suggestion:
I do not know what code-format-addon you use for your cms, but on my screen resolution the code-type overlays parts of the code like:
Just a word of warning when storing images in Firebase though, that you can easily hit your free storage limit on the Developer account level. We now resort to storing smaller low res avatar images in Firebase, but larger images on an external server.
Hi Nic, I followed your tutorial and I want to go a little further. I’m trying to build a gallery with all user’s images. The thing is that I’m not being able to retrieve the string correctly (string has some extra characters from the nodes):
Hi Nick.
Thanks for a cool demo.
Butt what I dont understand is this:
“If signed in, pull down the array of images from the server”
Does that mean you downloads all photos from Firebase?
I am looking for a solution to only upload photos. and download one based on a unique id (ist gps data)
Hello @aaronksaunders I am trying this out with ionic v1 but to no avail. Please I will greatly appreciate any help on how to go about this with ionic v1. I am using the Cordova image picker plugin to select the images.
I am getting this error
Wrong type for parameter “uri” of resolveLocalFileSystemURI: Expected String, but got Null
i don’t really know what the error is about. Any idea on that?
function saveToFirebase(imageBlob,fileName, _callback){
var storageRef = firebase.storage().ref();
var uploadTask = storageRef.child(“images/”+ fileName).put(imageBlob);
uploadTask.on('state_changed', function(snapshot){
// Observe state change events such as progress, pause, and resume
// See below for more detail
}, function(error) {
// Handle unsuccessful uploads
alert(error.message);
_callback(null);
}, function() {
// Handle successful uploads on complete
// For instance, get the download URL: https://firebasestorage.googleapis.com/...
var downloadURL = uploadTask.snapshot.downloadURL;
_callback(uploadTask.snapshot)
});
}
$rootScope.selImages = function() {
var options = {
maximumImagesCount: 5,
width: 800,
height:800,
quality: 80
};
$rootScope.images = [];
window.imagePicker.getPictures(function (results) {
console.log('Image URI: ' + results[0]);
var fileName = results[0].replace(/^.*[\\\/]/, '');
console.log(fileName);
$cordovaFile.readAsArrayBuffer(cordova.file.tempDirectory, fileName).
then(function(success){
var imageBlob = new Blob([success], {type: "image/jpeg"});
$rootScope.images.push(imageBlob);
$rootScope.images.push(imageBlob);
saveToFirebase(imageBlob, fileName, function(response){
if(response){
alert(response.downloadURL);
}
});
}, function(error){
//error
alert(error.message);
});
console.log($rootScope.images);
}, function (error) {
// error getting photos
});
};
