@multiplatform.one/frappe-ui 7.4.1 → 7.5.0

package/src/fields/FileUpload.tsx

@@ -3,12 +3,16 @@ import { Skeleton } from "@multiplatform.one/forms";
 import { FileIcon, UploadIcon, XIcon } from "@phosphor-icons/react";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
 import type React from "react";
-import { useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Spinner } from "@multiplatform.one/forms";
 import { Button, Image, Label, Text, XStack, YStack } from "tamagui";
 import { useFrappeConfig } from "../FrappeProvider";
 
+export type FrappeFileUploadHandler = (
+  file: File,
+  ctx: { onProgress: (percent: number) => void; signal: AbortSignal },
+) => Promise<string>;
+
 export interface FileUploadProps {
   label?: string;
   value?: string;
@@ -24,6 +28,68 @@ export interface FileUploadProps {
   readOnly?: boolean;
   skeleton?: boolean;
   compact?: boolean;
+  /**
+   * Override the File-doctype transport. Same progress/abort contract as
+   * forms FileUpload; resolve with the committed URL. Tests and custom
+   * desks inject this; the default reads the file and inserts a File doc.
+   */
+  onUpload?: FrappeFileUploadHandler;
+}
+
+type TransferStatus = "uploading" | "failed";
+
+type TransferState = {
+  file: File;
+  status: TransferStatus;
+  progress: number;
+  problem?: string;
+  action?: string;
+  controller: AbortController;
+};
+
+function formatFileSize(bytes: number): string {
+  if (bytes === 0) return "0 Bytes";
+  const k = 1024;
+  const sizes = ["Bytes", "KB", "MB", "GB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return `${Number.parseFloat((bytes / k ** i).toFixed(2))} ${sizes[i]}`;
+}
+
+function readFileAsDataUrl(
+  file: File,
+  { onProgress, signal }: { onProgress: (percent: number) => void; signal: AbortSignal },
+): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    const onAbort = () => {
+      reader.abort();
+      reject(new DOMException("Aborted", "AbortError"));
+    };
+    if (signal.aborted) {
+      onAbort();
+      return;
+    }
+    signal.addEventListener("abort", onAbort);
+    reader.onprogress = (event) => {
+      if (event.lengthComputable && event.total > 0) {
+        onProgress(Math.round((event.loaded / event.total) * 100));
+      }
+    };
+    reader.onload = () => {
+      signal.removeEventListener("abort", onAbort);
+      onProgress(100);
+      resolve(reader.result as string);
+    };
+    reader.onerror = () => {
+      signal.removeEventListener("abort", onAbort);
+      reject(new Error("Failed to read file"));
+    };
+    reader.onabort = () => {
+      signal.removeEventListener("abort", onAbort);
+      reject(new DOMException("Aborted", "AbortError"));
+    };
+    reader.readAsDataURL(file);
+  });
 }
 
 export function FileUpload({
@@ -41,16 +107,21 @@ export function FileUpload({
   readOnly = false,
   skeleton = false,
   compact = false,
+  onUpload,
 }: FileUploadProps) {
   const { t } = useTranslation();
   const { knobProps } = useResolvedKnobs();
   const config = useFrappeConfig();
   const fileInputRef = useRef<HTMLInputElement>(null);
-  const [uploading, setUploading] = useState(false);
+  const [transfer, setTransfer] = useState<TransferState | null>(null);
   const [error, setError] = useState<string | null>(null);
+  const transferRef = useRef<TransferState | null>(null);
+  const onUploadRef = useRef(onUpload);
+  onUploadRef.current = onUpload;
   const isLocked = disabled || readOnly;
   const minHeight = compact ? 40 : 56;
   const previewSize = compact ? 120 : 200;
+  const uploading = transfer?.status === "uploading";
 
   const finalBaseURL = baseURL ?? config?.baseURL ?? "";
   const finalConfig = finalBaseURL
@@ -75,7 +146,90 @@ export function FileUpload({
     fields: ["name", "file_name", "file_url", "is_private"],
   });
 
-  const handleFileSelect = async (event: React.ChangeEvent<HTMLInputElement>) => {
+  useEffect(() => {
+    return () => {
+      transferRef.current?.controller.abort();
+    };
+  }, []);
+
+  const defaultUpload = useCallback<FrappeFileUploadHandler>(
+    async (file, ctx) => {
+      const base64 = await readFileAsDataUrl(file, ctx);
+      if (fileCollection) {
+        const tx = fileCollection.insert({
+          doctype: "File",
+          name: `new-${Date.now()}`,
+          file_name: file.name,
+          file_url: base64,
+          is_private: 0,
+        });
+        await tx.isPersisted.promise;
+      }
+      return base64;
+    },
+    [fileCollection],
+  );
+
+  const runTransfer = useCallback(
+    async (file: File, controller: AbortController) => {
+      const upload = onUploadRef.current ?? defaultUpload;
+      try {
+        const url = await upload(file, {
+          onProgress: (percent) => {
+            const n = Math.min(100, Math.max(0, Math.round(Number(percent) || 0)));
+            setTransfer((prev) => (prev ? { ...prev, progress: n } : prev));
+          },
+          signal: controller.signal,
+        });
+        if (controller.signal.aborted) return;
+        setTransfer(null);
+        transferRef.current = null;
+        setError(null);
+        onChange(url);
+      } catch (err) {
+        if (
+          controller.signal.aborted ||
+          (err instanceof DOMException && err.name === "AbortError")
+        ) {
+          return;
+        }
+        const problem = err instanceof Error && err.message ? err.message : t("Upload failed");
+        setTransfer((prev) =>
+          prev
+            ? {
+                ...prev,
+                status: "failed",
+                problem,
+                action: t("Try again or remove the file"),
+              }
+            : prev,
+        );
+        // Per-file failure stays on the row (DG-VAL-04). Do not clear `value`.
+        setError(null);
+      }
+    },
+    [defaultUpload, onChange, t],
+  );
+
+  const startTransfer = useCallback(
+    (file: File) => {
+      transferRef.current?.controller.abort();
+      const controller = new AbortController();
+      const next: TransferState = {
+        file,
+        status: "uploading",
+        progress: 0,
+        controller,
+      };
+      transferRef.current = next;
+      setTransfer(next);
+      setError(null);
+      void runTransfer(file, controller);
+    },
+    [runTransfer],
+  );
+
+  const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
     if (isLocked) return;
     const file = event.target.files?.[0];
     if (!file) return;
@@ -85,55 +239,36 @@ export function FileUpload({
       return;
     }
 
-    setError(null);
-    setUploading(true);
-
-    try {
-      const reader = new FileReader();
-      reader.onload = async (e) => {
-        try {
-          const base64 = e.target?.result as string;
-
-          if (fileCollection) {
-            const tx = fileCollection.insert({
-              doctype: "File",
-              name: `new-${Date.now()}`,
-              file_name: file.name,
-              file_url: base64,
-              is_private: 0,
-            });
-            await tx.isPersisted.promise;
-          }
-          onChange(base64);
-        } catch (err) {
-          setError(err instanceof Error ? err.message : t("Upload failed"));
-        } finally {
-          setUploading(false);
-        }
-      };
+    startTransfer(file);
+  };
 
-      reader.onerror = () => {
-        setError(t("Failed to read file"));
-        setUploading(false);
-      };
+  const handleCancel = () => {
+    transferRef.current?.controller.abort();
+    transferRef.current = null;
+    setTransfer(null);
+    if (fileInputRef.current) fileInputRef.current.value = "";
+  };
 
-      reader.readAsDataURL(file);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : t("Upload failed"));
-      setUploading(false);
-    }
+  const handleRetry = () => {
+    if (!transfer) return;
+    startTransfer(transfer.file);
   };
 
   const handleRemove = () => {
     if (isLocked) return;
+    handleCancel();
     onChange("");
     if (fileInputRef.current) {
       fileInputRef.current.value = "";
     }
   };
 
+  const handleRemoveFailed = () => {
+    handleCancel();
+  };
+
   const handleClick = () => {
-    if (isLocked) return;
+    if (isLocked || uploading) return;
     fileInputRef.current?.click();
   };
 
@@ -164,17 +299,101 @@ export function FileUpload({
         disabled={isLocked || uploading}
       />
 
-      {!value ? (
+      {transfer ? (
+        <YStack
+          data-file-upload="transfer"
+          data-transfer-status={transfer.status}
+          {...knobProps.gap}
+          {...knobProps.panelPadding}
+        >
+          <XStack gap="$2" alignItems="center">
+            <FileIcon size={20} />
+            <YStack flex={1} gap="$1">
+              <Text numberOfLines={1}>{transfer.file.name}</Text>
+              <Text numberOfLines={1} fontWeight="700" fontSize="$2">
+                {formatFileSize(transfer.file.size)}
+              </Text>
+            </YStack>
+            {transfer.status === "uploading" ? (
+              <Button
+                size="$2"
+                variant="outlined"
+                icon={XIcon}
+                aria-label={t("Cancel {{name}}", { name: transfer.file.name })}
+                disabled={isLocked}
+                onPress={handleCancel}
+                {...knobProps.borderRadius}
+              >
+                {t("Cancel")}
+              </Button>
+            ) : null}
+          </XStack>
+          {transfer.status === "uploading" ? (
+            <YStack
+              data-file-upload="progress"
+              role="progressbar"
+              aria-valuemin={0}
+              aria-valuemax={100}
+              aria-valuenow={transfer.progress}
+              aria-label={t("Uploading {{name}}", { name: transfer.file.name })}
+              height={11}
+              width="100%"
+              borderRadius={1000}
+              backgroundColor="$color4"
+              overflow="hidden"
+            >
+              <YStack height="100%" width={`${transfer.progress}%`} backgroundColor="$color11" />
+            </YStack>
+          ) : null}
+          {transfer.status === "failed" ? (
+            <YStack {...knobProps.gap}>
+              <Text color="$red11" fontSize="$2">
+                {transfer.problem}
+              </Text>
+              <Text color="$color11" fontSize="$2">
+                {transfer.action}
+              </Text>
+              <XStack {...knobProps.gap}>
+                <Button
+                  size="$2"
+                  variant="outlined"
+                  aria-label={t("Retry {{name}}", { name: transfer.file.name })}
+                  disabled={isLocked}
+                  onPress={handleRetry}
+                  {...knobProps.borderRadius}
+                >
+                  {t("Retry")}
+                </Button>
+                <Button
+                  size="$2"
+                  variant="outlined"
+                  icon={XIcon}
+                  aria-label={t("Remove {{name}}", { name: transfer.file.name })}
+                  disabled={isLocked}
+                  onPress={handleRemoveFailed}
+                  {...knobProps.borderRadius}
+                >
+                  {t("Remove")}
+                </Button>
+              </XStack>
+            </YStack>
+          ) : null}
+        </YStack>
+      ) : null}
+
+      {!value && !transfer ? (
         <Button
           size="$3"
-          icon={uploading ? Spinner : UploadIcon}
-          disabled={isLocked || uploading}
+          icon={UploadIcon}
+          disabled={isLocked}
           onPress={handleClick}
           {...knobProps.borderRadius}
         >
-          {uploading ? t("Uploading...") : t("Choose File")}
+          {t("Choose File")}
         </Button>
-      ) : (
+      ) : null}
+
+      {value ? (
         <YStack {...knobProps.gap}>
           {isImage ? (
             <Image
@@ -201,13 +420,13 @@ export function FileUpload({
             </XStack>
           )}
 
-          {!readOnly && (
+          {!readOnly && !transfer ? (
             <XStack {...knobProps.gap}>
               <Button
                 size="$2"
                 variant="outlined"
                 icon={UploadIcon}
-                disabled={isLocked || uploading}
+                disabled={isLocked}
                 onPress={handleClick}
                 {...knobProps.borderRadius}
               >
@@ -217,27 +436,27 @@ export function FileUpload({
                 size="$2"
                 variant="outlined"
                 icon={XIcon}
-                disabled={isLocked || uploading}
+                disabled={isLocked}
                 onPress={handleRemove}
                 {...knobProps.borderRadius}
               >
                 {t("Remove")}
               </Button>
             </XStack>
-          )}
+          ) : null}
         </YStack>
-      )}
+      ) : null}
 
-      {helperText && !error && (
+      {helperText && !error && !transfer ? (
         <Text color="$color11" fontSize="$2">
           {helperText}
         </Text>
-      )}
-      {error && (
+      ) : null}
+      {error ? (
         <Text color="$red11" fontSize="$2">
           {error}
         </Text>
-      )}
+      ) : null}
     </YStack>
   );
 }

package/src/fields/FileUploadField/FileUploadField.stories.tsx

@@ -1,4 +1,8 @@
+import { DataTable, type DataTableColumn } from "@multiplatform.one/table";
+import { useEffect, useRef, useState } from "react";
 import { YStack } from "tamagui";
+import { fieldtypeToTableField } from "../../fieldRegistry";
+import { FrappeStoryProvider } from "../../frappeStoryTarget";
 import { FileUploadField, type FileUploadFieldProps } from ".";
 
 export default {
@@ -76,6 +80,60 @@ States.parameters = {
   },
 };
 
+function TransferFieldStory({ fail }: { fail?: boolean }) {
+  const hostRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    const input = hostRef.current?.querySelector("input[type='file']") as HTMLInputElement | null;
+    if (!input) return;
+    const file = new File(["payload"], fail ? "wazuh-dump.sql" : "restore-log.txt", {
+      type: "text/plain",
+    });
+    const dt = new DataTransfer();
+    dt.items.add(file);
+    Object.defineProperty(input, "files", { configurable: true, value: dt.files });
+    input.dispatchEvent(new Event("change", { bubbles: true }));
+  }, [fail]);
+  return (
+    <div ref={hostRef}>
+      <FileUploadField
+        label="Attachment"
+        onUpload={async (_file, { onProgress }) => {
+          onProgress(64);
+          if (fail) throw new Error("413 Payload Too Large");
+          await new Promise<void>(() => {});
+        }}
+      />
+    </div>
+  );
+}
+
+export const Uploading = () => <TransferFieldStory />;
+Uploading.storyName = "Uploading";
+
+export const Failed = () => <TransferFieldStory fail />;
+Failed.storyName = "Failed";
+
+export const FromLibrary = () => (
+  <FileUploadField
+    label="Cluster diagram"
+    library
+    libraryFolder="Home/Invoices"
+    libraryFiles={[
+      { name: "Home", file_name: "Home", folder: "", is_folder: 1 },
+      { name: "Home/Invoices", file_name: "Invoices", folder: "Home", is_folder: 1 },
+      {
+        name: "inv-1",
+        file_name: "invoice.pdf",
+        folder: "Home/Invoices",
+        file_url: "/files/invoice.pdf",
+        file_size: 72400,
+        file_type: "pdf",
+      },
+    ]}
+  />
+);
+FromLibrary.storyName = "From Library";
+
 /** Thin-adapter contract probe: readOnly / skeleton / compact forwarding. */
 export const ContractProbe = (args: StoryProps) => (
   <YStack gap="$4" maxWidth={420}>
@@ -85,3 +143,32 @@ export const ContractProbe = (args: StoryProps) => (
   </YStack>
 );
 ContractProbe.args = {} as Partial<StoryProps>;
+
+type FileRow = { id: string; label: string; value: string };
+
+export const InTable = {
+  name: "In table",
+  render: function InTableRender() {
+    const [data, setData] = useState<FileRow[]>([
+      { id: "1", label: "Alpha", value: "report.pdf" },
+      { id: "2", label: "Beta", value: "invoice.pdf" },
+      { id: "3", label: "Gamma", value: "" },
+    ]);
+    const columns: DataTableColumn<FileRow>[] = [
+      { accessorKey: "label", header: "Row" },
+      { accessorKey: "value", header: "Attachment", ...fieldtypeToTableField("Attach") },
+    ];
+    return (
+      <FrappeStoryProvider>
+        <YStack width="100%" height={320}>
+          <DataTable
+            data={data}
+            columns={columns}
+            enablePagination={false}
+            onDataChange={setData}
+          />
+        </YStack>
+      </FrappeStoryProvider>
+    );
+  },
+};

package/src/fields/FileUploadField/index.tsx

@@ -1,7 +1,16 @@
-import type { FormFieldProps, FieldComponentProps } from "@multiplatform.one/forms";
-import { FileUpload } from "@multiplatform.one/forms";
+import type {
+  FieldComponentProps,
+  FileUploadHandler,
+  FormFieldProps,
+} from "@multiplatform.one/forms";
+import { Button, FileUpload } from "@multiplatform.one/forms";
+import { FolderOpenIcon } from "@phosphor-icons/react";
 import type { DeepKeys } from "@tanstack/form-core";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
 import { useProps } from "tamagui";
+import { AttachLibrary } from "../../FileBrowser/AttachLibrary";
+import type { FileBrowserFile } from "../../FileBrowser/types";
 
 const imageAccept = "image/png,image/jpeg,image/gif,image/webp,image/svg+xml";
 
@@ -41,12 +50,19 @@ export type FileUploadFieldProps<
     /** Controlled value (SchemaForm / registry adapters pass value+onChange). */
     value?: unknown;
     onChange?: (value: unknown) => void;
+    /** Same transport contract as forms FileUpload (progress / fail / retry / cancel). */
+    onUpload?: FileUploadHandler;
+    /** Attach choose-from-library tab. Default on — this field IS Attach. */
+    library?: boolean;
+    libraryFiles?: FileBrowserFile[];
+    libraryFolder?: string;
   };
 
 export function FileUploadField<
   TData extends Record<string, unknown> = Record<string, unknown>,
   TName extends string = string,
 >(props: FileUploadFieldProps<TData, TName>) {
+  const { t } = useTranslation();
   const {
     defaultValue,
     form,
@@ -61,38 +77,70 @@ export function FileUploadField<
     isImage,
     value,
     onChange,
+    onUpload,
+    library = true,
+    libraryFiles,
+    libraryFolder,
     ...fieldProps
   } = useProps(props) as FileUploadFieldProps<TData, TName> & {
     value?: unknown;
     onChange?: (value: unknown) => void;
   } & Record<string, unknown>;
 
+  const [libraryOpen, setLibraryOpen] = useState(false);
   const resolvedAccept = isImage ? (accept ?? imageAccept) : accept;
-  // SchemaForm / controlled callers pass value+onChange; forms FileUpload
-  // uses defaultValue + onValueChange in standalone (no form/name) mode.
   const resolvedDefaultValue = value !== undefined ? value : defaultValue;
 
   return (
-    <FileUpload
-      name={name}
-      form={form}
-      validators={validators}
-      defaultValue={resolvedDefaultValue as any}
-      onValueChange={onChange as any}
-      label={fieldProps.label}
-      labelProps={fieldProps.labelProps}
-      error={fieldProps.error}
-      helperText={fieldProps.helperText}
-      readOnly={fieldProps.readOnly}
-      skeleton={fieldProps.skeleton}
-      compact={fieldProps.compact}
-      required={fieldProps.required}
-      id={fieldProps.id}
-      size={fieldProps.size}
-      disabled={disabled}
-      accept={resolvedAccept}
-      maxSize={maxSize}
-      multiple={multiple}
-    />
+    <>
+      <FileUpload
+        name={name}
+        form={form}
+        validators={validators}
+        defaultValue={resolvedDefaultValue as any}
+        onValueChange={onChange as any}
+        label={fieldProps.label}
+        labelProps={fieldProps.labelProps}
+        error={fieldProps.error}
+        helperText={fieldProps.helperText}
+        readOnly={fieldProps.readOnly}
+        skeleton={fieldProps.skeleton}
+        compact={fieldProps.compact}
+        required={fieldProps.required}
+        id={fieldProps.id}
+        size={fieldProps.size}
+        disabled={disabled}
+        accept={resolvedAccept}
+        maxSize={maxSize}
+        multiple={multiple}
+        onUpload={onUpload}
+        actions={
+          library ? (
+            <Button
+              size="$4"
+              outlined
+              icon={FolderOpenIcon}
+              disabled={disabled || fieldProps.readOnly}
+              onPress={() => setLibraryOpen(true)}
+            >
+              {t("From Library")}
+            </Button>
+          ) : undefined
+        }
+      />
+      {library ? (
+        <AttachLibrary
+          open={libraryOpen}
+          onOpenChange={setLibraryOpen}
+          value={value}
+          files={libraryFiles}
+          currentFolder={libraryFolder}
+          accept={resolvedAccept}
+          onPick={(file) => {
+            onChange?.(file.file_url ?? file.name);
+          }}
+        />
+      ) : null}
+    </>
   );
 }