Uploading an image to CloudFlare Images

Uppy
1

I’m having some trouble uploading an image to CloudFlare. I’m using the React component. The CloudFlare API is responding with a 400: ERROR 5400: Bad request: Error parsing form fields

I’m using the Direct Creator Upload feature of CloudFlare where get a unique upload url from their API and pass it to the client.

  const uppy = useUppy(() => {
    return new Uppy({
      allowMultipleUploads: false,
      restrictions: {
        maxFileSize: 10000000,
        maxNumberOfFiles: 1,
        allowedFileTypes: ["image/*"],
      },
    }).use(XHRUpload, {
      endpoint:
        `${URL}`,
    });
  });

return (
      <div className="card p-10">
        <PrimaryButton onClick={() => setModalOpen(true)}>
          Upload Image
        </PrimaryButton>
        <DashboardModal
          uppy={uppy}
          note="Upload an image, max size 10MB"
          closeModalOnClickOutside={false}
          closeAfterFinish={true}
          showProgressDetails={true}
          autoOpenFileEditor={true}
          theme="auto"
          open={modalOpen}
          onRequestClose={() => setModalOpen(false)}
        />
      </div>
)

I've verified that a simple html form works okay:
```jsx
        <form
          action=`${URL}`
          method="post"
          encType="multipart/form-data"
        >
          <input type="file" id="myFile" name="file" />
          <input type="submit" />
        </form>
2

nice but it is perfect okay . thanks

3

ok bye but thankyou dear my lover

4

I actually had this same problem, and solved it. Turns out Cloudflare Images is super-picky about additional data being sent alongside the file, so you have to tell uppy to not send anything besides the file contents. Set the XHRUpload options hash to this:

{ 
  endpoint: `${URL}`, 
  allowedMetaFields: [],
}