Firebase 3 + Ionic 2 + cordova-plugin-camera - Upload file

Question

I am trying to upload photos to firebase storage using the cordova-plugin-camera with no success:

Here is my code:

let options:any = {
    quality : 100,
    destinationType : Camera.DestinationType.DATA_URL,
    sourceType : Camera.PictureSourceType.CAMERA,
    allowEdit : false,
    encodingType: Camera.EncodingType.JPEG,
    mediaType: Camera.MediaType.PICTURE,
    targetWidth: 1920,
    targetHeight: 1920,
    saveToPhotoAlbum: true,
    cameraDirection: Camera.Direction.FRONT
};

Camera.getPicture(this.options).then( (imageData) => {

                let blob: any = new Blob( [imageData], { type: "image/jpeg" } );
                blob.name = 'image.jpg';

                let storageRef: any = firebase.storage().ref();
                let path: string = 'images/' + this.user.uid + '/' + Math.random().toString(36).substr(2, 9) + '.jpg';

                console.log(path);

                let uploadTask: any = storageRef.child(path).put(blob);

                uploadTask.on('state_changed', function(snapshot) {
                    console.log(snapshot);
                }, function(error) {
                    this.showAlert(error);
                }, function() {
                    var downloadURL = uploadTask.snapshot.downloadURL;
                    console.log(downloadURL);

                    console.log(this.user);

                    this.user.set({photo: downloadURL});
                });

            }, (err) => {
                this.showAlert(err);
            });

I don't know why but it seems that its uploading and when I check the file is empty.

Any help, please?

Thank you.

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

The problem is with this portion

let blob: any = new Blob( [imageData], { type: "image/jpeg" } );

You will need to convert imageData to from base64 to a Blob. I suggest to use the atob function as per this link https://stackoverflow.com/a/16245768/3227392 to generate the Blob. This worked for me for the exact same use case.

One note though, DATA_URL is memory heavy so this might be problematic for larger pictures.

Firebase 3 + Ionic 2 + cordova-plugin-camera - Upload file

1 Answers1