Upload a photo to Firebase Storage with Image URI

Question

I am currently attempting to upload a photo to my Firebase app's storage in my Apache Cordova app. I currently get the photo's URI with the following code:

function getPhotoFromAlbum() {

    navigator.camera.getPicture(onPhotoURISuccess, onFail, {
        quality: 50,
        sourceType: navigator.camera.PictureSourceType.SAVEDPHOTOALBUM,
        destinationType: navigator.camera.DestinationType.FILE_URI
    });
}

function onPhotoURISuccess(imageURI) {
    var image = document.getElementById('image');
    image.style.display = 'block';
    image.src = imageURI;

    getFileEntry(imageURI);

}

And then am attempting to convert the image into a file and push it to my Firebase storage with the following function:

function getFileEntry(imgUri) {
    window.resolveLocalFileSystemURL(imgUri, function success(fileEntry) {

        console.log("got file: " + fileEntry.fullPath);
        var filename = "test.jpg";
        var storageRef = firebase.storage().ref('/images/' + filename);
        var uploadTask = storageRef.put(fileEntry);

    }, function () {
        // If don't get the FileEntry (which may happen when testing
        // on some emulators), copy to a new FileEntry.
        createNewFileEntry(imgUri);
    });
}

I have both the file and the camera cordova plugins installed, the only errors I get when I attempt to do this is

Error in Success callbackId: File1733312835 : [object Object]

Which is just an error message from cordova.js

I also know I have my Firebase storage set up correctly because I have tested it through an emulator by adding a file input and successfully uploading whatever file the user added, to the Firebase storage.

Is it possible to upload a file to Firebase storage using this method of converting an image to a file through its URI, and then uploading it? If so, what is the correct way to do so / what is wrong with the way i'm doing it?

Answer 1

I was able to accomplish uploading an image by using a data url. Below is my code:

var filename = "test.jpg";
var storageRef = firebase.storage().ref('/images/' + filename);

var message = 'data:image/jpg;base64,' + imageUri;
storageRef.putString(message, 'data_url').then(function (snapshot) {
  console.log('Uploaded a data_url string!');
});

Answer 2

Is it possible to upload a file to Firebase storage using this method of converting an image to a file through its URI, and then uploading it? If so, what is the correct way to do so / what is wrong with the way i'm doing it?

Yes it is possible to upload a file on firebase through its URI. However you have to follow the correct way.

1. You have to store the data in firebase after file reading operation is completed.you can use FileReader.onloadend for this.

2. By using a data_url you can store to firebase .

Here is the snippet for more clarity:

function getFileEntry(imgUri) {
    window.resolveLocalFileSystemURL(imgUri, function onSuccess(fileEntry) {
            fileEntry.file(function(file) { 
                var reader = new FileReader();
                reader.onloadend = function() {
                    filename = "test.jpg";
                var storageRef = firebase.storage().ref('/images/' + filename);
             var data = 'data:image/jpg;base64,' + imgUri;
                storageRef.putString(data, 'data_url').then(function (snapshot) {
                    console.log('Image is uploaded by base64 format...');
                });
                };
                reader.readAsArrayBuffer(file);
            });
        },
        function onError(err) {
             console.log(err);
             createNewFileEntry(imgUri);
        });
}