Fix file inputs (#248)

* [fields] Fix file input handling by snapshotting files before async validation

* [shadcn4] Fix unwanted file widget rerenders

Author: x0k

.changeset/bumpy-showers-trade.md

@@ -0,0 +1,5 @@
+---
+"@sjsf/shadcn4-theme": patch
+---
+
+Fix unwanted file widget rerenders

.changeset/open-hounds-dream.md

@@ -0,0 +1,5 @@
+---
+"@sjsf/form": patch
+---
+
+Fix file input handling by snapshotting files before async validation

packages/form/src/fields/extra/file.svelte

@@ -62,10 +62,11 @@
       if (files === undefined || files.length === 0) {
         return undefined;
       }
+      const file = files[0]!
       if (!(await validateFileList(signal, ctx, config, files))) {
         throw new FileListValidationError();
       }
-      return fileToDataURL(signal, files[0]!);
+      return fileToDataURL(signal, file);
     },
   });
 

packages/form/src/fields/extra/files.svelte

@@ -69,12 +69,11 @@
       if (files === undefined) {
         return undefined;
       }
+      const array = Array.from(files);
       if (!(await validateFileList(signal, ctx, config, files))) {
         throw new FileListValidationError();
       }
-      return Promise.all(
-        Array.from(files).map((f) => fileToDataURL(signal, f))
-      );
+      return Promise.all(array.map((f) => fileToDataURL(signal, f)));
     },
   });
 

packages/form/src/fields/extra/native-file.svelte

@@ -55,10 +55,11 @@
       if (files === undefined || files.length === 0) {
         return undefined;
       }
+      const file = files[0]!;
       if (!(await validateFileList(signal, ctx, config, files))) {
         throw new FileListValidationError();
       }
-      return files[0]!;
+      return file;
     },
     onSuccess(file: File | undefined) {
       value = file;

packages/form/src/fields/extra/native-files.svelte

@@ -55,10 +55,11 @@
       if (files === undefined) {
         return undefined;
       }
+      const array = Array.from(files)
       if (!(await validateFileList(signal, ctx, config, files))) {
         throw new FileListValidationError();
       }
-      return Array.from(files);
+      return array;
     },
     onSuccess(file: File[] | undefined) {
       value = file;

packages/shadcn4-theme/src/lib/theme/extra-widgets/file.svelte

@@ -22,10 +22,10 @@
 
 <Input
 	{...inputAttributes(ctx, config, 'file', handlers, {
-		multiple,
-		'data-loading': loading,
-		'data-processing': processing
+		multiple
 	})}
 	bind:files={value}
 	type="file"
+	data-loading={loading}
+	data-processing={processing}
 />