Ionic 7 (Angular), Capacitor, Error saving image to Firebase Storage

Question

From my Ionic 7 app, I am trying to save an image to Firebase storage using the Capacitor Camera plugin.

It works fine when the picture is taken from the web browser. However, when taking a picture on an android phone, the following errors occur when calling Firebase method "uploadString()"

FirebaseError: Firebase Storage: An unknown error occurred, please check the error payload for server response. (storage/unknown

the error from CapacitorHttp.request

{
    "status": 400,
    "headers": {
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Expose-Headers": "Content-Length, Content-Type, Date, Server, Transfer-Encoding, X-GUploader-UploadID, X-Google-Trace",
        "Alt-Svc": "h3=\":443\"; ma=2592000,h3-29=\":443\"; ma=2592000",
        "Content-Length": "45",
        "Content-Type": "text/plain; charset=utf-8",
        "Date": "Wed, 12 Jul 2023 09:52:51 GMT",
        "Server": "UploadServer",
        "X-Android-Received-Millis": "1689155570831",
        "X-Android-Response-Source": "NETWORK 400",
        "X-Android-Selected-Protocol": "http/1.1",
        "X-Android-Sent-Millis": "1689155570679",
        "X-GUploader-UploadID": "ADPycdu8yyYibwUojSi4OVADDqYD9U9dIFkAmVMgmFRqZqorsLdahxsIxsA4lGm9Q0XThZW5UtTZCBM94WQKC_d7qfdoarGfen3_"
    },
    "url": "https://firebasestorage.googleapis.com/v0/b/treatmvp.appspot.com/o?name=upload_1689155570831.jpeg",
    "data": "Multipart body does not contain 2 or 3 parts.",
    "error": true
}

So it appears “Multipart body does not contain 2 or 3 parts” causes and issue from android.

The code is as follows

  public async addNewToGallery(photoPathId: string) {
    // Take a photo
    const image: Photo = await Camera.getPhoto({
      quality: 90,
      allowEditing: false,
      resultType: CameraResultType.DataUrl,
    });
    await this.uploadImage(image, photoPathId);
  }

  async uploadImage(cameraFile: Photo, photoPathId: string) {

    const path = `uploads/${photoPathId}/${new Date().getTime()}.png`;
    const storageRef = ref(this.storage, path);

    try {
      // this Firestore method is not working
      await uploadString(storageRef, cameraFile.dataUrl!, 'data_url')
      const imageUrl = await getDownloadURL(storageRef);
      this.updateUserPhotos(imageUrl, photoPathId, path);
      return true;
    } catch (e) {
      console.log('error from upload?', e);
      return null;
    }
  }

Any ideas to solve this would be very helpful

Answer 1

I have this issue in my appplication, I only set CapacitorHttp: { enabled: false, },

and work fine.