Store image to Firebase storage from cordova camera plugins on Ionic

问题

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

回答1:

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

}

回答2:

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

来源：https://stackoverflow.com/questions/38644218/store-image-to-firebase-storage-from-cordova-camera-plugins-on-ionic

标签

ionic-framework

firebase

cordova-plugins

ngcordova

firebase-storage