submit multipart/form-data with empty file input, got error on request.formData()

What version of Remix are you using?

1.6.1

Steps to Reproduce

Empty remix app with this route

import { ActionFunction } from '@remix-run/node';
import { useSubmit } from '@remix-run/react';
import { useRef } from 'react';

export let action: ActionFunction = async ({ request }) => {
  const fdata = await request.formData();
  console.log(fdata);
  return null;
};

const Comp = () => {
  const submit = useSubmit();
  const formRef = useRef<any>();

  return (
    <>
      <form ref={formRef}>
        <input type="file" name="test" />
      </form>
      <button
        onClick={() => {
          submit(formRef.current, {
            method: 'post',
            encType: 'multipart/form-data',
          });
        }}>
        CLICK SEND WITHOUT FILE. BOOM!
      </button>
    </>
  );
};

export default Comp;

Clic the button without any file.

Got this error on the server:

TypeError: filename is only supported when value is Blob or File

Expected Behavior

Simply work.

Actual Behavior

Gives error.

[cwohlman]

I think I have a fix for this in https://github.com/remix-run/web-std-io/pull/12 but wasn’t able to test it as I don’t have my environment fully set up.

[machour]

@mcansh seems to be working fine now 🎉

🍺  ~/test-3570 $ yarn dev
yarn run v1.22.19
$ remix dev
Watching Remix app in development mode...
💿 Built in 197ms
Remix App Server started at http://localhost:3000 (http://192.168.1.5:3000)
GET / 200 - - 23.356 ms
FormData {}
POST /?index=&_data=routes%2Findex 200 - - 14.282 ms
FormData {}
POST /?index=&_data=routes%2Findex 200 - - 6.654 ms
FormData {}