Certain iOS images fail to POST in Capacitor

174 views Asked by At

Our Capacitor application involves uploading an image, so we use "@capacitor/camera" to prompt the user to choose an image from their gallery; this works perfectly fine in Android, but fails with certain images on iOS without a reliable error output.

Here's where we used @capacitor/camera to fetch a photo's data URL, and create a file from it:

    function dataURItoBlob(dataURI: string) {
      var byteString = atob(dataURI.split(',')[1]);
      var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
      var ab = new ArrayBuffer(byteString.length);
      var ia = new Uint8Array(ab);
      for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
      }
      var blob = new Blob([ab], { type: mimeString });
      return blob;
    }

    const triggerUpload = async (target) => {
      try {
        await Camera.requestPermissions();
        await Filesystem.requestPermissions();

        const image = await Camera.getPhoto({
          source: CameraSource.Photos,
          resultType: CameraResultType.DataUrl,
          quality: 80,
        });

        let _file = new File(
          [dataURItoBlob(image.dataUrl)],
          `${new Date().getTime()}.jpeg`,
          {
            type: 'image/jpeg',
          }
        );

        state.image = _file;
      } catch (error) {
        console.log('UPLOAD ERROR :: ', error.message);
        }
      }
    };

This is the request using Axios and FormData:

    const register = async () => {
      try {
        const formData = new FormData();

        formData.append('file', state.personalInfo.image);

        let response = await api.postForm('/v2/signup/', formData);
        response = response.data;

        console.log('RESPONSE :: ', response);
      } catch (error) {
        console.log('REGISTER ERROR :: ', error.message);
      }
    };

We've also tried using an XHRequest, window's Fetch, and @capacitor/http request. Axios seems to throw an error with "Network Error" without any explanation, while the remaining attempts would just simply hang. Note that none of the requests actually reached the servers.

Additionally, we've tried submitting a POST request with an application/json body which included the Base64 of the file. We've also tried to implement Firebase's storage SDK, using uploadBytesResumable, uploadString, etc. All our attempts yielded nothing. Our servers initially were hosted on AWS, but we've tested on GCP as well. Finally, we've also tried to create an empty Capacitor project and tested it, it still seems to fail.

The default iOS emulator photos(all JPEG) all seem to exhibit the same behavior, while randomly downloaded images work just fine. What I did notice is that the base64 string of these images were a lot larger than the other images even if they had similar file size and resolution. I've tried several compression libraries, but this doesn't change much.

0

There are 0 answers