@multiplatform.one/frappe-ui 7.4.1 → 7.5.0

package/dist/cjs/fields/FileUpload.cjs

@@ -31,10 +31,52 @@ var import_react = require("@phosphor-icons/react");
 var import_theme = require("@multiplatform.one/theme");
 var import_react2 = require("react");
 var import_react_i18next = require("react-i18next");
-var import_forms2 = require("@multiplatform.one/forms");
 var import_tamagui = require("tamagui");
 var import_FrappeProvider = require("../FrappeProvider.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
+function formatFileSize(bytes) {
+  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, {
+  onProgress,
+  signal
+}) {
+  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);
+    };
+    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);
+  });
+}
 function FileUpload({
   label,
   value,
@@ -49,7 +91,8 @@ function FileUpload({
   helperText,
   readOnly = false,
   skeleton = false,
-  compact = false
+  compact = false,
+  onUpload
 }) {
   const {
     t
@@ -59,11 +102,15 @@ function FileUpload({
   } = (0, import_theme.useResolvedKnobs)();
   const config = (0, import_FrappeProvider.useFrappeConfig)();
   const fileInputRef = (0, import_react2.useRef)(null);
-  const [uploading, setUploading] = (0, import_react2.useState)(false);
+  const [transfer, setTransfer] = (0, import_react2.useState)(null);
   const [error, setError] = (0, import_react2.useState)(null);
+  const transferRef = (0, import_react2.useRef)(null);
+  const onUploadRef = (0, import_react2.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 ? {
     baseURL: finalBaseURL,
@@ -77,7 +124,72 @@ function FileUpload({
   const fileCollection = (0, import_frappe.useFrappeCollection)(finalConfig, "File", {
     fields: ["name", "file_name", "file_url", "is_private"]
   });
-  const handleFileSelect = async event => {
+  (0, import_react2.useEffect)(() => {
+    return () => {
+      transferRef.current?.controller.abort();
+    };
+  }, []);
+  const defaultUpload = (0, import_react2.useCallback)(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 = (0, import_react2.useCallback)(async (file, controller) => {
+    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);
+      setError(null);
+    }
+  }, [defaultUpload, onChange, t]);
+  const startTransfer = (0, import_react2.useCallback)(file => {
+    transferRef.current?.controller.abort();
+    const controller = new AbortController();
+    const next = {
+      file,
+      status: "uploading",
+      progress: 0,
+      controller
+    };
+    transferRef.current = next;
+    setTransfer(next);
+    setError(null);
+    void runTransfer(file, controller);
+  }, [runTransfer]);
+  const handleFileSelect = event => {
     if (isLocked) return;
     const file = event.target.files?.[0];
     if (!file) return;
@@ -85,49 +197,31 @@ function FileUpload({
       setError(`File size exceeds ${Math.round(maxSize / 1024 / 1024)}MB limit`);
       return;
     }
-    setError(null);
-    setUploading(true);
-    try {
-      const reader = new FileReader();
-      reader.onload = async e => {
-        try {
-          const base64 = e.target?.result;
-          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);
-        }
-      };
-      reader.onerror = () => {
-        setError(t("Failed to read file"));
-        setUploading(false);
-      };
-      reader.readAsDataURL(file);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : t("Upload failed"));
-      setUploading(false);
-    }
+    startTransfer(file);
+  };
+  const handleCancel = () => {
+    transferRef.current?.controller.abort();
+    transferRef.current = null;
+    setTransfer(null);
+    if (fileInputRef.current) fileInputRef.current.value = "";
+  };
+  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();
   };
   if (skeleton) {
@@ -160,14 +254,103 @@ function FileUpload({
       },
       onChange: handleFileSelect,
       disabled: isLocked || uploading
-    }), !value ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Button, {
+    }), transfer ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+      "data-file-upload": "transfer",
+      "data-transfer-status": transfer.status,
+      ...knobProps.gap,
+      ...knobProps.panelPadding,
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+        gap: "$2",
+        alignItems: "center",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.FileIcon, {
+          size: 20
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+          flex: 1,
+          gap: "$1",
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+            numberOfLines: 1,
+            children: transfer.file.name
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+            numberOfLines: 1,
+            fontWeight: "700",
+            fontSize: "$2",
+            children: formatFileSize(transfer.file.size)
+          })]
+        }), transfer.status === "uploading" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Button, {
+          size: "$2",
+          variant: "outlined",
+          icon: import_react.XIcon,
+          "aria-label": t("Cancel {{name}}", {
+            name: transfer.file.name
+          }),
+          disabled: isLocked,
+          onPress: handleCancel,
+          ...knobProps.borderRadius,
+          children: t("Cancel")
+        }) : null]
+      }), transfer.status === "uploading" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.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: 1e3,
+        backgroundColor: "$color4",
+        overflow: "hidden",
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+          height: "100%",
+          width: `${transfer.progress}%`,
+          backgroundColor: "$color11"
+        })
+      }) : null, transfer.status === "failed" ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+        ...knobProps.gap,
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+          color: "$red11",
+          fontSize: "$2",
+          children: transfer.problem
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+          color: "$color11",
+          fontSize: "$2",
+          children: transfer.action
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+          ...knobProps.gap,
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Button, {
+            size: "$2",
+            variant: "outlined",
+            "aria-label": t("Retry {{name}}", {
+              name: transfer.file.name
+            }),
+            disabled: isLocked,
+            onPress: handleRetry,
+            ...knobProps.borderRadius,
+            children: t("Retry")
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Button, {
+            size: "$2",
+            variant: "outlined",
+            icon: import_react.XIcon,
+            "aria-label": t("Remove {{name}}", {
+              name: transfer.file.name
+            }),
+            disabled: isLocked,
+            onPress: handleRemoveFailed,
+            ...knobProps.borderRadius,
+            children: t("Remove")
+          })]
+        })]
+      }) : null]
+    }) : null, !value && !transfer ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Button, {
       size: "$3",
-      icon: uploading ? import_forms2.Spinner : import_react.UploadIcon,
-      disabled: isLocked || uploading,
+      icon: import_react.UploadIcon,
+      disabled: isLocked,
       onPress: handleClick,
       ...knobProps.borderRadius,
-      children: uploading ? t("Uploading...") : t("Choose File")
-    }) : /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+      children: t("Choose File")
+    }) : null, value ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
       ...knobProps.gap,
       children: [isImage ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Image, {
         src: value,
@@ -190,13 +373,13 @@ function FileUpload({
           numberOfLines: 1,
           children: value.split("/").pop() || value
         })]
-      }), !readOnly && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+      }), !readOnly && !transfer ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
         ...knobProps.gap,
         children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Button, {
           size: "$2",
           variant: "outlined",
           icon: import_react.UploadIcon,
-          disabled: isLocked || uploading,
+          disabled: isLocked,
           onPress: handleClick,
           ...knobProps.borderRadius,
           children: t("Replace")
@@ -204,20 +387,20 @@ function FileUpload({
           size: "$2",
           variant: "outlined",
           icon: import_react.XIcon,
-          disabled: isLocked || uploading,
+          disabled: isLocked,
           onPress: handleRemove,
           ...knobProps.borderRadius,
           children: t("Remove")
         })]
-      })]
-    }), helperText && !error && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+      }) : null]
+    }) : null, helperText && !error && !transfer ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
       color: "$color11",
       fontSize: "$2",
       children: helperText
-    }), error && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+    }) : null, error ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
       color: "$red11",
       fontSize: "$2",
       children: error
-    })]
+    }) : null]
   });
 }