`JSON Parse error: Unexpected character: <` error from supabase storage upload on Android

We are dealing with a JSON Parse error when uploading to supabase storage specifically when uploading camera photos selected from camera roll. We do not have this issue when uploading camera photos taken directly with Expo Image Picker camera, or when uploading screenshots. Supabase storage responds only with a JSON Parse error, but we don't know what's being parsed or why it would be different between these cases.

In our expo project we use Expo Image Picker to upload images. We get the assets and upload them to supabase storage with the following steps:
1. Parse the image type (png, jpeg) and create a FormData

const photo = {
    uri: uri,
    type: type,
    name: fileName,
  }; 
  const formData = new FormData();
  formData.append("file", photo);

const photo = {
    uri: uri,
    type: type,
    name: fileName,
  }; 
  const formData = new FormData();
  formData.append("file", photo);

An example of photo here would be

{"name": "{uuid}.jpeg", "type": "image/jpeg", "uri": "file:///data/user/0/{project}/cache/ImagePicker/{uuid}.jpeg"}

{"name": "{uuid}.jpeg", "type": "image/jpeg", "uri": "file:///data/user/0/{project}/cache/ImagePicker/{uuid}.jpeg"}

2. Upload formData to supabase storage bucket

  const imagePath = `${user_id}/${fileName}`;
  let { error } = await supabase.storage
    .from(bucketName)
    .upload(imagePath, formData);

  const imagePath = `${user_id}/${fileName}`;
  let { error } = await supabase.storage
    .from(bucketName)
    .upload(imagePath, formData);

- When we take a photo and use

ImagePicker.launchCameraAsync({ allowsEditing: false, mediaTypes: ["images"]});

ImagePicker.launchCameraAsync({ allowsEditing: false, mediaTypes: ["images"]});

, this uploads successfully.
- When we upload a screenshot, this uploads successfully. This uses

await ImagePicker.launchImageLibraryAsync({mediaTypes: ["images"]})

await ImagePicker.launchImageLibraryAsync({mediaTypes: ["images"]})

However when uploading a selected photo from camera roll with

await ImagePicker.launchImageLibraryAsync({mediaTypes: ["images"]})

await ImagePicker.launchImageLibraryAsync({mediaTypes: ["images"]})

that works for a screenshot, this no longer works and responds with the JSON Parse error.
- There are no logs or errors in Supabase Storage when this fails.
- There are no logs or errors in Supabase API Gateway when this fails.

Has anyone experienced this issue? How can we get more details on why this error is occurring, or find logs to help debug this?

Details:
"expo-image-picker": "^16.1.4"
"@supabase/supabase-js": "^2.54.0"
Reproduced on Pixel 6, Pixel 9

Supabase•6mo ago•

2 replies

`JSON Parse error: Unexpected character: <` error from supabase storage upload on Android

const photo = {
    uri: uri,
    type: type,
    name: fileName,
  }; 
  const formData = new FormData();
  formData.append("file", photo);

const photo = {
    uri: uri,
    type: type,
    name: fileName,
  }; 
  const formData = new FormData();
  formData.append("file", photo);

An example of photo here would be

{"name": "{uuid}.jpeg", "type": "image/jpeg", "uri": "file:///data/user/0/{project}/cache/ImagePicker/{uuid}.jpeg"}

{"name": "{uuid}.jpeg", "type": "image/jpeg", "uri": "file:///data/user/0/{project}/cache/ImagePicker/{uuid}.jpeg"}

2. Upload formData to supabase storage bucket

  const imagePath = `${user_id}/${fileName}`;
  let { error } = await supabase.storage
    .from(bucketName)
    .upload(imagePath, formData);

  const imagePath = `${user_id}/${fileName}`;
  let { error } = await supabase.storage
    .from(bucketName)
    .upload(imagePath, formData);

- When we take a photo and use

ImagePicker.launchCameraAsync({ allowsEditing: false, mediaTypes: ["images"]});

ImagePicker.launchCameraAsync({ allowsEditing: false, mediaTypes: ["images"]});

, this uploads successfully.
- When we upload a screenshot, this uploads successfully. This uses

await ImagePicker.launchImageLibraryAsync({mediaTypes: ["images"]})

await ImagePicker.launchImageLibraryAsync({mediaTypes: ["images"]})

However when uploading a selected photo from camera roll with

await ImagePicker.launchImageLibraryAsync({mediaTypes: ["images"]})

await ImagePicker.launchImageLibraryAsync({mediaTypes: ["images"]})

`JSON Parse error: Unexpected character: <` error from supabase storage upload on Android

`JSON Parse error: Unexpected character: <` error from supabase storage upload on Android

Similar Threads

Similar Threads

Similar Threads