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

.changeset/tasty-llamas-relate.md

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

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

@@ -65,6 +65,21 @@ export function enhance(form, submit = () => {}) {
 
 		const data = new FormData(form);
 
+		if (
+			DEV &&
+			/** @type {HTMLFormElement} */ (HTMLElement.prototype.cloneNode.call(form)).enctype !==
+				'multipart/form-data'
+		) {
+			for (const value of 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.'
+					);
+				}
+			}
+		}
+
 		const submitter_name = event.submitter?.getAttribute('name');
 		if (submitter_name) {
 			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,20 @@ 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
+	}) => {
+		if (!javaScriptEnabled || !process.env.DEV) return;
+		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('Error props are returned', async ({ page, javaScriptEnabled }) => {
 		await page.goto('/actions/form-errors');
 		await page.click('button');

packages/kit/test/apps/dev-only/package.json

@@ -1,5 +1,5 @@
 {
-	"name": "test-basics",
+	"name": "test-dev-only",
 	"private": true,
 	"version": "0.0.2-next.0",
 	"scripts": {