Snapshots can now handle files.

Added options.config to Zod adapter.

Author: ciscoheat

CHANGELOG.md

@@ -9,8 +9,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
-- The `ActionResult` for success or failure is now added to the `onUpdate` event in the `result` property.
+- The `ActionResult` for success or failure is now added to the `onUpdate` event in the `result` property. Can be used to more easily access the `ActionData`.
 - Added a `fail` function, works the same as the SvelteKit fail, but removes files and sets `form.valid` to `false`.
+- `options.config` added to the Zod adapter, so the JSON Schema generation can be customized.
+
+### Fixed
+
+- [Snapshots](https://superforms.rocks/concepts/snapshots) couldn't handle files. They are now reverted to their default value when captured and restored in a snapshot, including the tainted state for these fields.
 
 ## [2.10.6] - 2024-03-20
 

src/lib/adapters/zod.ts

@@ -70,12 +70,12 @@ async function validate<T extends ZodValidation<ZodObjectTypes>>(
 
 function _zod<T extends ZodValidation<ZodObjectTypes>>(
 	schema: T,
-	options?: AdapterOptions<T>
+	options?: AdapterOptions<T> & { config?: Partial<Options> }
 ): ValidationAdapter<Infer<T>, InferIn<T>> {
 	return createAdapter({
 		superFormValidationLibrary: 'zod',
 		validate: async (data) => validate(schema, data),
-		jsonSchema: options?.jsonSchema ?? zodToJSONSchema(schema),
+		jsonSchema: options?.jsonSchema ?? zodToJSONSchema(schema, options?.config),
 		defaults: options?.defaults
 	});
 }

src/lib/client/proxies.ts

@@ -156,7 +156,7 @@ export function fileProxy<T extends Record<string, unknown>, Path extends FormPa
 		}
 
 		const dt = new DataTransfer();
-		if (file) dt.items.add(file);
+		if (file instanceof File) dt.items.add(file);
 		fileProxy.set(dt.files);
 	});
 
@@ -219,7 +219,7 @@ export function filesProxy<
 				return;
 			}
 
-			files.filter((f) => !!f).forEach((file) => dt.items.add(file));
+			files.filter((f) => f instanceof File).forEach((file) => dt.items.add(file));
 		}
 		filesProxy.set(dt.files);
 	});
@@ -235,7 +235,7 @@ export function filesProxy<
 				const dt = new DataTransfer();
 				if (Array.isArray(files))
 					files.forEach((file) => {
-						if (file) dt.items.add(file);
+						if (file instanceof File) dt.items.add(file);
 					});
 				filesProxy.set(dt.files);
 				formFiles.set(files);

src/lib/client/superForm.ts

@@ -1910,6 +1910,30 @@ export function superForm<
 		});
 	}
 
