[v3 form-data-parser]: Handling file inputs with no selected files #10700

christoph-fricke · 2025-07-28T11:07:18Z

christoph-fricke
Jul 28, 2025

Note

This discussion originated and has been moved over from mjackson/remix-the-web#59. I think it is still relevant to discuss.

Today, I have been surprised to learn that an empty file input results in a file in multipart/form-data content. I was super confused about receiving a file from parseFormData for an input where no file was selected.

Turns out that the behavior is conform with the HTML specification (Section 4.10.21.4 "Constructing the entry list", Rule 5.8.1) and browsers are supposed to attach an empty file to the multipart/form-data payload for file inputs that contain no selected files.

This behavior can be easily verified with the following HTML snippet. Opening it in a browser (tested in Chromium) and submitting the form attaches an "empty file" in the multipart/form-data payload.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>File Test</title>
  </head>
  <body>
    <form method="POST" enctype="multipart/form-data" action="#">
      <h1>Empty File Test</h1>
      <!-- https://html.spec.whatwg.org/#constructing-the-form-data-set -->
      <input type="file" name="documents" />
      <button>Submit</button>
    </form>
  </body>
</html>

Using form-data-parser in a react-router action results in the following form data:

import { parseFormData } from '@mjackson/form-data-parser';

export async function action({ request }: Route.ActionArgs) {
  const formdata = await parseFormData(request);
  console.log(formdata.getAll('documents'));
  // [
  //   File {
  //     size: 0,
  //     type: 'application/octet-stream',
  //     name: '',
  //     lastModified: 1743771804595
  //   }
  // ]

  return null
}

Even though this behavior is according to the HTML specification, I am surprised to learn that form-data-parser does not filter empty file inputs. I did not find any hints or examples in the packages documentation that warn about this gotcha. They would all write this empty file to disk, right? Further, I did not find any tests in form-data-parser or multipart-parser that verify the behavior around empty file inputs.

I ended up filtering empty file inputs with this custom upload handler:

import { parseFormData as defaultParseFormData } from '@mjackson/form-data-parser';

export function parseFormData(request: Request): Promise<FormData> {
  return defaultParseFormData(request, async (file) => {
    // https://html.spec.whatwg.org/#constructing-the-form-data-set Filter for Rule 5.8.1
    if (file.name === '' && file.type === 'application/octet-stream') return null;

    // Default handler is not exported...
    // https://github.com/mjackson/remix-the-web/blob/main/packages/form-data-parser/src/lib/form-data.ts#L73
    return new File([await file.arrayBuffer()], file.name, {
      type: file.type,
      lastModified: file.lastModified,
    });
  });
}

I am wondering whether or not form-data-parser should already filter empty file inputs for consumers. I think that it would greatly benefit the usability. If we want to be as close to the HTML standard as possible, the documentation should at least warn about this gotcha so users to not further process files that indicate an empty input. What are your thoughts about this topic?

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[v3 form-data-parser]: Handling file inputs with no selected files #10700

Uh oh!

{{title}}

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

[v3 form-data-parser]: Handling file inputs with no selected files #10700

Uh oh!

christoph-fricke Jul 28, 2025

Replies: 0 comments

christoph-fricke
Jul 28, 2025