feat: Warn users when submitting forms with files but no enctype="multipart/form-data" (#9888)

* fix: Package name keeps me from filtering with pnpm

* feat: Warn users when submitting a form containing a file without the correct enctype

* changeset

* Update packages/kit/src/runtime/app/forms.js

Co-authored-by: gtmnayan <[email protected]>

* style

* moar style tweaks

* better test skip

* Update .changeset/tasty-llamas-relate.md

Co-authored-by: Ben McCann <[email protected]>

* DRY out

* only warn once per submit

* Update .changeset/tasty-llamas-relate.md

Co-authored-by: Rich Harris <[email protected]>

---------

Co-authored-by: gtmnayan <[email protected]>
Co-authored-by: Ben McCann <[email protected]>
Co-authored-by: Rich Harris <[email protected]>
Co-authored-by: Rich Harris <[email protected]>

Author: 5 people

.changeset/tasty-llamas-relate.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+feat: warn users when enhancing forms with files but no `enctype="multipart/form-data"`

packages/kit/src/runtime/app/forms.js

@@ -28,13 +28,20 @@ function warn_on_access(old_name, new_name, call_location) {
 	);
 }
 
+/**
+ * Shallow clone an element, so that we can access e.g. `form.action` without worrying
+ * that someone has added an `<input name="action">` (https://github.com/sveltejs/kit/issues/7593)
+ * @template {HTMLElement} T
+ * @param {T} element
+ * @returns {T}
+ */
+function clone(element) {
+	return /** @type {T} */ (HTMLElement.prototype.cloneNode.call(element));
+}
+
 /** @type {import('$app/forms').enhance} */
 export function enhance(form_element, submit = () => {}) {
-	if (
-		DEV &&
-		/** @type {HTMLFormElement} */ (HTMLFormElement.prototype.cloneNode.call(form_element))
-			.method !== 'post'
-	) {
+	if (DEV && clone(form_element).method !== 'post') {
 		throw new Error('use:enhance can only be used on <form> fields with method="POST"');
 	}
 
@@ -71,15 +78,25 @@ export function enhance(form_element, submit = () => {}) {
 
 		const action = new URL(
 			// We can't do submitter.formAction directly because that property is always set
-			// We do cloneNode for avoid DOM clobbering - https://github.com/sveltejs/kit/issues/7593
 			event.submitter?.hasAttribute('formaction')
 				? /** @type {HTMLButtonElement | HTMLInputElement} */ (event.submitter).formAction
-				: /** @type {HTMLFormElement} */ (HTMLFormElement.prototype.cloneNode.call(form_element))
-						.action
+				: clone(form_element).action
 		);
 
 		const form_data = new FormData(form_element);
 
+		if (DEV && clone(form_element).enctype !== 'multipart/form-data') {
+			for (const value of form_data.values()) {
+				if (value instanceof File) {
+					// TODO 2.0: Upgrade to `throw Error`
+					console.warn(
+						'Your form contains <input type="file"> fields, but is missing the `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. This will be upgraded to an error in v2.0.'
+					);
+					break;
+				}
+			}
+		}
+
 		const submitter_name = event.submitter?.getAttribute('name');
 		if (submitter_name) {
 			form_data.append(submitter_name, event.submitter?.getAttribute('value') ?? '');

packages/kit/test/apps/basics/src/routes/actions/file-without-enctype/+page.server.js

@@ -0,0 +1,6 @@
+export const actions = {
+	default: async ({ request }) => {
+		const data = await request.formData();
+		console.log(data.get('file'));
+	}
+};

packages/kit/test/apps/basics/src/routes/actions/file-without-enctype/+page.svelte

@@ -0,0 +1,8 @@
+<script>
+	import { enhance } from '$app/forms';
+</script>
+
+<form method="POST" use:enhance>
+	<input name="file" type="file" />
+	<button type="submit">upload</button>
+</form>

packages/kit/test/apps/basics/test/test.js

@@ -828,6 +828,21 @@ test.describe('Matchers', () => {
 });
 
 test.describe('Actions', () => {
+	test('Submitting a form with a file input but no enctype="multipart/form-data" logs a warning', async ({
+		page,
+		javaScriptEnabled
+	}) => {
+		test.skip(!javaScriptEnabled, 'Skip when JavaScript is disabled');
+		test.skip(!process.env.DEV, 'Skip when not in dev mode');
+		await page.goto('/actions/file-without-enctype');
+		const log_promise = page.waitForEvent('console');
+		await page.click('button');
+		const log = await log_promise;
+		expect(log.text()).toBe(
+			'Your form contains <input type="file"> fields, but is missing the `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. This will be upgraded to an error in v2.0.'
+		);
+	});
+
 	test(`Accessing v2 deprecated properties results in a warning log`, async ({
 		page,
 		javaScriptEnabled