[fields] Replace asyncProxy with createAction for file handling

Author: x0k

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

@@ -8,7 +8,7 @@
 
 <script lang="ts">
   import { fileToDataURL } from "@/lib/file.js";
-  import { asyncProxy } from "@/lib/svelte.svelte";
+  import { abortPrevious, createAction } from "@/lib/action.svelte.js";
   import {
     makeEventHandlers,
     getErrors,
@@ -22,7 +22,11 @@
 
   import "../extra-widgets/file.js";
 
-  let { config, value = $bindable(), uiOption }: ComponentProps["fileField"] = $props();
+  let {
+    config,
+    value = $bindable(),
+    uiOption,
+  }: ComponentProps["fileField"] = $props();
 
   const ctx = getFormContext();
 
@@ -34,28 +38,45 @@
     validateField(ctx, config, value)
   );
 
-  const files = asyncProxy(
-    async (isRegOnly, signal) => {
-      if (!value || isRegOnly) {
-        return;
-      }
+  let lastValueUpdate: string | undefined;
+  const toValue = createAction({
+    combinator: abortPrevious,
+    async execute(
+      signal,
+      files: FileList | undefined
+    ): Promise<string | undefined> {
+      return files === undefined || files.length === 0
+        ? undefined
+        : fileToDataURL(signal, files[0]!);
+    },
+    onSuccess(result: string | undefined) {
+      lastValueUpdate = result;
+      value = result;
+    },
+  });
+
+  let files = $state.raw<FileList>();
+  const toFiles = createAction({
+    combinator: abortPrevious,
+    async execute(signal, value: string | undefined) {
       const data = new DataTransfer();
-      await addFile(ctx, signal, data, value);
+      if (value !== undefined) {
+        await addFile(ctx, signal, data, value);
+      }
       return data.files;
     },
-    async (v, signal) => {
-      if (v === undefined || v.length === 0) {
-        value = undefined;
-        return;
-      }
-      try {
-        value = await fileToDataURL(signal, v[0]!);
-      } catch (e) {
-        console.error("Failed to read file", e);
-      }
+    onSuccess(list: FileList) {
+      files = list;
     },
-    (v) => v
-  );
+  });
+
+  $effect(() => {
+    if (value === lastValueUpdate) {
+      return;
+    }
+    toValue.abort();
+    toFiles.run(value);
+  });
 
   const errors = $derived(getErrors(ctx, config.id));
 </script>
@@ -72,9 +93,15 @@
 >
   <Widget
     type="widget"
-    bind:value={files.value}
-    processing={files.inputProcessing}
-    loading={files.outputProcessing}
+    bind:value={
+      () => files,
+      (files) => {
+        toFiles.abort();
+        toValue.run(files);
+      }
+    }
+    processing={toValue.isProcessed}
+    loading={toFiles.isProcessed}
     {uiOption}
     {handlers}
     {errors}

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

@@ -8,7 +8,7 @@
 
 <script lang="ts">
   import { fileToDataURL } from "@/lib/file.js";
-  import { asyncProxy } from "@/lib/svelte.svelte";
+  import { abortPrevious, createAction } from "@/lib/action.svelte.js";
   import {
     makeEventHandlers,
     getErrors,
@@ -38,30 +38,53 @@
     validateField(ctx, config, value)
   );
 
-  const files = asyncProxy(
-    async (isRegOnly, signal) => {
-      if (!value || isRegOnly) {
-        return;
+  let lastValueUpdate: string[] | undefined;
+  const toValue = createAction({
+    combinator: abortPrevious,
+    async execute(
+      signal,
+      files: FileList | undefined
+    ): Promise<string[] | undefined> {
+      if (files === undefined) {
+        return undefined;
       }
+      return Promise.all(
+        Array.from(files).map((f) => fileToDataURL(signal, f))
+      );
+    },
+    onSuccess(result: string[] | undefined) {
+      lastValueUpdate = result;
+      value = result;
+    },
+  });
+
+  let files = $state.raw<FileList>();
+  const toFiles = createAction({
+    combinator: abortPrevious,
+    async execute(signal, value: string[] | undefined) {
       const data = new DataTransfer();
-      await addFiles(ctx, signal, data, value);
+      if (value !== undefined) {
+        await addFiles(ctx, signal, data, value);
+      }
       return data.files;
     },
-    async (v, signal) => {
-      if (v === undefined || v.length === 0) {
-        value = [];
-        return;
-      }
-      try {
-        value = await Promise.all(
-          Array.from(v).map((f) => fileToDataURL(signal, f))
-        );
-      } catch (e) {
-        console.error("Failed to read file", e);
-      }
+    onSuccess(list: FileList) {
+      files = list;
     },
-    (v) => v
-  );
+  });
+
+  $effect(() => {
+    if (
+      Array.isArray(value) &&
+      Array.isArray(lastValueUpdate) &&
+      value.length === lastValueUpdate.length &&
+      value.every((v, i) => v === lastValueUpdate![i])
+    ) {
+      return;
+    }
+    toValue.abort();
+    toFiles.run(value);
+  });
 
   const errors = $derived(getErrors(ctx, config.id));
 </script>
@@ -78,9 +101,15 @@
 >
   <Widget
     type="widget"
-    bind:value={files.value}
-    processing={files.inputProcessing}
-    loading={files.outputProcessing}
+    bind:value={
+      () => files,
+      (files) => {
+        toFiles.abort();
+        toValue.run(files);
+      }
+    }
+    processing={toValue.isProcessed}
+    loading={toFiles.isProcessed}
     {uiOption}
     {handlers}
     {errors}