FilePond with a form backend, and when to skip it

Why does FilePond show the files but the form sends none?

You add FilePond to a form, drop two PDFs on it, see the neat list with green ticks, press Send, and the email arrives with no attachments. Nothing in the console complains. This is the most common FilePond surprise, and it comes from how FilePond is meant to be used. By default it expects a server option, an upload endpoint that takes each file the moment it is added and returns an ID. Without one, the files sit in FilePond's memory and never join the form.

A form backend works differently. It wants the whole submission, text fields and files together, in one multipart/form-data post. So the question is how to make FilePond hand its files back to the form. We tested FilePond 4.32.12 on 3 November 2026 in Chromium 153, Firefox 155 and WebKit 26.6, first against a receiver that counts every file in a request, then against Formgong, a form backend that sends each submission to your email or Telegram.

Which FilePond setup actually sends the files?

The answer is storeAsFile: true. It puts the picked files back into a real file input, so the browser sends them with everything else, exactly as it would without FilePond. With JavaScript switched off, the same page fell back to the plain input and still sent 2 of 2 files, which is the behaviour you want from a progressive enhancement.

The last two rows are about the size plugin. With checkValidity: true, a file over the limit marks the form invalid and the submit stops, so the visitor sees the problem. Leave it off and FilePond quietly drops the large file while the form goes ahead, which means an application without its CV and nobody aware of it. Turn it on whenever you set a limit. The HTML file input article shows the same check without a library.

What goes wrong when you send FilePond files with fetch?

Basin's guide “How to integrate FilePond with your Basin forms” (6 June 2023) takes another route: it keeps FilePond in memory with instantUpload: false, appends each file to FormData by hand and sends it with fetch and redirect: "manual". The files arrived, 2 of 2. The trouble was the answer. We ran the script unchanged against Formgong, which answers a plain form post with a redirect to its thank-you page. With redirect: "manual", a redirect reaches the script as a response with status 0 and ok false, so the script threw “Network response was not ok”, put the button back to Submit and treated the upload as failed. Formgong had already stored the submission with both files. We did not test Basin's own endpoint, so its answer may differ, but any backend that redirects will trip this code.

A visitor who sees a failure sends again, and you get the same application twice. If you post with fetch, ask for JSON with Accept: application/json, read response.ok and leave the redirect alone. Our guide to stopping duplicate form submissions covers the button side, and JavaScript FormData explains why you should not set the multipart header yourself.

Does FilePond check what kind of file it is?

Only by the name. The type plugin reads the type the browser reports, and browsers take that from the file extension. A GIF renamed holiday.pdf was reported as a PDF and accepted in 3 of 3 browsers. That is fine for guiding honest visitors to the right format, and useless against anyone who renames a file.

The real check has to happen where the file lands. When the same renamed GIF reached Formgong, it was refused with file_type and nothing was stored, because Formgong reads the first and last bytes of each file and compares them with the extension and the claimed type before it keeps it.

When don't you need FilePond?

For a contact or application form with one to three files, you usually don't. FilePond's script, its stylesheet and the two validation plugins came to 39,613 bytes as unpkg sent them, 140,444 bytes once unpacked, and you also take on a dependency to keep updated. A plain file input already supports multiple and accept, opens the phone's camera with capture, and sent the same 2 of 2 files in our first row.

FilePond earns its place when the picker itself matters: drag and drop that looks the same in every browser, image previews, reordering, or a long form where files should upload while the visitor keeps typing. That last case needs FilePond's server option and an endpoint built for its upload protocol, which a form backend's submit address is not. For files above 5 MiB, Formgong has its own files.js script that uploads up to 100 MiB in parts before the form is sent; the contact form with file upload guide shows both routes.

<form id="apply" action="https://formgong.com/submit" method="POST" enctype="multipart/form-data">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY">
  <label for="name">Name</label>
  <input id="name" name="name" autocomplete="name" required>
  <label for="files">Portfolio (PDF, up to 3 files)</label>
  <input id="files" type="file" name="attachment" multiple accept="application/pdf">
  <div class="cf-turnstile" data-sitekey="YOUR_TURNSTILE_SITE_KEY"></div>
  <button>Send</button>
</form>

<link rel="stylesheet" href="https://unpkg.com/filepond@4.32.12/dist/filepond.min.css">
<script src="https://unpkg.com/filepond-plugin-file-validate-size@2.2.8/dist/filepond-plugin-file-validate-size.min.js"></script>
<script src="https://unpkg.com/filepond@4.32.12/dist/filepond.min.js"></script>
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
<script>
  FilePond.registerPlugin(FilePondPluginFileValidateSize);
  FilePond.create(document.getElementById("files"), {
    storeAsFile: true,      // files go with the form, in the same post
    checkValidity: true,    // a rejected file stops the submit
    maxFiles: 3,
    maxFileSize: "5MB",
  });
</script>

Where does Formgong differ for FilePond uploads?

On the server, after FilePond has done its part. Static Forms' guide “Build a FilePond Upload Form Without an Upload Server” (20 September 2026) is the best walkthrough of the storeAsFile route we found, and it is honest about the limit: it says Static Forms enforces its size limit but does not enforce a server-side file-type allowlist, and that file uploads need its Starter plan or higher. Formgong takes files on every plan, including Free, up to 3 a post and 5 MiB each in a plain post, and it checks each file's own bytes against its extension, which is what refused the renamed GIF above. You need to turn attachments on for the form and add Turnstile, because Formgong will not take a file post without a valid token. The HTML forms docs list the fields.

Did FilePond behave differently for you?

If FilePond sent or dropped files in a way this test missed, with another plugin or version, write to support@formgong.com. We will run your setup and add it to the table.