Empty image when uploading to presigned AWS S3 url in React Native

I’m trying to upload image to AWS S3 in my React Native(expo managed workflow), but in result the file is empty. I don’t get any errors through the process. I’ve also tried to upload it using Uppy AWS plugin, but result is the same. Here is my code:

async function getUploadUrl(filename: string, type: string) {
  const response = await fetch(GET_UPLOAD_URL(filename, type), {
    method: 'GET',
    headers: {
      'Content-Type': 'application/json',
      Accept: 'application/json',
    },
  });
  return await response.json();
}


export default async function uploadImage(
  file: Blob,
  filename: string,
  base64: string
) {
  const uploadData = await getUploadUrl(filename, file.type);

  const data = new FormData();
  for (const [key, value] of Object.entries(uploadData.fields)) {
    data.append(key, value as string);
  }
  data.append('file', Buffer.from(base64, 'base64'));
  let res = await fetch(uploadData.url, {
    method: 'post',
    body: data,
    headers: {
      'Content-Type': 'multipart/form-data;',
    },
  });

I am using expo image picker to get the file. I’ve also tried to upload just Blob file insead of Buffer, but it doesn’t work either

Here is how the file looks if i open it in browser https://prnt.sc/vOk5CI7lyPhu

Answer

If anyone also faced such problem, i managed to upload the file by uri like this:

formData.append('file', {
    uri: uri,
    type: 'image/jpeg',
    name: filename,
  });

Advertisement

Answer