Uploading image to Firebase Storage from Cordova app

Question

I am trying to upload an image from my Cordova app to the new Firebase Storage. This is what I have attempted so far.

// Get the image from PhotoLibrary
navigator.camera.getPicture(onSuccess, onFail, { 
  quality: quality,
  sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
  destinationType: Camera.DestinationType.FILE_URI,
  targetWidth: imageSize,
  targetHeight: imageSize
});

function onSuccess(imageData) {
  
  var storageRef = firebase.storage().ref();
  
  window.resolveLocalFileSystemURL(imageData,
 function(fileEntry) {
   fileEntry.file(function(file) {
          var uploadTask = storageRef.child('images/test.jpg').put(file);
          uploadTask.on('state_changed', function(snapshot){
     console.log(snapshot);
          });
 }                     
   )
};

This results in the following error

FirebaseError: Firebase Storage: Invalid argument in `put` at index 0: Expected Blob or File.

One other thing I have tried is getting the image as base64 and converting to a Blob, but same result.

Does anyone one know how to get the image in the Javascript File or Blob formats that Firebase Storage requires? Thanks!

Check out solution no.8 in here http://stackoverflow.com/questions/5933565/how-to-create-initialize-the-file-object-using-file-path-html5 Works for me. :) — Sam, May 30 '16 at 21:49
I have designed this plugin for cordova android for the same purpose https://www.npmjs.com/package/cordova-plugin-firebase-files-upload — Phaneendra Charyulu Kanduri, Nov 12 '19 at 05:40

score 6 · Answer 1 · answered Jun 08 '16 at 08:40

Didn't like to use XMLHhttpRequest for a local file so after playing with Cordova File Plugin I finally got it working. Hope it helps someone!

function MainController($scope, $cordovaCamera, $cordovaFile) {
$scope.capturarFoto = function (type) {
    var opcionesCaptura = {
        destinationType: Camera.DestinationType.FILE_URI,
        sourceType: Camera.PictureSourceType[type.toUpperCase()],
    };

    $cordovaCamera.getPicture(opcionesCaptura)
        .then(procesarImagen, procesarError);
};

function procesarImagen(pathImagen) {
    var directorioFuente = pathImagen.substring(0, pathImagen.lastIndexOf('/') + 1),
        archivoFuente = pathImagen.substring(pathImagen.lastIndexOf('/') + 1, pathImagen.length),
        nombreParaGuardar = new Date().valueOf() + archivoFuente;

    $cordovaFile.readAsArrayBuffer(directorioFuente, archivoFuente)
        .then(function (success) {
            var blob = new Blob([success], {type: 'image/jpeg'});
            enviarFirebase(blob, nombreParaGuardar);
        }, function (error) {
            console.error(error);
        });
}


function enviarFirebase(file, nombre) {
    var storageRef = firebase.storage().ref();
    var uploadTask = storageRef.child('images/' + nombre).put(file);
    uploadTask.on('state_changed', function (snapshot) {
        console.info(snapshot);
    }, function (error) {
        console.error(error);
    }, function () {
        var downloadURL = uploadTask.snapshot.downloadURL;
        console.log(downloadURL);
    });
}

function procesarError(error) {
    console.error(JSON.stringify(error));
}

}

score 6 · Answer 2 · answered Jul 19 '16 at 12:00

As @juanwmedia stated in his answer, I don't like to use XMLHhttpRequest for a local file, so here it is his answer without the use of ngCordova, just plain cordova-plugin-file:

navigator.camera.getPicture(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" });                  
                          sendToFirebase(blob);
                 };
                 reader.readAsArrayBuffer(file);
              });
          }, function (error) {
              errorCallback(error);
          });
       }, errorCallback, options);

This is not working, returning some sort of timeout error – Phaneendra Charyulu Kanduri Mar 19 '19 at 11:30 — Phaneendra Charyulu Kanduri, Mar 19 '19 at 11:30

score 3 · Accepted Answer · answered Jun 01 '16 at 05:14

The link from Sam above led me in the right direction. Here is a working solution.

navigator.camera.getPicture(onSuccess, onFail, {
    quality: quality,
    sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
    destinationType: Camera.DestinationType.FILE_URI,
    targetWidth: imageSize,
    targetHeight: imageSize
});

