Upload Camera Images To Firebase Using Ionic Framework

tutorials
1

Hi,

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.

Criticism welcome!

Regards,

6 Likes
2

hey there,

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:

imageApp.controller("FirebaseController", function($scope, $state, $firebaseAuth) {

the work “javascript” is laying over “eAuth) {”

Maybe it is enough to add an empty line as first line in your code blocks.

Keep on codin’

:wink:

3

Thanks Nic for continuing writing quality tutorials!

4

Thanks for your feedback. Just to clarify, are you referring to the video or the write-up?

If it is a problem with the write-up, I will let the company, AirPair, know that their site might have a bug.

Regards,

5

Thanks for the compliment!

6

image
screen.png694×142 15.9 KB

Like i said… not really a problem… only a suggestion

7

Thanks! I opened an issue ticket with them. Sorry about that.

8

Nothing to sorry about :wink:

9

Another great post @nicraboy. Keep them coming.

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.

1 Like
10

Thanks for pointing that out @CyberFerret.

11

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):

{"-K571V8PHJJdmdqGTp7q":{“image”:"/9j/4AAQSkZJRgABAQ…9M166jAgEdD0oopsVydDU6NiiipuNE6MM808tlkHbOaKKYFtHHrUytRRR1GSb6KKKoR/9k="}} net::ERR_INVALID_URL

I think it sholud be:

-K571V8PHJJdmdqGTp7q/9j/4AAQSkZJRgABAQ…9M166jAgEdD0oopsVydDU6NiiipuNE6MM808tlkHbOaKKYFtHHrUytRRR1GSb6KKKoR/9k=

Any idea on how to make it work?

Thanx!

12

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)

13

at this point you should use the new firebase API for storing binary files.

I have a sample here: https://github.com/aaronksaunders/golftalk-sample#save-image

2 Likes
14

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.

15

https://www.youtube.com/watch?v=Z1F-0PnLgb8 - Ionic 1 - Image Picker -Firebase Storage

16

Thanks very helpful, I will try this out

17

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?

18

would have to see some code… @Banki

19

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
    });



};
20

i fixed this issue… please take a look at the repo - https://github.com/aaronksaunders/firebaseStorageApp

Instead of getting the path from the URI, in the code, I assume the following…

  // modify the image path when on Android
  if ($ionicPlatform.is("android")) {
    path = cordova.file.cacheDirectory
  } else {
    path = cordova.file.tempDirectory
  }

feel free to parse the path to get the directory

1 Like