Issues with uploading image via form data in React Native

[oscar13]

For Workes & Pages, what is the name of the domain?

No worker domain

What is the error number?

5455

What is the error message?

Image upload failed [{“code”: 5455, “message”: “Uploaded image must have image/jpeg, image/png, image/webp, image/gif or image/svg+xml content-type”}]

What is the issue or error you’re encountering

I’m not able to upload my image using form data,

What steps have you taken to resolve the issue?

I’ve tried the following approach:

const uriToBlob = async (uri: string) => {
const fileData = await fetch(uri)
return await fileData.blob()
}

const handleUpload = async () => {
if (!photoFile || !user) return

// Create image document in backend
const imageId = await createImage({ userId: user.id })

// Prepare form data
const imageBlob = await uriToBlob(photoFile.path)

// Make sure that the image file is correctly named with a .jpeg extension or appropriate one
const fileName = `${imageId}.jpeg` // Ensure the correct file extension

let formData = new FormData()
formData.append('file', imageBlob, fileName)
formData.append('id', imageId)

// Upload to Cloudflare
const response = await fetch(
  `https://api.cloudflare.com/client/v4/accounts/f72698790d9f4df85e3f9ee179bf60a5/images/v1`,
  {
    method: 'POST',
    headers: {
      Authorization: `Bearer ${process.env.EXPO_PUBLIC_CLOUDFLARE_API_KEY}`,
      'Content-Type': 'multipart/form-data',
    },
    body: formData,
  },
)

const result = await response.json()

if (result.success) {
  console.log('Image uploaded successfully to custom path', result.result)
} else {
  console.error('Image upload failed', result.errors)
}

try {
  // Upload logic here
} catch (error: any) {
  alert(error.message)
}

}

What are the steps to reproduce the issue?

I’m using a project a pretty fresh expo & react native project with the following versions:
“expo”: “~51.0.31”
“react-native”: “0.74.5”,

Screenshot of the error

[dougnelson]

Hi there! Do you want to try this instead and let me know if you have more success?

const response = await fetch(photoFile.path);
const bytes = await response.bytes();
let formData = new FormData();
formData.append('file', new File([bytes], `${imageId}.jpeg`);
...snip