function onSuccess(imageData) {

    var storageRef = firebase.storage().ref();

    var getFileBlob = function(url, cb) {
        var xhr = new XMLHttpRequest();
        xhr.open("GET", url);
        xhr.responseType = "blob";
        xhr.addEventListener('load', function() {
            cb(xhr.response);
        });
        xhr.send();
    };

    var blobToFile = function(blob, name) {
        blob.lastModifiedDate = new Date();
        blob.name = name;
        return blob;
    };

    var getFileObject = function(filePathOrUrl, cb) {
        getFileBlob(filePathOrUrl, function(blob) {
            cb(blobToFile(blob, 'test.jpg'));
        });
    };

    getFileObject(imageData, function(fileObject) {
        var uploadTask = storageRef.child('images/test.jpg').put(fileObject);

        uploadTask.on('state_changed', function(snapshot) {
            console.log(snapshot);
        }, function(error) {
            console.log(error);
        }, function() {
            var downloadURL = uploadTask.snapshot.downloadURL;
            console.log(downloadURL);
            // handle image here
        });
    });

}

Hey I am trying this solution but i get a firebase is not defined! Where do i define firebase? please help me with my question here! https://stackoverflow.com/questions/47504945/how-do-i-add-my-file-uri-image-from-cordova-camera-plugin-to-firebase-storage-an — Uraforclain, Nov 27 '17 at 06:51

score 1 · Answer 4 · edited May 23 '17 at 12:17

1

I had the same issue. Solution no. 8 in here

how to create/initialize the file object using file path html5

works like magic.

edited May 23 '17 at 12:17

Community

1
1

answered Jun 01 '16 at 04:19

Sam Wong

9
1

score 0 · Answer 5 · answered May 27 '16 at 02:19

0

if your file upload field is set to multiple=true then you will get array of objects so you have to choose which one you need to upload. this may help you

var uploadTask = storageRef.child('images/' + file[0].name).put(file[0]);

answered May 27 '16 at 02:19

Aathi

2,599
2
19
16

Thanks for the reply. The file is an object, not an array objects. – Angus Bremner May 28 '16 at 10:55

score 0 · Answer 6 · answered Jun 14 '16 at 18:07

0

Angus Bremner,

I tried to implement your solution and failed. I do not get error and "onSucess" I manage to regain function "imageData" that is : "content: // media / external / images / media / 3384". Any suggestions?

answered Jun 14 '16 at 18:07

Tercio Santos

51
5

score 0 · Answer 7 · edited Jul 27 '16 at 08:23

To upload multiple images using ionic and firebase:

$scope.upload = function(sourceType) {

 var options = {
        quality : 75,
        destinationType : Camera.DestinationType.FILE_URI,
        sourceType : sourceType,
        encodingType: Camera.EncodingType.JPEG,
        popoverOptions: CameraPopoverOptions,
        targetWidth: 500,
        targetHeight: 500,
        saveToPhotoAlbum: false
    };
    $cordovaCamera.getPicture(options).then(function(imageData) {

 // $scope.images = imageData;

 var storageRef = firebase.storage().ref();
 // filename = imageData.name;

var getFileBlob = function(url, cb) {
    var xhr = new XMLHttpRequest();
    xhr.open("GET", url);
    xhr.responseType = "blob";
    xhr.addEventListener('load', function() {
        cb(xhr.response);
    });
    xhr.send();
};

var blobToFile = function(blob, name) {
    blob.lastModifiedDate = new Date();
    blob.name = name;
    return blob;
};

var getFileObject = function(filePathOrUrl, cb) {
    getFileBlob(filePathOrUrl, function(blob) {
        cb(blobToFile(blob, new Date().getTime()));
    });
};

getFileObject(imageData, function(fileObject) {

    var metadata = {
    'contentType': fileObject.type
  };
    storageRef.child('images/' + fileObject.name).put(fileObject, metadata);

    uploadTask.on('state_changed', null, function(error) {
    // [START onfailure]
    console.error('Upload failed:', error);
    alert('Upload failed:', error);
    // [END onfailure]
  }, function() {
    console.log('Uploaded',uploadTask.snapshot.totalBytes,'bytes.');
    console.log(uploadTask.snapshot.metadata);
    var url = uploadTask.snapshot.metadata.downloadURLs[0];
    console.log('File available at', url);
    // [START_EXCLUDE]
    document.getElementById('linkbox').innerHTML = '<img src="' +  url + '">';
    // [END_EXCLUDE]
  });

});
    }, function(error) {
        console.error(error);
        alert(error);
    });


};

Uploading image to Firebase Storage from Cordova app

7 Answers7

Linked