fix: add Content-Type header for POST requests made by enhance (#12198)

* test: Add test cases for `enctype` / `formenctype` attributes for `/actions/enhance/` test page

* fix: respect `enctype`/`formenctype` HTML form attributes from form + set `application/x-www-form-urlencoded` as a default `Content-Type` for `POST` requests made by `enhance`

* chore: Add a new changelog entry

* fix: Improve RegEx

Co-authored-by: Tee Ming <[email protected]>

* refactor: Use `Headers` class instead of an regular object

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

* fix: Remove unneeded console log from test code

Co-authored-by: Tee Ming <[email protected]>

* fix: Apply suggestions from code review for test files

Co-authored-by: Tee Ming <[email protected]>

* chore: Linting

* test: Check default `ContentType` value for request made by `use:enhance`

* test: Remove unneeded test

* refactor: Better logic for handling manual `Content-Type` set by `enctype` / `formenctype`

* chore: Formatting

* chore: Update changeset

* Delete .changeset/moody-apricots-kiss.md

* separate changesets

* cleanup

* move closer to other button tests

---------

Co-authored-by: Aleksander Grygier <[email protected]>
Co-authored-by: Tee Ming <[email protected]>

Author: 3 people

.changeset/hot-papayas-jam.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+fix: respect HTML attributes `enctype` and `formenctype` for forms with `use:enhance`

.changeset/strange-planets-fly.md

@@ -0,0 +1,5 @@
+---
+"@sveltejs/kit": patch
+---
+
+fix: set default `Content-Type` header to `application/x-www-form-urlencoded` for `POST` form submissions with `use:enhance` to align with native form behaviour

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

@@ -124,9 +124,13 @@ export function enhance(form_element, submit = () => {}) {
 				: 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);
 
-		if (DEV && clone(form_element).enctype !== 'multipart/form-data') {
+		if (DEV && enctype !== 'multipart/form-data') {
 			for (const value of form_data.values()) {
 				if (value instanceof File) {
 					throw new Error(
@@ -161,14 +165,31 @@ export function enhance(form_element, submit = () => {}) {
 		let result;
 
 		try {
+			const headers = new Headers({
+				accept: 'application/json',
+				'x-sveltekit-action': 'true'
+			});
+
+			// do not explicitly set the `Content-Type` header when sending `FormData`
+			// or else it will interfere with the browser's header setting
+			// see https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest_API/Using_FormData_Objects#sect4
+			if (enctype !== 'multipart/form-data') {
+				headers.set(
+					'Content-Type',
+					/^(:?application\/x-www-form-urlencoded|text\/plain)$/.test(enctype)
+						? enctype
+						: 'application/x-www-form-urlencoded'
+				);
+			}
+
+			// @ts-expect-error `URLSearchParams(form_data)` is kosher, but typescript doesn't know that
+			const body = enctype === 'multipart/form-data' ? form_data : new URLSearchParams(form_data);
+
 			const response = await fetch(action, {
 				method: 'POST',
-				headers: {
-					accept: 'application/json',
-					'x-sveltekit-action': 'true'
-				},
+				headers,
 				cache: 'no-store',
-				body: form_data,
+				body,
 				signal: controller.signal
 			});
 

packages/kit/test/apps/basics/src/routes/actions/enhance/+page.server.js

@@ -52,6 +52,17 @@ export const actions = {
 			path: '/actions/enhance'
 		});
 
+		return {};
+	},
+	send_file: async ({ request }) => {
+		const data = await request.formData();
+		const file = data.get('file');
+
+		if (file instanceof File) {
+			return {
+				result: 'file name:' + file.name
+			};
+		}
 		return {};
 	}
 };

packages/kit/test/apps/basics/src/routes/actions/enhance/+page.svelte

@@ -57,3 +57,9 @@
 		<button formmethod="dialog">Cancel</button>
 	</form>
 </dialog>
+
+<form action="?/send_file" method="post" use:enhance>
+	<input type="file" name="file" class="form-file-input" />
+
+	<button class="form-file-submit" formenctype="multipart/form-data" type="submit">Submit</button>
+</form>

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

@@ -1138,6 +1138,57 @@ test.describe('Actions', () => {
 		);
 	});
 
+	test('use:enhance button with formenctype', async ({ page }) => {
+		await page.goto('/actions/enhance');
+
+		expect(await page.textContent('pre.formdata1')).toBe(JSON.stringify(null));
+		expect(await page.textContent('pre.formdata2')).toBe(JSON.stringify(null));
+
+		const fileInput = page.locator('input[type="file"].form-file-input');
+
+		await fileInput.setInputFiles({
+			name: 'test-file.txt',
+			mimeType: 'text/plain',
+			buffer: Buffer.from('this is test')
+		});
+
+		await page.locator('button.form-file-submit').click();
+
+		await expect(page.locator('pre.formdata1')).toHaveText(
+			JSON.stringify({ result: 'file name:test-file.txt' })
+		);
+		await expect(page.locator('pre.formdata2')).toHaveText(
+			JSON.stringify({ result: 'file name:test-file.txt' })
+		);
+	});
+
+	test('use:enhance has `application/x-www-form-urlencoded` as default value for `ContentType` request header', async ({
+		page,
+		javaScriptEnabled
+	}) => {
+		test.skip(!javaScriptEnabled, 'skip when JavaScript is disabled');
+
+		await page.goto('/actions/enhance');
+
+		expect(await page.textContent('pre.formdata1')).toBe(JSON.stringify(null));
+		expect(await page.textContent('pre.formdata2')).toBe(JSON.stringify(null));
+
+		await page.locator('input[name="username"]').fill('foo');
+
+		const [request] = await Promise.all([
+			page.waitForRequest('/actions/enhance?/login'),
+			page.locator('button.form1').click()
+		]);
+
+		const requestHeaders = await request.allHeaders();
+
+		expect(requestHeaders['content-type']).toBe('application/x-www-form-urlencoded');
+
+		await expect(page.locator('pre.formdata1')).toHaveText(JSON.stringify({ result: 'foo' }));
+		await expect(page.locator('pre.formdata2')).toHaveText(JSON.stringify({ result: 'foo' }));
+		await expect(page.locator('input[name="username"]')).toHaveValue('');
+	});
+
 	test('use:enhance does not clear form on second submit', async ({ page }) => {
 		await page.goto('/actions/enhance');