Cloudflare Images direct upload CORS problem

I’m trying to upload a file from the browser using the direct_upload endpoint which returns an upload URL.

Unfortunately when trying to upload via XHR from the browser I’m getting this strange CORS error:

Access to XMLHttpRequest at 'https://upload.imagedelivery.net/....' from origin 'https://127.0.0.1:5555' has been blocked by CORS policy: Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.

The JS code that uploads is essentially this with some added event handlers:

xhr.open('POST', url);
xhr.send(file);

The file is obtained from an <input type="file"> element.

I’m using XHR instead of fetch because I need to monitor the upload progress to be able to display a progress bar. Fetch doesn’t have support for monitoring upload progress. See these two issues for more info about this:

https://github.com/github/fetch/issues/89

https://github.com/whatwg/fetch/issues/607

Check out these previous posts

1 Like

Thanks. I had seen those posts but since the only solution involved using fetch I discarded it.

Looking at it in more detail the solution was to send multipart/form-data instead of the straight file with content type image/jpeg.

So I did:

const formData = new FormData();
formData.append('file', file);
xhr.send(formData);

And that finally worked.

Now I understand the issue. The server CORS settings don’t allow any other value for the content-type header than multipart/form-data. Not the best way to communicate an error with a user if you ask me.

It’s really confusing the docs don’t clarify this. The only example is a cryptic HTML form.

It was very, very painful to get it to work! I tried using axios, which is the lib I use for all my api requests and could not get it to work with axios. Eventually I used fetch and it worked - who knows why.

Here’s the code I’m currently using:

const formData = new FormData()
formData.append('file', actualFile, 'filename')

const uploadResult = await fetch(uploadUrl, {
    method: 'post',
     body: formData
})
const result = await uploadResult.json()

I hope this spares you some time.

What “got” me was that I looked at the example on https://developers.cloudflare.com/images/cloudflare-images/upload-images/direct-creator-upload/ and I named the parameter I appended “myFile”. After changing the name from “myFile” to “file” it worked fine. I wish the error returned was “Bad Request: Missing parameter named ‘file’” instead of “Bad request: Error parsing form fields.” That would have saved me a couple of hours of frustration.

1 Like