More file upload fixes.

Author: ciscoheat

CHANGELOG.md

@@ -5,7 +5,7 @@ Headlines: Added, Changed, Deprecated, Removed, Fixed, Security
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## [2.10.2] - 2024-03-18
+## [2.10.3] - 2024-03-18
 
 ### Added
 

src/lib/client/proxies.ts

@@ -207,7 +207,15 @@ export function filesProxy<
 	formFiles.subscribe((files) => {
 		if (!browser) return;
 		const dt = new DataTransfer();
-		if (files) files.forEach((file) => dt.items.add(file));
+
+		if (Array.isArray(files)) {
+			if (files.length && files.every((f) => !f)) {
+				formFiles.set([]);
+				return;
+			}
+
+			files.filter((f) => !!f).forEach((file) => dt.items.add(file));
+		}
 		filesProxy.set(dt.files);
 	});
 
@@ -219,7 +227,10 @@ export function filesProxy<
 			if (!browser) return;
 			if (!(files instanceof FileList)) {
 				const dt = new DataTransfer();
-				if (Array.isArray(files)) files.forEach((file) => dt.items.add(file));
+				if (Array.isArray(files))
+					files.forEach((file) => {
+						if (file) dt.items.add(file);
+					});
 				else formFiles.set(files as File[]);
 				files = dt.files;
 			}

src/lib/client/superForm.ts

@@ -1419,7 +1419,7 @@ export function superForm<
 						rebind({
 							form: newForm as SuperValidated<T, M, In>,
 							untaint: successResult,
-							keepFiles: true
+							keepFiles: !Form_shouldReset(true, true)
 						});
 					}
 				}

src/lib/formData.ts

@@ -208,7 +208,8 @@ function _parseFormData<T extends Record<string, unknown>>(
 		}
 
 		if (info.types.includes('array') || info.types.includes('set')) {
-			const items = property.items;
+			// If no items, it could be a union containing the info
+			const items = property.items ?? (info.union?.length == 1 ? info.union[0] : undefined);
 			if (!items || typeof items == 'boolean' || (Array.isArray(items) && items.length != 1)) {
 				throw new SchemaError(
 					'Arrays must have a single "items" property that defines its type.',
@@ -222,7 +223,11 @@ function _parseFormData<T extends Record<string, unknown>>(
 			const arrayInfo = schemaInfo(arrayType, info.isOptional, [key]);
 			if (!arrayInfo) continue;
 
+			// Check for empty files being posted (and filtered)
+			const isFileArray = entries.length && entries.some((e) => e && typeof e !== 'string');
 			const arrayData = entries.map((e) => parseSingleEntry(key, e, arrayInfo));
+			if (isFileArray && arrayData.every((file) => !file)) arrayData.length = 0;
+
 			output[key] = info.types.includes('set') ? new Set(arrayData) : arrayData;
 		} else {
 			output[key] = parseSingleEntry(key, entries[entries.length - 1], info);

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

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

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

@@ -9,7 +9,8 @@
 	let show = true;
 
 	const superform = superForm(data.form, {
-		validators: zod(schema)
+		validators: zod(schema),
+		resetForm: true
 	});
 	const { form, tainted, message, enhance, errors } = superform;
 
@@ -69,12 +70,14 @@
 	function clearFilesDirectly() {
 		// @ts-expect-error Not optional
 		$form.images = undefined;
+		// @ts-expect-error Not nullable
 		$form.images = null;
 	}
 
 	function clearFilesWithProxy() {
 		// @ts-expect-error Not optional
 		files.values.set(undefined);
+		// @ts-expect-error Not nullable
 		files.values.set(null);
 	}
 
@@ -114,7 +117,7 @@
 			Upload one file, max 10 Kb: <input
 				bind:files={$file}
 				accept="image/png, image/jpeg"
-				name="images"
+				name="image"
 				type="file"
 			/>
 			{#if $errors.image}

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

@@ -3,11 +3,10 @@ import { z } from 'zod';
 export const schema = z.object({
 	images: z
 		.custom<File>()
-		.refine((f) => f instanceof File && f.size < 10000, 'Max 10Kb upload size.')
-		.array()
-		.nullable(),
+		.refine((f) => f instanceof File && f.size < 100000, 'Max 100Kb upload size.')
+		.array(),
 	image: z
 		.instanceof(File, { message: 'Please upload a file.' })
-		.refine((f) => f.size < 10000, 'Max 10Kb upload size.')
+		.refine((f) => f.size < 100000, 'Max 100Kb upload size.')
 		.optional()
 });