web-dev-qa-db-fra.com

Télécharger une photo dans Firebase Storage avec Image URI

J'essaie actuellement de télécharger une photo sur le stockage de mon application Firebase dans mon application Apache Cordova. Je reçois actuellement l'URI de la photo avec le code suivant: 

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

}

Et puis, je tente de convertir l’image en fichier et de l’envoyer dans mon stockage Firebase avec la fonction suivante:

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

Le fichier et les plug-ins cordova de la caméra sont installés. La seule erreur que je puisse obtenir lorsque je tente de le faire est

Error in Success callbackId: File1733312835 : [object Object]

Ce qui est juste un message d'erreur de cordova.js

Je sais également que mon stockage Firebase est correctement configuré car je l'ai testé via un émulateur en ajoutant un fichier d'entrée et en téléchargeant correctement le fichier ajouté par l'utilisateur au stockage Firebase.

Est-il possible de télécharger un fichier sur un stockage Firebase en utilisant cette méthode de conversion d'une image en fichier via son URI, puis de la télécharger? Si oui, quelle est la bonne façon de le faire/qu'est-ce qui ne va pas dans la façon dont je le fais?

javascriptcordovafirebasephonegap-pluginsfirebase-storage
9
Roger99

J'ai pu télécharger une image à l'aide d'une URL de données. Ci-dessous mon 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!');
                    });
1
Roger99

Est-il possible de télécharger un fichier sur un stockage Firebase en utilisant cette méthode de conversion d'une image en fichier via son URI, puis de la télécharger? Si oui, quelle est la bonne façon de le faire/qu'est-ce qui ne va pas dans la façon dont je le fais?

Oui, il est possible de télécharger un fichier sur firebase via son URI. Cependant, vous devez suivre le bon chemin.

1. Vous devez stocker les données dans firebase après la fin de l'opération fichier reading. Vous pouvez utiliser FileReader.onloadend pour cela.

2. En utilisant un data_url, vous pouvez enregistrer dans firebase.

Voici l'extrait pour plus de clarté:

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);
        });
}
0
NullPointer