How to upload an image coming from the Ionic's Camera to firebase?

Question

I've managed to take a picture using Ionic camera API:

  async pickImage(sourceType: CameraSource) {
    const image = await Camera.getPhoto({
      quality: 90,
      allowEditing: true,
      resultType: CameraResultType.Uri,
      source: sourceType,
    });
    console.log(image);
  }

which gives me this:

I've also found that to upload using angular fire storage, but I can't figure out how to connect the two. I don't really understand what are the format in between, what format I should ask to the Camera API and what format should I provide to the AngularFireStorage API.

I tried this:

const filePath = 'name-your-file-path-here';
const ref = this.storage.ref(filePath);
const task = ref.put(image.webPath);
task
  .snapshotChanges()
  .pipe(finalize(() => console.log(ref.getDownloadURL())))
  .subscribe();

But I get this error:

ERROR Error: Uncaught (in promise): FirebaseStorageError: {"code_":"storage/invalid-argument","message_":"Firebase Storage: Invalid argument in `put` at index 0: Expected Blob or File.","serverResponse_":null,"name_":"FirebaseError"}

Your lights would be highly appreciated :)

Answer 1

that "webpath" is not a file or a blob, you need to convert it before you call the put. There is an example of how to convert it on the ionic website

https://ionicframework.com/docs/angular/your-first-app/3-saving-photos

private async readAsBase64(cameraPhoto: CameraPhoto) {
  // Fetch the photo, read as a blob, then convert to base64 format
  const response = await fetch(cameraPhoto.webPath!);
  const blob = await response.blob();

  return await this.convertBlobToBase64(blob) as string;  
}

convertBlobToBase64 = (blob: Blob) => new Promise((resolve, reject) => {
  const reader = new FileReader;
  reader.onerror = reject;
  reader.onload = () => {
      resolve(reader.result);
  };
  reader.readAsDataURL(blob);
});

Answer 2

here is my sample code and its working fine, hope it helps

ambilpoto2(){
    const image =  Camera.getPhoto({
      quality: 90,
      allowEditing: true,
      resultType: CameraResultType.Uri
    });
    image.then((res:any)=>{
      this.gambar = res.webPath;
      this.gambarnya.nativeElement.src = this.gambar;
      this.blob=this.readAsBase64(this.gambar);
      console.log(this.blob); 
    })
  }

  private async readAsBase64(cameraPhoto: any) {
    const response = await fetch(cameraPhoto);
    const blob = await response.blob();
    return await this.convertBlobToBase64(blob) as string;  
  }
  
  convertBlobToBase64 = (blob: Blob) => 
    new Promise(
      (resolve, reject) => {
      const reader = new FileReader;
      reader.onerror = reject;
      reader.onload = () => {
          resolve(reader.result);
      };
      reader.readAsDataURL(blob);
    });
  }

and here my code for php server

//get base64 of image from client end
    $imageBase64 = $post['poto'];
    if ($imageBase64!='') {
        //function call
        $unique_name = uploadbase64image($imageBase64);
    }
    function uploadbase64image($base64) {
        $direktori = "domain/api/upload/"; 
        $imgname= $direktori.date("Y-m-d-H-i-s") . ".png";
        $new_image_url ="upload/". $imgname;
        $base641 = 'data:image/png;base64,' . $base64;
        $base642 = base64_decode(preg_replace('#^data:image/\w+;base64,#i', '', $base64));
        file_put_contents($new_image_url, $base642);
        return $uniname;
    }

with DataUrl Result Type

ambilpoto(){
    const image =  Camera.getPhoto({
      quality: 90,
      allowEditing: true,
      resultType: CameraResultType.DataUrl
    });
    image.then((res:any)=>{
      this.gambar = res.dataUrl;this.gambarnya.nativeElement.src = this.gambar;
      console.log(this.gambar); 
    })
    
  }

enter code here