Cloudflare Images direct upload needs multipart/form-data with the field named file

Cloudflare Images direct upload needs multipart/form-data with the field named file

TL;DR

Mint the one-time upload URL server-side via POST to /images/v2/direct_upload with your API token; never expose the token in frontend code. In the browser, build a FormData with the file appended as file and let the browser set the Content-Type header; do not set it manually. If you see a CORS content-type error, the fix is always the encoding and field name, not a CORS header on your side.

Use this when you run into the situation in the title.

When not to use this skill: unrelated tasks. It covers only the procedure above.

Compatibility

Tool: Cloudflare. The steps above apply to the commands named in them. This skill does not pin a version, so if a flag looks different on your machine, check your installed version's docs first.

Details

Context: Cloudflare Community thread (direct image upload CORS error): documents the Direct Creator Upload gotcha that trips agents wiring browser uploads. The upload URL only accepts multipart/form-data, the file field MUST be named exactly file, and setting a manual Content-Type like application/json triggers a CORS rejection ('content-type is not allowed'). The /direct_upload endpoint that mints the URL must be called from your backend, never from the browser.

Source: Cloudflare Community thread (direct image upload CORS error): documents the Direct Creator Upload gotcha that trips agents wiring browser uploads. The upload URL only accepts multipart/form-data, the file field MUST be named exactly file, and setting a manual Content-Type like application/json triggers a CORS rejection ('content-type is not allowed'). The /direct_upload endpoint that mints the URL must be called from your backend, never from the browser.

Verified resolution: Mint the one-time upload URL server-side via POST to /images/v2/direct_upload with your API token; never expose the token in frontend code. In the browser, build a FormData with the file appended as file and let the browser set the Content-Type header; do not set it manually. If you see a CORS content-type error, the fix is always the encoding and field name, not a CORS header on your side.

Source URL: https://community.cloudflare.com/t/direct-image-upload-cors-error/345739