Firebase image upload fail with ionic 3

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