Unable to upload images, incorrect content type

I am building a react-native/expo app. I’m requesting an upload URL via the direct creator upload (e.g. https://upload.imagedelivery.net/Vi7wi5KSItxGFsWRG2Us6Q/2cdc28f0-017a-49c4-9ed7-87056c8390), then attempting to upload a file using fetch. I wasn’t able to find any documentation for this specific api endpoint so have been using the standard upload API as an example (https://developers.cloudflare.com/api/operations/cloudflare-images-upload-an-image-via-url). I’m struggling to find the correct way to send the file. Although the api docs mention the file the example code does not give any examples of this.

I have the following code, but am getting the error ERROR 5455: Uploaded image must have image/jpeg, image/png, image/webp, image/gif or image/svg+xml content-type when attempting but believe the file is the correct format type - am I required to pass any additional header/body data?

const uri = "file:///path/to/file/1EABEE18-E2FB-4A24-BFB9-6FCEAB2B60E5.png";

const response = await fetch(uri);
const blob = response.blob();
// I can see that blob has 'type' of 'image/jpeg'

const body = new FormData();
body.append('file', blob);

// ERROR 5455
await fetch(data.createMedia.uploadURL, {
  method: 'POST',

Is anyone able to point out anything i’m missing? or maybe an example implementation?


1 Like

I’m still struggling to find anyway to resolve this…if anyone from cloudflare could point me in the right direction I would appreciate it…

This topic was automatically closed after 15 days. New replies are no longer allowed.

just completed this

import * as FileSystem from 'expo-file-system';

const blob = await FileSystem.readAsStringAsync(path);
const body = new FormData();
body.append('file', blob);
const uploadResult = await fetch(uploadURL, { method: 'PUT', body });

PUT is required for R2, but for Direct Creator Uploads for Images, POST works too


This actually sets the object with the wrong type

you can set it manually with headers e.g.

fetch(uploadURL, {
  method: 'PUT',
  headers: { 'Content-Type': type },

but I’d rather get it set automatically. will report back

After digging further, your code should work, unless you’re using react-native 0.72 which introduced a regression on fetch via whatwg-fetch

Until an update fixes this, you can use the following instead of fetch:

const uriToBlob = (uri: string): Promise<Blob> => {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.onload = () => resolve(xhr.response);
    xhr.onerror = () => reject(new Error('uriToBlob failed'));
    xhr.responseType = 'blob';
    xhr.open('GET', uri, true);

Now you can skip FormData altogether and just do

const body = await uriToBlob(uri)
const uploadResult = await fetch(uploadURL, { method: 'PUT', body });