Upload Camera Images To Firebase Storage Using Ionic

tutorials
1

I have created a set of videos showing how to upload images to Firebase3 Storage using the Camera plugin and also using the Image Picker Plugin.

These examples save the images in firebase storage and not converting it to a base64 string

These examples show how it works with Ionic version 1 and ionic version 2

Version 1 Source Code and Video

https://youtu.be/Z1F-0PnLgb8
https://youtu.be/2bDBwmyifGI

Version 2 using Angular2 Source Code and Video

1 Like
2

Hey, just wanted to comment and say thanks for this - totally unstuck me from a huge problem.

1 Like
3

glad i could help out

4

Updated to latest Ionic Release

5

Aaron, I am getting a TypeError from the $cordovaFile.readAsArrayBuffer code. Can you help me figure out the issue please?

$scope.addBusinessImage = function () {
var options = {
maximumImagesCount: 1, // only pick one image
width: 800,
height: 800,
quality: 80
};

  var fileName, path;

  $cordovaImagePicker.getPictures(options)
    .then(function (results) {
      console.log('Image URI: ' + results[0]);

      // lets read the image into an array buffer..
      // see documentation:
      // http://ngcordova.com/docs/plugins/file/
      fileName = results[0].replace(/^.*[\\\/]/, '');

      // modify the image path when on Android
      if ($ionicPlatform.is("android")) {
        path = cordova.file.cacheDirectory
      } else {
        path = cordova.file.tempDirectory
      }
	  
	
$cordovaFile.readAsArrayBuffer(path, fileName).then(function (success) {		
    // success
	
	var imageBlob = new Blob([success], { type: "image/jpeg" });
	  
	   var storageRef = firebase.storage().ref();

     // pass in the _filename, and save the _imageBlob
     storageRef.child('images/' + fileName).put(imageBlob).then(function(snapshot) {
		$ionicPopup.alert({
			title: 'Success Result',
			template:  snapshot
		});
	 });

  }, function (error) {
    // error
	$ionicPopup.alert({
		title: 'Error Result',
		template:  error + " - " + error.message
	});
 });
	  
  });

	  };
6

sorry, been out of pocket at sxsw, did you get this resolved?

7

Aaron,

No problem. It turns out my issue was just the platform. I was testing on ionic view and didn’t realize that the plugin was not supported.

Thanks for your help.

Best regards,
Ehjayson Henry
Phone: 404-713-8881

8

Hello Aron,

i have tried everything i can but still not able to get the code working for uploading images to firebase storage from my ionic 1 app , got this error FileError {code: 1, message: “NOT_FOUND_ERR”}
, here is the code exactly from your github repo :slight_smile:`$scope.getPhoto=function () {

  var fileName, path;
  //loadData();
  var options = {
     quality: 80,
    destinationType: Camera.DestinationType.FILE_URI,
    sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
    allowEdit: true,
    encodingType: Camera.EncodingType.JPEG,
    popoverOptions: CameraPopoverOptions,
    saveToPhotoAlbum: false,
    correctOrientation: true,
    targetWidth :90,
    targetHeight :90
  };

  $cordovaCamera.getPicture(options)
    .then(function (results) {
      console.log('Image URI: ' + results[0]);
      // lets read the image into an array buffer..
      // see documentation:
      // http://ngcordova.com/docs/plugins/file/
      fileName = results[0].replace(/^.*[\\\/]/, '');

      // modify the image path when on Android
      if ($ionicPlatform.is("android")) {
       path = cordova.file.cacheDirectory
      } else {
        path = cordova.file.tempDirectory
      }
      alert(fileName)
      alert(path)
      return $cordovaFile.readAsArrayBuffer(path, fileName);
      
    }).then(function (success) {
      // success - get blob data
      var imageBlob = new Blob([success], { type: "image/jpeg" });
      // missed some params... NOW it is a promise!!
      alert ("before saveToFirebase method")
      return saveToFirebase(imageBlob, fileName);
      alert ("saveToFirebase method")

    }).then(function (_responseSnapshot) {
      // we have the information on the image we saved, now 
      // let's save it in the realtime database
      alert("beforesaveref")
      return saveReferenceInDatabase(_responseSnapshot)
      alert("saveref")
    }).then(function (_response) {
      alert("Saved Successfully!!")
    }, function (error) {
      // error
      alert(JSON.stringify(error))
      console.log(error)
    });
}

, can you please help me out with this issue.`

9

Experts,

Can some please suggest the method to use in case i want to upload multiple photos from photo gallery in one go?

Cheers
Ankit

1 Like
10

can you tell me if i have to upload image along with some data and retrieve image with data

11

Are you using firebase.storage? Firebase database only allows for references to URL paths I believe

12