0

I've red some topics on the subject (e.g: Uploading image to Firebase Storage from Cordova app) but didn't find my answer...

I'm working on a IONIC project with the implementation of the ngCordova camera plugin to take picture and get pic from the librairy.

So I got the result as a image URI and I want to upload it in Firebase storage (as file or Blob). Here is my code :

$scope.fromCamera = function() {
 $ionicPlatform.ready(function() {

  var options = {
    quality: 75, 
    destinationType: Camera.DestinationType.FILE_URI,
    sourceType: Camera.PictureSourceType.CAMERA,
    allowEdit: true,
    encodingType: Camera.EncodingType.JPEG, 
    targetWidth: 300, 
    targetHeight: 300, 
    saveToPhotoAlbum: true e
  };

  $cordovaCamera.getPicture(options).then(function(imageURI) { 
    window.resolveLocalFileSystemURL(imageURI, function (fileEntry) {
      fileEntry.file(function (file) {
        var reader = new FileReader();
        reader.onloadend = function () {
          // This blob object can be saved to firebase
          var blob = new Blob([new Uint8Array(this.result)], { type: "image/jpeg" });                  

          // Create the storage ref
          var ref = storageRef.child('images/test');
          // Upload the file
          uploadPhoto(blob, ref);

        };
        reader.readAsArrayBuffer(file);
      });
    }, function (error) {
      console.log(error)
    });
  });

});

};

I read the file and convert it into a Blob before uploading it into firebase. And I got an 'Encoding error' telling me "A URI supplied to the API was malformed, or the resulting Data URL has exceeded the URL length limitations for Data URLs."

I'm running it an chrome browser with the Cordova Mocks extension.

Any help is welcome! Thanks

Community
  • 1
  • 1

2 Answers2

0

uploadPhoto() is my function to upload the file on firebase storage (and save the URL in firebase database)

var storageRef = Firebase.storageRef();
var databaseRef = Firebase.databaseRef();

var uploadPhoto = function(file, ref) {
  var task = ref.put(file);
  // Update progress bar
  task.on('state_changed', function(snapshot){ 
    // nothing
  }, function(error) {
    // Handle unsuccessful uploads
  }, function() {
    // Handle successful uploads on complete
    $scope.downloadURL = task.snapshot.downloadURL;
    $scope.actualKey = databaseRef.child('posts').push().key;

    databaseRef.child('posts/' + $scope.actualKey).update({
      url : $scope.downloadURL, 
      id : $scope.actualKey,
      time : firebase.database.ServerValue.TIMESTAMP,
    });
  }
);

}

0

try changing...

[new Uint8Array(this.result)]

to just this

[this.result]

alternate approach using $cordovaFile

var fileName = imageURI.replace(/^.*[\\\/]/, '');

$cordovaFile.readAsArrayBuffer(cordova.file.tempDirectory, fileName)
  .then(function (success) {
    // success - get blob data
    var imageBlob = new Blob([success], { type: "image/jpeg" });

      // Create the storage ref
      var ref = storageRef.child('images/test');
      // Upload the file
      uploadPhoto(imageBlob, ref);

  }, function (error) {
    // error
  });

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

Aaron Saunders
  • 33,180
  • 5
  • 60
  • 80
  • Thank's for your help, I'll try that. And the video is perfect! –  Aug 03 '16 at 09:26
  • With your help it works! Thank you (I upvote your answer but as I don't have enough "points" I don't know if it works). –  Aug 04 '16 at 09:40
  • Hi @Aaron, is it possible to use same code for new cordova ? for example when I want to upload image from here: navigator.camera.getPicture(function cameraSuccess(imageData) {saveToFirebase(imageData,'denemee.png');} Is this code also work with it ? – Ozan Nov 30 '16 at 13:18