+	function removeFiles(formData: T) {
+		const paths: (string | number | symbol)[][] = [];
+
+		traversePaths(formData, (data) => {
+			if (data.value instanceof File) {
+				paths.push(data.path);
+				return 'skip';
+			} else if (
+				Array.isArray(data.value) &&
+				data.value.length &&
+				data.value.every((d) => d instanceof File)
+			) {
+				paths.push(data.path);
+				return 'skip';
+			}
+		});
+
+		if (!paths.length) return { data: formData, paths };
+
+		const data = clone(formData);
+		setPaths(data, paths, (path) => pathExists(initialForm.data, path)?.value);
+		return { data, paths };
+	}
+
 	///// Return the SuperForm object /////////////////////////////////
 
 	return {
@@ -1927,15 +1951,22 @@ export function superForm<
 		options: options as T extends T ? FormOptions<T, M> : never,
 
 		capture() {
+			const { data, paths } = removeFiles(Data.form);
+			let tainted = Data.tainted;
+			if (paths.length) {
+				tainted = clone(tainted) ?? {};
+				setPaths(tainted, paths, false);
+			}
+
 			return {
 				valid: Data.valid,
 				posted: Data.posted,
 				errors: Data.errors,
-				data: Data.form,
+				data,
 				constraints: Data.constraints,
 				message: Data.message,
 				id: Data.formId,
-				tainted: Data.tainted,
+				tainted,
 				shape: Data.shape
 			};
 		},

src/routes/(v2)/v2/capture-files/+page.server.ts

@@ -0,0 +1,23 @@
+import { zod } from '$lib/adapters/zod.js';
+import { message, superValidate } from '$lib/server/index.js';
+import { schema } from './schema.js';
+import { fail } from '@sveltejs/kit';
+
+export const load = async () => {
+	const form = await superValidate(zod(schema));
+	return { form };
+};
+
+export const actions = {
+	default: async ({ request }) => {
+		const formData = await request.formData();
+		console.log(formData);
+
+		const form = await superValidate(formData, zod(schema));
+		console.log(form);
+
+		if (!form.valid) return fail(400, { form });
+
+		return message(form, 'Posted OK!');
+	}
+};

src/routes/(v2)/v2/capture-files/+page.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+	import { fileProxy, superForm } from '$lib/client/index.js';
+	import SuperDebug from '$lib/client/SuperDebug.svelte';
+
+	export let data;
+
+	const { form, errors, tainted, message, enhance, capture, restore } = superForm(data.form, {
+		taintedMessage: false
+	});
+
+	//export const snapshot = { capture, restore };
+
+	let file = fileProxy(form, 'image');
+
+	const addFiles = async () => {
+		form.update(
+			($form) => {
+				$form.images = [new File(['123123'], 'test2.png'), new File(['123123'], 'test3.png')];
+				$form.undefImage = new File(['123123'], 'test4.png');
+				return $form;
+			},
+			{ taint: false }
+		);
+	};
+
+	export const snapshot = { capture, restore };
+</script>
+
+<SuperDebug data={{ $form, $tainted }} />
+
+{#if $message}<h4>{$message}</h4>{/if}
+
+<button on:click={() => addFiles()}>Add files</button>
+
+<form method="POST" enctype="multipart/form-data" use:enhance>
+	<label>
+		File: <input
+			type="file"
+			name="name"
+			bind:files={$file}
+			aria-invalid={$errors.image ? 'true' : undefined}
+		/>
+		{#if $errors.image}<span class="invalid">{$errors.image}</span>{/if}
+	</label>
+	<div>
+		<button>Submit</button>
+	</div>
+</form>
+
+<style lang="scss">
+	form {
+		margin: 2rem 0;
+
+		input {
+			background-color: #dedede;
+		}
+
+		.invalid {
+			color: crimson;
+		}
+	}
+</style>

src/routes/(v2)/v2/capture-files/schema.ts

@@ -0,0 +1,7 @@
+import { z } from 'zod';
+
+export const schema = z.object({
+	image: z.instanceof(File, { message: 'Please upload a file.' }).nullable(),
+	undefImage: z.instanceof(File, { message: 'Please upload a file.' }),
+	images: z.instanceof(File, { message: 'Please upload files.' }).array()
+});

src/tests/superForm.test.ts

@@ -329,6 +329,29 @@ describe('FormOptions', () => {
 	});
 });
 
+describe('Capture', () => {
+	it('should replace files with their default value, and empty file arrays', async () => {
+		const schema = z.object({
+			image: z.instanceof(File, { message: 'Please upload a file.' }).nullable(),
+			undefImage: z.instanceof(File, { message: 'Please upload a file.' }),
+			images: z.instanceof(File, { message: 'Please upload files.' }).array()
+		});
+
+		const validated = await superValidate(zod(schema));
+		const form = superForm(validated);
+
+		form.form.update(($form) => {
+			$form.image = new File(['123123'], 'test.png');
+			$form.images = [new File(['123123'], 'test2.png'), new File(['123123'], 'test3.png')];
+			$form.undefImage = new File(['123123'], 'test4.png');
+			return $form;
+		});
+
+		const captured = form.capture();
+		expect(captured.data).toStrictEqual({ image: null, images: [], undefImage: undefined });
+	});
+});
+
 ///// mockSvelte.ts (must be copy/pasted here) ////////////////////////////////
 
 import { vi } from 'vitest';