Sending base64 image to Firebase Storage phonegap

Question

I am having problem in sending my base64 image from phonegap (ios) to firebase storage. The main problem is firebase storage only accepted BLOB or File as attachment.

Heres my code for the camera function. Cordova-plugin-camera

function GetCamera(){
navigator.camera.getPicture( cameraSuccess, cameraError, {quality :50,
    destinationType: Camera.DestinationType.DATA_URL,
    encodingType: Camera.EncodingType.JPEG,
    saveToPhotoAlbum: true});}

function to convert base 64 to blob

function b64toblob(b64_data, content_type) {
    content_type = content_type || '';
    var slice_size = 512;

    var byte_characters = atob(b64_data);
    var byte_arrays = [];

    for(var offset = 0; offset < byte_characters.length; offset += slice_size) {
        var slice = byte_characters.slice(offset, offset + slice_size);

        var byte_numbers = new Array(slice.length);
        for(var i = 0; i < slice.length; i++) {
            byte_numbers[i] = slice.charCodeAt(i);
        }

        var byte_array = new Uint8Array(byte_numbers);

        byte_arrays.push(byte_array);
    }

    var blob = new Blob(byte_arrays, {type: content_type});
    return blob;};

Camera success function. take note that imageblob is a global variable

function cameraSuccess(imageData){
document.getElementById('Attachment1').innerHTML = "Attachment: True";
var image = imageData;
imageblob = b64toblob(image,"image/jpeg");}

putting the blob to firebase storage

try{
var storageRef = storage.ref().child('fire');
var uploadTask = storageRef.put(imageblob);
uploadTask.on('state_changed',null, null, function(){
var downloadURL = uploadTask.snapshot.downloadURL;
console.log("downloadURL :"+downloadURL);
});

i have tried every single thing, but its not working. Really need your guys help.. i am out of ideas

Answer 1

Cordova camera plugin doesn't return file object. That is problem with plugin. But it returns all details about image. By using that you can create a blob or file object.

Reference for creating blob from file url.

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')); // Second argument is name of the image
   });
};

Calling function for get file blob

getFileObject('img/test.jpg', function (fileObject) { // First argument is path of the file
   console.log(fileObject);
}); 

In your camera success function try this.

function cameraSuccess(imageData){
  document.getElementById('Attachment1').innerHTML = "Attachment: True";
  getFileObject(imageData.nativeURL, function(fileObject) {
            console.log(fileObject);
            var imgName = fileObject.name;
            var metadata = { contentType: fileObject.type };
            var uploadFile = storageRef.child("images/" + imgName).put(fileObject, metadata);

            uploadFile.on(firebase.storage.TaskEvent.STATE_CHANGED, function(snapshot) {
                var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
                console.log(progress);
            }, function(error) {
                console.log(error);
            }, function() {
                var imgFirebaseURL = uploadFile.snapshot.downloadURL;
                console.log(imgFirebaseURL);
            });
        });
     }