12

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?

Frank van Puffelen
  • 565,676
  • 79
  • 828
  • 807
Roger99
  • 981
  • 2
  • 11
  • 42

2 Answers2

3

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!');
});
Ken
  • 1,155
  • 2
  • 19
  • 36
Roger99
  • 981
  • 2
  • 11
  • 42
0

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);
        });
}
NullPointer
  • 7,094
  • 5
  • 27
  • 41
  • thanks for the answer, but unfortunately when I try your code I get the following error in my console: DOMException: A URI supplied to the API was malformed, or the resulting Data URL has exceeded the URL length limitations for Data URLs. Do you have any idea how to fix that? – Roger99 Jul 23 '18 at 18:47
  • this is a sample of what is being passed into the 'imgUri' parameter if that helps: blob:http://localhost:4400/398f59cd-1d97-4f70-95fb-12ca15bee524 – Roger99 Jul 23 '18 at 19:03
  • so **** this is **this.result** right?also are you running on device or on browser? – NullPointer Jul 24 '18 at 00:14
  • Also please tell me output of **console.log("got file: " + fileEntry.fullPath);** – NullPointer Jul 24 '18 at 02:09
  • blob:localhost:4400/398f59cd-1d97-4f70-95fb-12ca15bee524 is what is outputted when I call console.log(imgUri) right before the window.resolveLocalFileSystemURL call. I am getting the error message when I try to pass that imgUri parameter in so I am unable to put any logs into that method because it fails when the parameter is passed in at the beginning of the method – Roger99 Jul 24 '18 at 19:35
  • And I have tried them both, the debug errors are from the browser – Roger99 Jul 24 '18 at 19:40
  • May be this will be helpfull in youcase:https://stackoverflow.com/a/34307271/1081909 – NullPointer Jul 25 '18 at 03:50
  • I've checked that out before, I get the "DOMException: It was determined that certain files are unsafe for access within a Web application, or that too many calls are being made on file resources." Error after I try to add "filesystem:" or "persistent/1111.jpg" (replacing jpg with csv) – Roger99 Jul 25 '18 at 17:08
  • So instead of imgUri I use "filesystem:" + imgUri + "persistent/1111.jpg" – Roger99 Jul 25 '18 at 17:09