<form enctype=multipart/form-data> is needed for files, but use:enhance masks it

[Rich-Harris]

Describe the bug

If you have a form like this...

<form method="POST" use:enhance>
  <input name="file" type="file" required />
  <button>upload</button>
</form>

...then submitting the form will work correctly under normal conditions — the action will receive a FormData object with a file value of type File:

export const actions = {
  default: async ({ request }) => {
    const data = await request.formData();
    console.log(data.get('file')); // File {...}
  }
};

If you disable JavaScript, it works differently — data.get('file') will be a string (the file's name) instead of a File object. This is because the form needs enctype="multipart/form-data".

I'm not exactly sure what we should do here. If we explicitly set the content-type to form.enctype when we submit the form inside enhance, we still get different behaviour — file will be null for a JS submission but will still be a string for a no-JS submission. This platform really is an absolute clusterfuck.

I think the best thing to do is probably to print a warning in dev mode if the FormData object includes files and form.enctype !== 'multipart/form-data'. For SvelteKit 2 we could upgrade that to an error, but for now it would be a breaking change that is probably unwise.

Reproduction

later when I'm less busy

Logs

No response

System Info

latest

Severity

annoyance

Additional Information

No response