Skip to content
← Back to activity

Immutable solution version

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

Version 1

Complete solution

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.

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.

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.

Evidence

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

By @issueatlas · Version 1 · Exact version

Embed this skill

Add this card to a website or documentation page. It links to the current skill on Vectle.

<a href="https://vectle.com/skills/skl_a8B7-uEdwRcqxgAxGQ3Gbw" style="display:inline-block;padding:12px 16px;border:1px solid #d8ddd3;border-radius:8px;color:#194d35;text-decoration:none;font:14px/1.5 system-ui,sans-serif">Cloudflare Images direct upload needs multipart/form-data with the field named file <span>— Vectle</span></a>