Fixed immediate file validation.

More explicit assignment logic for file proxies.

Author: ciscoheat

src/lib/client/proxies.ts

@@ -167,17 +167,20 @@ export function fileProxy<T extends Record<string, unknown>, Path extends FormPa
 		set(file: FileList | File | Nullable<T, Path> | Optional<T, Path>) {
 			if (!browser) return;
 
-			if (!file || file instanceof File) {
+			if (!file) {
 				const dt = new DataTransfer();
-				if (file) dt.items.add(file);
-				else formFile.set(file as File);
-				file = dt.files;
+				fileProxy.set(dt.files);
+				formFile.set(file as File);
+			} else if (file instanceof File) {
+				const dt = new DataTransfer();
+				dt.items.add(file);
+				fileProxy.set(dt.files);
+				formFile.set(file);
+			} else if (file instanceof FileList) {
+				fileProxy.set(file);
+				if (file.length > 0) formFile.set(file.item(0) as File);
+				else formFile.set(initialValue as File);
 			}
-
-			fileProxy.set(file);
-
-			if (file.length > 0) formFile.set(file.item(0) as File);
-			else formFile.set(initialValue as File);
 		},
 		update() {
 			throw new SuperFormError('You cannot update a fileProxy, only set it.');
@@ -201,7 +204,9 @@ export function filesProxy<
 	T extends Record<string, unknown>,
 	Path extends FormPathArrays<T, File[]>
 >(form: Writable<T> | SuperForm<T>, path: Path, options?: ProxyOptions) {
-	const formFiles = fieldProxy(form, path as any, options) as FieldProxy<File[]>;
+	const formFiles = fieldProxy(form, path as any, options) as FieldProxy<
+		File[] | Nullable<T, Path> | Optional<T, Path>
+	>;
 	const filesProxy = writable<FileList>(browser ? new DataTransfer().files : ({} as FileList));
 
 	formFiles.subscribe((files) => {
@@ -225,25 +230,24 @@ export function filesProxy<
 		},
 		set(files: FileList | File[] | Nullable<T, Path> | Optional<T, Path>) {
 			if (!browser) return;
+
 			if (!(files instanceof FileList)) {
 				const dt = new DataTransfer();
 				if (Array.isArray(files))
 					files.forEach((file) => {
 						if (file) dt.items.add(file);
 					});
-				else formFiles.set(files as File[]);
-				files = dt.files;
-			}
-
-			const newFiles = files;
-			filesProxy.set(newFiles);
-
-			const output: File[] = [];
-			for (let i = 0; i < newFiles.length; i++) {
-				const file = newFiles.item(i);
-				if (file) output.push(file);
+				filesProxy.set(dt.files);
+				formFiles.set(files);
+			} else {
+				const output: File[] = [];
+				for (let i = 0; i < files.length; i++) {
+					const file = files.item(i);
+					if (file) output.push(file);
+				}
+				filesProxy.set(files);
+				formFiles.set(output);
 			}
-			formFiles.set(output);
 		},
 		update(updater: Updater<File[] | Nullable<T, Path> | Optional<T, Path>>) {
 			filesStore.set(updater(get(formFiles)));

src/lib/client/superForm.ts

@@ -1058,7 +1058,21 @@ export function superForm<
 	let NextChange: FullChangeEvent | null = null;
 
 	function NextChange_setHtmlEvent(event: FullChangeEvent) {
-		NextChange = event;
+		// For File inputs, if only paths are available, use that instead of replacing
+		// (fileProxy updates causes this)
+		if (
+			NextChange &&
+			event &&
+			Object.keys(event).length == 1 &&
+			event.paths?.length &&
+			NextChange.target &&
+			NextChange.target instanceof HTMLInputElement &&
+			NextChange.target.type.toLowerCase() == 'file'
+		) {
+			NextChange.paths = event.paths;
+		} else {
+			NextChange = event;
+		}
 		// Wait for on:input to provide additional information
 		setTimeout(() => {
 			Form_clientValidation(NextChange);

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

@@ -15,7 +15,7 @@
 	const { form, tainted, message, enhance, errors } = superform;
 
 	const files = filesFieldProxy(superform, 'images');
-	const values = files.values;
+	const { values, valueErrors } = files;
 
 	const file = fileProxy(form, 'image');
 
@@ -111,13 +111,13 @@
 				name="images"
 				type="file"
 			/>
-			{#if Object.keys($errors.images ?? {}).length}
-				<ul class="invalid">
-					{#each Object.keys($errors.images ?? {}) as error, i}
+			<ul class="invalid">
+				{#each $valueErrors as error, i}
+					{#if error}
 						<li>Image {i + 1}: {error}</li>
-					{/each}
-				</ul>
-			{/if}
+					{/if}
+				{/each}
+			</ul>
 		</label>
 		<label>
 			Upload one file, max 10 Kb: <input