sveltejs/kit · error

Cannot mix and match file and non-file inputs under the same

Error message

Cannot mix and match file and non-file inputs under the same name ("${element.name}")

What it means

In dev mode, SvelteKit inspects all inputs sharing a form control's name when a remote form is submitted. If some inputs with that name are type=file and others are not, the FormData serialization would be inconsistent between enhanced and native submissions, so it throws. This check only runs when DEV is true.

Source

Thrown at packages/kit/src/runtime/client/remote-functions/form.svelte.js:525

				const is_file = element.type === 'file';

				if (field.is_array) {
					let value;

					if (element.tagName === 'SELECT') {
						value = Array.from(
							element.querySelectorAll('option:checked'),
							(e) => /** @type {HTMLOptionElement} */ (e).value
						);
					} else {
						const elements = /** @type {HTMLInputElement[]} */ (
							Array.from(form.querySelectorAll(`[name="${name}"]`))
						);

						if (DEV) {
							for (const e of elements) {
								if ((e.type === 'file') !== is_file) {
									throw new Error(
										`Cannot mix and match file and non-file inputs under the same name ("${element.name}")`
									);
								}
							}
						}

						value = is_file
							? elements.map((input) => Array.from(input.files ?? [])).flat()
							: elements.map((element) => element.value);
						if (element.type === 'checkbox') {
							value = /** @type {string[]} */ (value.filter((_, i) => elements[i].checked));
						}
					}

					set_nested_value(input, field, is_file ? value : coerce_form_value(field.type, value));
				} else if (is_file) {
					if (DEV && element.multiple) {
						throw new Error(

View on GitHub (pinned to 03f1687fe6)

Solutions

1. Give the file input a unique name distinct from non-file inputs
2. Ensure every input sharing a given name has the same type (all file or all non-file)
3. Remove the duplicate conditional input and use one input whose type/accept changes instead

Example fix

// before
<input name="attachment" type="text" />
{#if mode === 'upload'}
  <input name="attachment" type="file" />
{/if}
// after
<input name="attachment" type="text" />
{#if mode === 'upload'}
  <input name="attachment-file" type="file" />
{/if}

function hasMixedInputTypes(form, name) {
  const els = Array.from(form.querySelectorAll(`[name="${name}"]`));
  return els.some((e) => e.type === 'file') && els.some((e) => e.type !== 'file');
}
// call before submit; if true, rename inputs

const isFileInput = (el) => el instanceof HTMLInputElement && el.type === 'file';

When it happens

Trigger: Calling a remote form's submit/handle_input while the rendered <form> has multiple input elements sharing one name where at least one is type="file" and at least one is not (e.g. a file input rendered conditionally alongside a text input with the same name).

Common situations: Conditionally rendering either a text or a file input under the same name; copying a name attribute across fields; dynamic forms where field type changes based on state.

Related errors

• Can only use the `multiple` attribute when `name` includes a
• `$` is used to collect all FormData validation issues and ca
• Your form contains <input type="file"> fields, but is missin
• exports is not available in dev mode
• Cannot call submit() before the form is attached

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