Ionic 2 Firebase Image Upload From Gallery

Question

Please see below code for capturing image from Ionic/Cordova Camera Plugin.

There are two functions, one for capturing form camera and one for uploading image from gallery.

capture() {
const cameraOptions: CameraOptions = {
  quality: 50,
  destinationType: this.camera.DestinationType.DATA_URL,
  encodingType: this.camera.EncodingType.JPEG,
  mediaType: this.camera.MediaType.PICTURE,
};

this.camera.getPicture(cameraOptions).then((imageData) => {
  // imageData is either a base64 encoded string or a file URI
  // If it's base64:
  this.captureDataUrl = 'data:image/jpeg;base64,' + imageData;
}, (err) => {
  // Handle error
});
}

private openGallery (): void {
let cameraOptions = {
sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
destinationType: this.camera.DestinationType.FILE_URI,      
quality: 100,
targetWidth: 1000,
targetHeight: 1000,
encodingType: this.camera.EncodingType.JPEG,      
correctOrientation: true
}

this.camera.getPicture(cameraOptions).then((file_uri) => {

this.captureDataUrl = 'data:image/jpeg;base64,' + file_uri;
},
err => console.log(err));   
}

Currently I am able to upload an image from Camera to my Firebase Database.

However when trying to upload an image from gallery i get the following error in Xcode

[Generic] Creating an image format with an unknown type is an error 2017-07-20 16:14:24.528250+0930 CommunitiLink[3846:1372899] WARNING: sanitizing unsafe URL value data:image/jpeg;base64,file:///var/mobile/Containers/Data/Application/A6029474-FAE7-4FA7-9DF6-F6376D142D58/tmp/cdv_photo_002.jpg

Hope someone can help!

Chinthaka Suren Fernando Chinthaka Suren Fernando · Accepted Answer · 2018-01-29T17:50:33

I have found a way to upload image gallery from Ionic 2 to firebase.
Here's the solution

capture() {
        const cameraOptions: CameraOptions = {
            sourceType: this.camera.PictureSourceType.CAMERA,
            quality: 50,
            destinationType: this.camera.DestinationType.DATA_URL,
            encodingType: this.camera.EncodingType.JPEG,
            mediaType: this.camera.MediaType.PICTURE,
        };

        this.camera.getPicture(cameraOptions).then((imageData) => {            
            this.captureDataUrl = imageData;
        }, (err) => {
            // Handle error
        });
    }

    private openGallery(): void {
        let cameraOptions = {
            sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
            destinationType: this.camera.DestinationType.DATA_URL, // Change FILE_URI to DATA_URL
            quality: 100,
            targetWidth: 1000,
            targetHeight: 1000,
            encodingType: this.camera.EncodingType.JPEG,
            correctOrientation: true
        }

        this.camera.getPicture(cameraOptions).then((file_uri) => {
            /* Remove 'data:image/jpeg;base64,' 
               FYI : You can use another variable to bind src attribute in <img> tag
               you have to prepend 'data:image/jpeg;base64,' to that variable
            */
            this.captureDataUrl = file_uri; 
        },
        err => console.log(err));
    }

    // To store image in firebase storage
    var imageStore = firebase.storage().ref('directoryPath').child('imageName' + '.jpg');
    imageStore.putString(this.captureDataUrl, 'base64', { contentType: 'image/jpg' }).then(function (snapshot) {
        // Do success callback
    });

I think this will help...
Thanks

Ionic 2 Firebase Image Upload From Gallery

1 Answers