Firebase image upload fail with ionic 3 - firebase

Question

Trying take a picture and upload it to firebase storage.
Here is my code;
import { Camera, CameraOptions } from '#ionic-native/camera';
async takePhoto() {
try{
const options: CameraOptions = {
quality: 50,
targetHeight: 600,
targetWidth: 600,
destinationType: this.camera.DestinationType.DATA_URL,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE
}
const result = await this.camera.getPicture(options);
const image= `data:image/jpeg;based64,${result}`;
const pictures=storage().ref(`ProfilePictures/${this.myUid}`);
pictures.putString(image, `data_url`);
}
catch(e) {
console.error(e);
}
}
But it uploads a file that is not image actually. And it uploads a corrupted file even if I download it, I can't open it because its not an image.
Here is my firebase storage
thanks for reading please assist me

Answer 1

This may not be your problem as it's hard to say what the specific issue is but I've had similar issues in the past with image uploads, try this:
let result = await this.camera.getPicture(options);
result = result.replace(/(\r\n|\n|\r)/gm,"");
const image= `data:image/jpeg;based64,${result}`;
.replace(/(\r\n|\n|\r)/gm,"") removes all the newlines from the returned data.
Hope this helps.

Answer 2

takePhoto() {
const options: CameraOptions = {
quality: 50,
targetHeight: 600,
targetWidth: 600,
destinationType: this.camera.DestinationType.DATA_URL,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE
}
this.camera.getPicture(options).then((imageData) => {
let base64Image = 'data:image/jpeg;base64,' + imageData;
const pictures=storage().ref(`ProfilePictures/${this.myUid}`);
pictures.putString(base64Image, `data_url`);
}, (err) => {
}).present();
});
}
thats the way i solved the problem