Unable to upload images, incorrect content type

[geraint.fisher]

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',
  body
})

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

Thanks

[geraint.fisher]

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…

[teabub]

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

EDIT:

This actually sets the object with the wrong type

you can set it manually with headers e.g.

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

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

[teabub]

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);
    xhr.send(null);
  });
}

Now you can skip FormData altogether and just do

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