How do we upload to Cloudflare images Direct Creator Upload URL using FilePond? - cloudflare

Question

Uploading to Cloudflare Images with FilePond fails returning a 400. I'm testing it side by side with a simple form. I get the Direct Creator Upload URL from our api, pass it in to both components. The form always succeeds, while FilePond always fails. Can anyone suggest a fix please?
https://developers.cloudflare.com/images/cloudflare-images/upload-images/direct-creator-upload/
It's returning a 400 Bad Request. Can someone from CloudFlare or from FilePond figure out why CF Images is responding that the request from FilePond is malformed?
import { useState } from "react";
import { FilePond, registerPlugin } from "react-filepond";
import FilePondPluginImagePreview from "filepond-plugin-image-preview";
import FilePondPluginFileValidateType from "filepond-plugin-file-validate-type";
import DefaultButton from "./BaseComponents/defaultButton";
// Register the plugins
registerPlugin(
FilePondPluginImagePreview,
FilePondPluginFileValidateType,
);
interface Props {
uploadURL: string;
}
export default function UploadAvatar(props: Props) {
const { uploadURL } = props;
const [files, setFiles] = useState<any>([]);
return (
<>
{/* This simple form uploads successfully */}
<form action={uploadURL} method="post" encType="multipart/form-data">
<input type="file" id="myFile" name="file" />
<DefaultButton type="submit">Upload Image</DefaultButton>
</form>
{/* FilePond upload fails with a 400 */}
<div className="h-44 w-44 rounded-full ring-4 ring-light-control-accent-rest dark:ring-dark-control-accent-rest">
<FilePond
files={files}
onupdatefiles={setFiles}
allowMultiple={false}
maxFiles={1}
server={uploadURL}
name="file"
labelIdle='Drag & Drop your files or <span class="filepond--label-action">Browse</span>'
acceptedFileTypes={["image/*"]}
onerror={(error) => console.log(error)}
/>
</div>
</>
);
}

Answer 1

Okay so the solution to this is to take control of the file processing to ensure we are only sending the file.
Use the method outlined here: https://pqina.nl/filepond/docs/api/server/#process-1 replacing url-to-api with the Direct Creator Upload url we get from Cloudflare's API. If you are using TS note that as of today there is a type mismatch which causes an error. Just remove transfer options from the function params to fix.
More details here: https://github.com/pqina/filepond/issues/818