@godxjp/ui 19.6.0 → 20.1.0

package/dist/components/data-entry/upload.js

@@ -1,7 +1,16 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { Camera, ImagePlus, RotateCcw, Trash2, Upload as UploadIcon, X } from "lucide-react";
+import {
+  Camera,
+  Download,
+  Eye,
+  ImagePlus,
+  RotateCcw,
+  Trash2,
+  Upload as UploadIcon,
+  X
+} from "lucide-react";
 import { useTranslation } from "../../i18n/use-translation.js";
 import { formatBytes } from "../../lib/format.js";
 import { cn } from "../../lib/utils.js";
@@ -10,11 +19,16 @@ import { controlIconClass } from "../../lib/control-styles.js";
 import { Button } from "../general/button.js";
 import { UploadCropDialog } from "./upload-crop-dialog.js";
 import {
+  UPLOAD_LIST_IGNORE,
   createUploadItem,
   revokePreviewUrl
 } from "./upload-types.js";
+import { readDroppedFiles } from "./upload-files.js";
+import { uploadRequest } from "./upload-request.js";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../feedback/dialog.js";
+import { Progress } from "../data-display/progress.js";
 import { useUploadDraft } from "./use-upload-draft.js";
-import { collectUploadCommitActions, createUploadItem as createUploadItem2 } from "./upload-types.js";
+import { collectUploadCommitActions, createUploadItem as createUploadItem2, UPLOAD_LIST_IGNORE as UPLOAD_LIST_IGNORE2 } from "./upload-types.js";
 import { useUploadDraft as useUploadDraft2 } from "./use-upload-draft.js";
 function defaultAcceptForVariant(variant) {
   if (variant === "avatar" || variant === "avatar-crop" || variant === "picture" || variant === "picture-card") {
@@ -29,9 +43,9 @@ function defaultMaxCount(variant) {
 function fileMatchesAccept(file, accept) {
   if (!accept) return true;
   return accept.split(",").some((rule) => {
-    const trimmed = rule.trim();
-    if (trimmed.endsWith("/*")) return file.type.startsWith(trimmed.slice(0, -1));
-    return file.type === trimmed || file.name.endsWith(trimmed);
+    const trimmed = rule.trim().toLowerCase();
+    if (trimmed.endsWith("/*")) return file.type.toLowerCase().startsWith(trimmed.slice(0, -1));
+    return file.type.toLowerCase() === trimmed || trimmed.startsWith(".") && file.name.toLowerCase().endsWith(trimmed);
   });
 }
 function useUploadList(controlled, defaultValue, onValueChange) {
@@ -50,29 +64,6 @@ function useUploadList(controlled, defaultValue, onValueChange) {
   );
   return [items, setItems];
 }
-async function runUpload(file, item, onUpload, setItems) {
-  const uid = item.uid;
-  setItems((prev) => prev.map((it) => it.uid === uid ? { ...it, status: "uploading" } : it));
-  try {
-    const result = await onUpload(file, item);
-    setItems(
-      (prev) => prev.map(
-        (it) => it.uid === uid ? {
-          ...it,
-          status: "done",
-          mediaId: result.mediaId,
-          previewUrl: result.previewUrl ?? it.previewUrl,
-          file: void 0
-        } : it
-      )
-    );
-  } catch (err) {
-    const message = err instanceof Error ? err.message : String(err);
-    setItems(
-      (prev) => prev.map((it) => it.uid === uid ? { ...it, status: "error", error: message } : it)
-    );
-  }
-}
 function Upload({
   variant = "dropzone",
   triggerSize,
@@ -84,7 +75,26 @@ function Upload({
   multiple: multipleProp,
   maxCount: maxCountProp,
   maxSizeBytes,
-  disabled,
+  disabled: disabledProp,
+  readOnly = false,
+  directory = false,
+  pastable = false,
+  openFileDialogOnClick = true,
+  name,
+  action,
+  method,
+  headers,
+  data,
+  withCredentials,
+  beforeUpload,
+  onReject,
+  onRemove,
+  onPreview,
+  onDownload,
+  previewFile,
+  onDrop,
+  showUploadList = true,
+  itemRender,
   removable = true,
   onUpload,
   id,
@@ -93,13 +103,19 @@ function Upload({
   ...ariaProps
 }) {
   const { t } = useTranslation();
-  const inputA11y = resolveFieldA11y(ariaProps, t("dataEntry.upload.inputLabel"));
+  const disabled = disabledProp || readOnly;
+  const triggerOwnsAriaLabel = variant === "button";
+  const inputA11y = resolveFieldA11y(
+    triggerOwnsAriaLabel ? { ...ariaProps, "aria-label": void 0 } : ariaProps,
+    t("dataEntry.upload.inputLabel")
+  );
   const accept = acceptProp ?? defaultAcceptForVariant(variant);
   const maxCount = maxCountProp ?? defaultMaxCount(variant);
   const multiple = multipleProp ?? (maxCount === 1 ? false : true);
   const inputRef = React.useRef(null);
   const [dragActive, setDragActive] = React.useState(false);
   const [cropFile, setCropFile] = React.useState(null);
+  const [previewItem, setPreviewItem] = React.useState(null);
   const [items, setItems] = useUploadList(value, defaultValue, onValueChange);
   const isSingleAvatar = variant === "avatar" || variant === "avatar-crop" || variant === "picture" && maxCount === 1;
   const singleItem = isSingleAvatar ? items[0] ?? null : null;
@@ -109,49 +125,271 @@ function Upload({
       setItems(next ? [next] : []);
     }
   });
-  const pickFiles = (fileList) => {
-    if (!fileList?.length || disabled) return;
-    const slotsLeft = maxCount != null ? Math.max(0, maxCount - items.length) : fileList.length;
-    const candidates = Array.from(fileList).slice(0, multiple ? slotsLeft || fileList.length : 1);
-    for (const file of candidates) {
-      if (!fileMatchesAccept(file, accept)) continue;
-      if (maxSizeBytes != null && file.size > maxSizeBytes) continue;
-      if (variant === "avatar-crop") {
-        setCropFile(file);
-        return;
+  const cropAutomatic = React.useRef(true);
+  const requests = React.useRef(/* @__PURE__ */ new Map());
+  const mounted = React.useRef(true);
+  const queue = React.useRef(Promise.resolve());
+  const selectionGeneration = React.useRef(0);
+  const initialItems = React.useRef(value ?? defaultValue ?? []);
+  const current = React.useRef({ items, disabled });
+  current.current = { items, disabled };
+  const ownedUrls = React.useRef(/* @__PURE__ */ new Set());
+  const [rejection, setRejection] = React.useState();
+  React.useEffect(() => {
+    mounted.current = true;
+    const active = requests.current;
+    const urls = ownedUrls.current;
+    return () => {
+      mounted.current = false;
+      active.forEach((controller) => controller.abort());
+      active.clear();
+      urls.forEach((url) => URL.revokeObjectURL(url));
+    };
+  }, []);
+  React.useEffect(() => {
+    for (const [uid, controller] of requests.current) {
+      if (!items.some((item2) => item2.uid === uid && !item2.pendingDelete)) {
+        controller.abort();
+        requests.current.delete(uid);
       }
-      if (isSingleAvatar) {
-        const baseline = items[0];
-        const item3 = createUploadItem(file, {
+    }
+  }, [items]);
+  const updateItems = (update) => {
+    if (!mounted.current) return;
+    setItems((previous) => {
+      const next = update(previous);
+      current.current.items = next;
+      return next;
+    });
+  };
+  const startUpload = async (item2) => {
+    if (!item2.file || !onUpload && !action || current.current.disabled) return;
+    const controller = new AbortController();
+    requests.current.get(item2.uid)?.abort();
+    requests.current.set(item2.uid, controller);
+    const isCurrent = () => mounted.current && !controller.signal.aborted && requests.current.get(item2.uid) === controller;
+    updateItems(
+      (previous) => previous.map(
+        (entry) => entry.uid === item2.uid ? { ...entry, status: "uploading", percent: 0, error: void 0 } : entry
+      )
+    );
+    try {
+      const context = {
+        signal: controller.signal,
+        onProgress: (percent) => {
+          if (!isCurrent() || !Number.isFinite(percent)) return;
+          updateItems(
+            (previous) => previous.map(
+              (entry) => entry.uid === item2.uid ? { ...entry, percent: Math.max(0, Math.min(100, percent)) } : entry
+            )
+          );
+        }
+      };
+      const result = onUpload ? await onUpload(item2.file, item2, context) : await uploadRequest(
+        item2.file,
+        { action, method, headers, data, name, withCredentials },
+        context
+      );
+      if (!isCurrent()) return;
+      updateItems(
+        (previous) => previous.map(
+          (entry) => entry.uid === item2.uid ? {
+            ...entry,
+            ...result,
+            previewUrl: result.previewUrl ?? entry.previewUrl,
+            status: "done",
+            percent: 100,
+            file: void 0
+          } : entry
+        )
+      );
+    } catch (error) {
+      if (!isCurrent()) return;
+      updateItems(
+        (previous) => previous.map(
+          (entry) => entry.uid === item2.uid ? {
+            ...entry,
+            status: "error",
+            error: error instanceof Error ? error.message : String(error)
+          } : entry
+        )
+      );
+    } finally {
+      if (requests.current.get(item2.uid) === controller) requests.current.delete(item2.uid);
+    }
+  };
+  const cancelUpload = (uid) => {
+    requests.current.get(uid)?.abort();
+    requests.current.delete(uid);
+    updateItems(
+      (previous) => previous.map(
+        (item2) => item2.uid === uid ? { ...item2, status: "idle", percent: void 0 } : item2
+      )
+    );
+  };
+  const rejectFile = (file, reason, error) => {
+    setRejection(
+      t(
+        `dataEntry.upload.reject${reason[0].toUpperCase()}${reason.slice(1)}`,
+        { name: file.name }
+      )
+    );
+    onReject?.({ file, reason, error });
+  };
+  const pickFiles = (fileList) => {
+    if (!fileList?.length || current.current.disabled) return;
+    const files = Array.from(fileList);
+    const generation = selectionGeneration.current;
+    queue.current = queue.current.then(async () => {
+      setRejection(void 0);
+      for (const original of multiple ? files : files.slice(0, 1)) {
+        if (!mounted.current || current.current.disabled || generation !== selectionGeneration.current)
+          return;
+        if (!fileMatchesAccept(original, accept)) {
+          rejectFile(original, "accept");
+          continue;
+        }
+        if (maxSizeBytes != null && original.size > maxSizeBytes) {
+          rejectFile(original, "size");
+          continue;
+        }
+        let file = original;
+        let automatic = true;
+        try {
+          const decision = await beforeUpload?.(file, files);
+          if (decision === UPLOAD_LIST_IGNORE) continue;
+          if (decision === false) automatic = false;
+          if (decision instanceof Blob)
+            file = decision instanceof File ? decision : new File([decision], original.name, {
+              type: decision.type,
+              lastModified: original.lastModified
+            });
+        } catch (error) {
+          rejectFile(original, "beforeUpload", error);
+          continue;
+        }
+        if (!mounted.current || current.current.disabled || generation !== selectionGeneration.current)
+          return;
+        if (maxSizeBytes != null && file.size > maxSizeBytes) {
+          rejectFile(file, "size");
+          continue;
+        }
+        if (maxCount !== 1 && maxCount != null && current.current.items.length >= maxCount) {
+          rejectFile(file, "count");
+          continue;
+        }
+        if (variant === "avatar-crop") {
+          cropAutomatic.current = automatic;
+          setCropFile(file);
+          return;
+        }
+        const baseline = isSingleAvatar ? current.current.items[0] : void 0;
+        const item2 = createUploadItem(file, {
+          relativePath: original.webkitRelativePath || void 0,
           pendingReplace: Boolean(baseline?.mediaId),
           replacesMediaId: baseline?.mediaId
         });
-        setItems([item3]);
-        if (onUpload) void runUpload(file, item3, onUpload, setItems);
-        return;
+        if (item2.previewUrl?.startsWith("blob:")) ownedUrls.current.add(item2.previewUrl);
+        updateItems((previous) => maxCount === 1 ? [item2] : [...previous, item2]);
+        if (previewFile)
+          void previewFile(file).then((url) => {
+            updateItems(
+              (previous) => previous.map(
+                (entry) => entry.uid === item2.uid ? { ...entry, previewUrl: url } : entry
+              )
+            );
+          }).catch(() => {
+          });
+        if (automatic) void startUpload(item2);
       }
-      const item2 = createUploadItem(file);
-      setItems((prev) => [...prev, item2]);
-      if (onUpload) void runUpload(file, item2, onUpload, setItems);
-    }
+    }).catch(() => {
+    });
   };
-  const removeItem = (uid) => {
+  const removeItem = async (uid) => {
+    if (current.current.disabled) return;
+    const target = current.current.items.find((item2) => item2.uid === uid);
+    if (!target) return;
+    try {
+      if (await onRemove?.(target) === false) return;
+    } catch {
+      return;
+    }
+    if (!mounted.current || current.current.disabled || !current.current.items.some((item2) => item2.uid === uid))
+      return;
+    requests.current.get(uid)?.abort();
+    requests.current.delete(uid);
     if (isSingleAvatar) {
       draft.markRemove();
       return;
     }
-    setItems((prev) => {
-      const target = prev.find((it) => it.uid === uid);
-      revokePreviewUrl(target);
-      return prev.filter((it) => it.uid !== uid);
-    });
+    revokePreviewUrl(target);
+    updateItems((previous) => previous.filter((item2) => item2.uid !== uid));
+  };
+  React.useEffect(() => {
+    const form = inputRef.current?.form;
+    if (!form || !name) return;
+    const appendFiles = (event) => {
+      if (disabledProp) return;
+      for (const item2 of current.current.items) {
+        if (item2.file && !item2.pendingDelete) event.formData.append(name, item2.file, item2.name);
+      }
+    };
+    form.addEventListener("formdata", appendFiles);
+    return () => form.removeEventListener("formdata", appendFiles);
+  }, [name, disabledProp]);
+  React.useEffect(() => {
+    const form = inputRef.current?.form;
+    if (!form) return;
+    const reset = (event) => {
+      queueMicrotask(() => {
+        if (!mounted.current || event.defaultPrevented) return;
+        selectionGeneration.current += 1;
+        queue.current = Promise.resolve();
+        requests.current.forEach((controller) => controller.abort());
+        requests.current.clear();
+        setCropFile(null);
+        setRejection(void 0);
+        if (value === void 0) updateItems(() => initialItems.current);
+      });
+    };
+    form.addEventListener("reset", reset);
+    return () => form.removeEventListener("reset", reset);
+  });
+  React.useEffect(() => {
+    if (name) inputRef.current?.dispatchEvent(new Event("input", { bubbles: true }));
+  }, [items, name]);
+  const pasteProps = {
+    onPaste: (event) => {
+      if (!pastable || disabled || !event.clipboardData.files.length) return;
+      event.preventDefault();
+      pickFiles(event.clipboardData.files);
+    }
+  };
+  const showPreview = (item2) => {
+    if (onPreview) onPreview(item2);
+    else if (item2.previewUrl) setPreviewItem(item2);
   };
+  const list = showUploadList && items.length > 0 ? /* @__PURE__ */ jsx(
+    UploadFileList,
+    {
+      items,
+      onRemove: removable && !disabled ? removeItem : void 0,
+      onStart: !disabled && (onUpload || action) ? startUpload : void 0,
+      onCancel: !disabled ? cancelUpload : void 0,
+      onPreview: showPreview,
+      hasCustomPreview: Boolean(onPreview),
+      onDownload,
+      itemRender,
+      showThumbnails: variant === "picture"
+    }
+  ) : null;
   const hiddenInput = /* @__PURE__ */ jsx(
     "input",
     {
       ref: inputRef,
       id,
       type: "file",
+      ...directory ? { webkitdirectory: "", directory: "" } : {},
       className: "sr-only",
       accept,
       multiple: multiple && !isSingleAvatar,
@@ -166,18 +404,41 @@ function Upload({
   const uploadingCount = items.filter((it) => it.status === "uploading").length;
   const doneCount = items.filter((it) => it.status === "done").length;
   const errorCount = items.filter((it) => it.status === "error").length;
-  const liveRegion = /* @__PURE__ */ jsx("span", { "aria-live": "polite", className: "sr-only", "data-slot": "upload-status", children: errorCount > 0 ? t("dataEntry.upload.statusFailed", { count: errorCount }) : uploadingCount > 0 ? t("dataEntry.upload.statusUploading", { count: uploadingCount }) : items.length > 0 ? t("dataEntry.upload.statusReady", { count: items.length, done: doneCount }) : "" });
+  const liveRegion = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Dialog,
+      {
+        open: previewItem != null,
+        onOpenChange: (open) => {
+          if (!open) setPreviewItem(null);
+        },
+        children: /* @__PURE__ */ jsxs(DialogContent, { "aria-describedby": void 0, children: [
+          /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: previewItem?.name ?? t("dataEntry.upload.preview") }) }),
+          previewItem?.previewUrl && /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: previewItem.previewUrl,
+              alt: previewItem.name,
+              className: "ui-upload-picture-img"
+            }
+          )
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { "aria-live": "polite", className: "sr-only", "data-slot": "upload-status", children: rejection ?? (errorCount > 0 ? t("dataEntry.upload.statusFailed", { count: errorCount }) : uploadingCount > 0 ? t("dataEntry.upload.statusUploading", { count: uploadingCount }) : items.length > 0 ? t("dataEntry.upload.statusReady", { count: items.length, done: doneCount }) : "") })
+  ] });
   const openPicker = () => {
-    if (!disabled) inputRef.current?.click();
+    if (!disabled && openFileDialogOnClick) inputRef.current?.click();
   };
   if (variant === "dropzone") {
-    return /* @__PURE__ */ jsxs("div", { className: cn("ui-stack-sm", className), children: [
+    return /* @__PURE__ */ jsxs("div", { ...pasteProps, className: cn("ui-stack-sm", className), children: [
       hiddenInput,
       liveRegion,
+      rejection && /* @__PURE__ */ jsx("p", { role: "alert", className: "text-destructive", children: rejection }),
       /* @__PURE__ */ jsxs(
         "div",
         {
-          role: "button",
+          role: openFileDialogOnClick ? "button" : "group",
           tabIndex: disabled ? -1 : 0,
           "aria-disabled": disabled,
           "aria-label": t("dataEntry.upload.dropzoneLabel"),
@@ -190,13 +451,17 @@ function Upload({
           },
           onDragOver: (e) => {
             e.preventDefault();
-            setDragActive(true);
+            if (!disabled) setDragActive(true);
           },
           onDragLeave: () => setDragActive(false),
           onDrop: (e) => {
             e.preventDefault();
             setDragActive(false);
-            pickFiles(e.dataTransfer.files);
+            onDrop?.(e);
+            if (disabled) return;
+            void readDroppedFiles(e.dataTransfer, directory).then(pickFiles).catch(() => {
+              if (mounted.current) setRejection(t("dataEntry.upload.readFailed"));
+            });
           },
           "data-drag-active": dragActive ? "" : void 0,
           "data-disabled": disabled ? "" : void 0,
@@ -208,15 +473,17 @@ function Upload({
           ]
         }
       ),
-      items.length > 0 && /* @__PURE__ */ jsx(UploadFileList, { items, onRemove: removable ? removeItem : void 0 })
+      list
     ] });
   }
   if (variant === "button") {
     const iconOnly = typeof triggerSize === "string" && triggerSize.startsWith("icon");
     const label = children ?? t("dataEntry.upload.buttonLabel");
-    return /* @__PURE__ */ jsxs("div", { className: cn("ui-stack-sm", className), children: [
+    const triggerAriaLabel = ariaProps["aria-label"] ?? (iconOnly ? typeof label === "string" ? label : t("dataEntry.upload.buttonLabel") : void 0);
+    return /* @__PURE__ */ jsxs("div", { ...pasteProps, className: cn("ui-stack-sm", className), children: [
       hiddenInput,
       liveRegion,
+      rejection && /* @__PURE__ */ jsx("p", { role: "alert", className: "text-destructive", children: rejection }),
       /* @__PURE__ */ jsxs(
         Button,
         {
@@ -225,7 +492,7 @@ function Upload({
           size: triggerSize,
           disabled,
           onClick: openPicker,
-          "aria-label": iconOnly ? typeof label === "string" ? label : void 0 : void 0,
+          "aria-label": triggerAriaLabel,
           children: [
             /* @__PURE__ */ jsx(
               UploadIcon,
@@ -239,19 +506,24 @@ function Upload({
           ]
         }
       ),
-      items.length > 0 && /* @__PURE__ */ jsx(UploadFileList, { items, onRemove: removable ? removeItem : void 0 })
+      list
     ] });
   }
   if (variant === "picture-card") {
     const canAdd = maxCount == null || items.length < maxCount;
-    return /* @__PURE__ */ jsxs("div", { className: cn("ui-upload-grid", className), children: [
+    return /* @__PURE__ */ jsxs("div", { ...pasteProps, className: cn("ui-upload-grid", className), children: [
       hiddenInput,
       liveRegion,
-      items.map((item2) => /* @__PURE__ */ jsx(
+      rejection && /* @__PURE__ */ jsx("p", { role: "alert", className: "text-destructive", children: rejection }),
+      (showUploadList ? items : []).map((item2) => /* @__PURE__ */ jsx(
         UploadPictureCard,
         {
           item: item2,
-          onRemove: removable ? () => removeItem(item2.uid) : void 0
+          onStart: !disabled && (onUpload || action) ? () => void startUpload(item2) : void 0,
+          onCancel: !disabled ? () => cancelUpload(item2.uid) : void 0,
+          onPreview: onPreview || item2.previewUrl ? () => showPreview(item2) : void 0,
+          onDownload: onDownload ? () => onDownload(item2) : void 0,
+          onRemove: removable && !disabled ? () => void removeItem(item2.uid) : void 0
         },
         item2.uid
       )),
@@ -272,11 +544,21 @@ function Upload({
       )
     ] });
   }
+  if (variant === "picture" && !isSingleAvatar) {
+    return /* @__PURE__ */ jsxs("div", { ...pasteProps, className: cn("ui-stack-sm", className), children: [
+      hiddenInput,
+      liveRegion,
+      rejection && /* @__PURE__ */ jsx("p", { role: "alert", className: "text-destructive", children: rejection }),
+      /* @__PURE__ */ jsx(Button, { type: "button", disabled, variant: triggerVariant, onClick: openPicker, children: children ?? t("dataEntry.upload.addImage") }),
+      list
+    ] });
+  }
   if (variant === "picture") {
     const item2 = draft.state.display;
-    return /* @__PURE__ */ jsxs("div", { className: cn("ui-stack-sm ui-upload-picture", className), children: [
+    return /* @__PURE__ */ jsxs("div", { ...pasteProps, className: cn("ui-stack-sm ui-upload-picture", className), children: [
       hiddenInput,
       liveRegion,
+      rejection && /* @__PURE__ */ jsx("p", { role: "alert", className: "text-destructive", children: rejection }),
       item2?.previewUrl && !item2.pendingDelete ? /* @__PURE__ */ jsxs("div", { className: "ui-upload-picture-frame", children: [
         /* @__PURE__ */ jsx("img", { src: item2.previewUrl, alt: "", className: "ui-upload-picture-img" }),
         item2.status === "uploading" && /* @__PURE__ */ jsx("div", { className: "ui-upload-overlay ui-upload-picture-overlay", children: t("dataEntry.upload.uploading") }),
@@ -299,7 +581,7 @@ function Upload({
   }
   const item = draft.state.display;
   const showPlaceholder = !item?.previewUrl || item.pendingDelete;
-  return /* @__PURE__ */ jsxs("div", { className: cn("ui-stack-sm items-start", className), children: [
+  return /* @__PURE__ */ jsxs("div", { ...pasteProps, className: cn("ui-stack-sm items-start", className), children: [
     hiddenInput,
     liveRegion,
     /* @__PURE__ */ jsx(
@@ -309,6 +591,12 @@ function Upload({
         onOpenChange: (open) => !open && setCropFile(null),
         file: cropFile,
         onConfirm: (cropped) => {
+          if (!mounted.current || current.current.disabled) return;
+          if (maxSizeBytes != null && cropped.size > maxSizeBytes) {
+            rejectFile(cropped, "size");
+            setCropFile(null);
+            return;
+          }
           const baseline = items[0];
           const item2 = createUploadItem(cropped, {
             pendingReplace: Boolean(baseline?.mediaId),
@@ -316,7 +604,8 @@ function Upload({
           });
           setItems([item2]);
           setCropFile(null);
-          if (onUpload) void runUpload(cropped, item2, onUpload, setItems);
+          if (item2.previewUrl?.startsWith("blob:")) ownedUrls.current.add(item2.previewUrl);
+          if (cropAutomatic.current) void startUpload(item2);
         }
       }
     ),
@@ -342,7 +631,7 @@ function Upload({
         {
           type: "button",
           disabled,
-          onClick: () => draft.markRemove(),
+          onClick: () => void removeItem(item.uid),
           className: "ui-upload-avatar-remove",
           "aria-label": t("dataEntry.upload.removeAvatar"),
           children: /* @__PURE__ */ jsx(Trash2, { className: "ui-upload-remove-icon", "aria-hidden": "true" })
@@ -377,59 +666,135 @@ function UploadDraftActions({
   }
   return null;
 }
-function UploadPictureCard({ item, onRemove }) {
+function UploadPictureCard({
+  item,
+  onRemove,
+  onStart,
+  onCancel,
+  onPreview,
+  onDownload
+}) {
   const { t } = useTranslation();
-  return /* @__PURE__ */ jsxs("div", { className: "ui-upload-tile", children: [
-    item.previewUrl ? /* @__PURE__ */ jsx("img", { src: item.previewUrl, alt: "", className: "ui-upload-avatar-image" }) : /* @__PURE__ */ jsx("div", { className: "ui-upload-tile-placeholder", children: "\u2026" }),
-    item.status === "uploading" && /* @__PURE__ */ jsx("div", { className: "ui-upload-overlay", children: "\u2026" }),
-    onRemove && /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        onClick: onRemove,
-        className: "ui-upload-tile-remove",
-        "aria-label": t("dataEntry.upload.removeImage"),
-        children: /* @__PURE__ */ jsx(X, { className: "ui-upload-remove-icon", "aria-hidden": "true" })
-      }
-    )
+  return /* @__PURE__ */ jsxs("div", { className: "ui-upload-picture-item ui-stack-xs", children: [
+    /* @__PURE__ */ jsxs("div", { className: "ui-upload-tile", children: [
+      item.previewUrl ? /* @__PURE__ */ jsx("img", { src: item.previewUrl, alt: "", className: "ui-upload-avatar-image" }) : /* @__PURE__ */ jsx("div", { className: "ui-upload-tile-placeholder", children: /* @__PURE__ */ jsx(ImagePlus, { "aria-hidden": "true" }) }),
+      item.status === "uploading" && /* @__PURE__ */ jsx("div", { className: "ui-upload-overlay", children: /* @__PURE__ */ jsx(Progress, { value: item.percent ?? 0, "aria-label": t("dataEntry.upload.uploading") }) }),
+      onRemove && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onRemove,
+          className: "ui-upload-tile-remove",
+          "aria-label": t("dataEntry.upload.removeImage"),
+          children: /* @__PURE__ */ jsx(X, { className: "ui-upload-remove-icon", "aria-hidden": "true" })
+        }
+      )
+    ] }),
+    item.status === "error" && /* @__PURE__ */ jsx("span", { role: "alert", className: "text-destructive", children: item.error }),
+    /* @__PURE__ */ jsxs("div", { className: "ui-inline-xs", children: [
+      onCancel && item.status === "uploading" && /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          size: "icon-xs",
+          variant: "ghost",
+          onClick: onCancel,
+          "aria-label": t("dataEntry.upload.cancel"),
+          children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true" })
+        }
+      ),
+      onStart && item.file && (item.status === "idle" || item.status === "error") && /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          size: "icon-xs",
+          variant: "ghost",
+          onClick: onStart,
+          "aria-label": t(
+            item.status === "error" ? "dataEntry.upload.retry" : "dataEntry.upload.start"
+          ),
+          children: /* @__PURE__ */ jsx(RotateCcw, { "aria-hidden": "true" })
+        }
+      ),
+      onPreview && /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          size: "icon-xs",
+          variant: "ghost",
+          onClick: onPreview,
+          "aria-label": t("dataEntry.upload.preview"),
+          children: /* @__PURE__ */ jsx(Eye, { "aria-hidden": "true" })
+        }
+      ),
+      onDownload && /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          size: "icon-xs",
+          variant: "ghost",
+          onClick: onDownload,
+          "aria-label": t("dataEntry.upload.download"),
+          children: /* @__PURE__ */ jsx(Download, { "aria-hidden": "true" })
+        }
+      )
+    ] })
   ] });
 }
 function UploadFileList({
   items,
-  onRemove
+  onRemove,
+  onStart,
+  onCancel,
+  onPreview,
+  hasCustomPreview,
+  onDownload,
+  itemRender,
+  showThumbnails
 }) {
   const { t } = useTranslation();
-  return /* @__PURE__ */ jsx("ul", { className: "ui-stack-xs", children: items.map((item) => /* @__PURE__ */ jsxs("li", { className: "ui-upload-row", children: [
-    /* @__PURE__ */ jsxs("div", { className: "ui-upload-row-main", children: [
-      /* @__PURE__ */ jsx("div", { className: "truncate font-medium", children: item.name }),
-      /* @__PURE__ */ jsxs("div", { className: "text-muted-foreground text-xs", children: [
-        formatBytes(item.size),
-        item.status === "uploading" && " \xB7 \u2026",
-        item.status === "error" && item.error && /* @__PURE__ */ jsxs("span", { className: "text-destructive", children: [
-          " \xB7 ",
-          item.error
+  return /* @__PURE__ */ jsx("ul", { className: "ui-stack-xs", children: items.map((item) => {
+    const node = /* @__PURE__ */ jsxs("div", { className: "ui-upload-row", children: [
+      showThumbnails && item.previewUrl && /* @__PURE__ */ jsx("img", { src: item.previewUrl, alt: "", className: "ui-upload-list-thumb" }),
+      /* @__PURE__ */ jsxs("div", { className: "ui-upload-row-main", children: [
+        /* @__PURE__ */ jsx("div", { className: "truncate font-medium", children: item.name }),
+        /* @__PURE__ */ jsxs("div", { className: "text-muted-foreground text-xs", children: [
+          formatBytes(item.size),
+          item.status === "error" && item.error && /* @__PURE__ */ jsxs("span", { role: "alert", className: "text-destructive", children: [
+            " ",
+            "\xB7 ",
+            item.error
+          ] })
         ] }),
-        item.mediaId && /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
-          " \xB7 ",
-          item.mediaId.slice(0, 8),
-          "\u2026"
-        ] })
-      ] })
-    ] }),
-    onRemove && /* @__PURE__ */ jsx(
-      Button,
-      {
-        type: "button",
-        size: "sm",
-        variant: "ghost",
-        "aria-label": t("dataEntry.upload.removeFile", { name: item.name }),
-        onClick: () => onRemove(item.uid),
-        children: /* @__PURE__ */ jsx(X, { className: "ui-upload-row-icon", "aria-hidden": "true" })
-      }
-    )
-  ] }, item.uid)) });
+        item.status === "uploading" && /* @__PURE__ */ jsx(Progress, { value: item.percent ?? 0, "aria-label": t("dataEntry.upload.uploading") })
+      ] }),
+      onPreview && (hasCustomPreview || item.previewUrl) && /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", variant: "ghost", onClick: () => onPreview(item), children: t("dataEntry.upload.preview") }),
+      onDownload && /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", variant: "ghost", onClick: () => onDownload(item), children: t("dataEntry.upload.download") }),
+      onStart && item.file && item.status !== "uploading" && item.status !== "done" && /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", variant: "ghost", onClick: () => onStart(item), children: t(item.status === "error" ? "dataEntry.upload.retry" : "dataEntry.upload.start") }),
+      onCancel && item.status === "uploading" && /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", variant: "ghost", onClick: () => onCancel(item.uid), children: t("dataEntry.upload.cancel") }),
+      onRemove && /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          size: "sm",
+          variant: "ghost",
+          "aria-label": t("dataEntry.upload.removeFile", { name: item.name }),
+          onClick: () => onRemove(item.uid),
+          children: /* @__PURE__ */ jsx(X, { className: "ui-upload-row-icon", "aria-hidden": "true" })
+        }
+      )
+    ] });
+    return /* @__PURE__ */ jsx("li", { children: itemRender ? itemRender(node, item, items, {
+      remove: () => onRemove?.(item.uid),
+      preview: () => onPreview?.(item),
+      download: () => onDownload?.(item),
+      upload: () => onStart?.(item),
+      cancel: () => onCancel?.(item.uid)
+    }) : node }, item.uid);
+  }) });
 }
 export {
+  UPLOAD_LIST_IGNORE2 as UPLOAD_LIST_IGNORE,
   Upload,
   collectUploadCommitActions,
   createUploadItem2 as createUploadItem,