sveltejs/kit · error · Error

Your form contains <input type="file"> fields, but is missin

Error message

Your form contains <input type="file"> fields, but is missing the necessary `enctype="multipart/form-data"` attribute. This will lead to inconsistent behavior between enhanced and native forms. For more details, see https://github.com/sveltejs/kit/issues/9819.

What it means

When a form contains file inputs but lacks enctype="multipart/form-data", the native (non-enhanced) submission and the enhanced FormData-based submission send data differently. SvelteKit throws in dev to surface this inconsistency, which otherwise silently corrupts or drops uploads depending on enhancement.

Source

Thrown at packages/kit/src/runtime/app/forms/client.js:132

		event.preventDefault();

		const action = new URL(
			// We can't do submitter.formAction directly because that property is always set
			event.submitter?.hasAttribute('formaction')
				? /** @type {HTMLButtonElement | HTMLInputElement} */ (event.submitter).formAction
				: clone(form_element).action
		);

		const enctype = event.submitter?.hasAttribute('formenctype')
			? /** @type {HTMLButtonElement | HTMLInputElement} */ (event.submitter).formEnctype
			: clone(form_element).enctype;

		const form_data = new FormData(form_element, event.submitter);

		if (DEV && enctype !== 'multipart/form-data') {
			for (const value of form_data.values()) {
				if (value instanceof File) {
					throw new Error(
						'Your form contains <input type="file"> fields, but is missing the necessary `enctype="multipart/form-data"` attribute. This will lead to inconsistent behavior between enhanced and native forms. For more details, see https://github.com/sveltejs/kit/issues/9819.'
					);
				}
			}
		}

		const controller = new AbortController();

		let cancelled = false;
		const cancel = () => (cancelled = true);

		const callback =
			(await submit({
				action,
				cancel,
				controller,
				formData: form_data,
				formElement: form_element,

View on GitHub (pinned to 03f1687fe6)

Solutions

1. Add enctype="multipart/form-data" to the <form> tag containing the file input
2. Verify the form method is POST (required for multipart)
3. If files are optional, still set multipart enctype so enhanced and native submissions agree
4. Reference issue #9819 for the underlying behavior differences

Example fix

// before
<form method="POST" use:enhance>
  <input type="file" name="doc">
// after
<form method="POST" enctype="multipart/form-data" use:enhance>
  <input type="file" name="doc">

if (form.querySelector('input[type=file]') && form.enctype !== 'multipart/form-data') {
  form.setAttribute('enctype', 'multipart/form-data');
}

const hasFilesWithoutMultipart = (form) =>
  !!form.querySelector('input[type=file]') && form.enctype !== 'multipart/form-data';

try {
  await handleSubmit(form);
} catch (e) {
  if (e.message.includes('multipart/form-data')) {
    form.setAttribute('enctype', 'multipart/form-data');
  } else throw e;
}

When it happens

Trigger: In DEV, handle_submit builds FormData from the form, enctype is not multipart/form-data, and any FormData value is a File instance (i.e. the form has <input type="file"> used during submission).

Common situations: Adding an upload input to an existing form without updating enctype (the HTML default is application/x-www-form-urlencoded), forgetting the attribute after copying a form snippet, or conditionally rendered file inputs.

Related errors

• use:enhance can only be used on <form> fields with method="P
• A form object can only be attached to a single `<form>` elem
• Could not deserialize binary form: file offset table too sho
• Could not deserialize binary form: invalid file offset table
• Could not deserialize binary form: invalid file metadata

AI-assisted analysis of sveltejs/kit@03f1687fe6 (2026-09-02). Data as JSON: /api/errors/b55ce54a3bc5aa1b. Report an issue: GitHub.