@multiplatform.one/forms 7.4.1 → 7.5.0

package/dist/esm/fields/FileUpload/index.native.js

@@ -1,22 +1,39 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { FileIcon, UploadIcon, XIcon } from "@phosphor-icons/react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useProps } from "tamagui";
-import { Image, isWeb, Paragraph, Text, XStack, YStack, styled } from "tamagui";
+import { Image, isWeb, Text, XStack, YStack, styled } from "tamagui";
 import { Button } from "../../Button/index.native.js";
 import { Field, FieldLayout } from "../../fieldLayout.native.js";
 import { Skeleton } from "../../Skeleton/index.native.js";
 import { clampRadiusForLargeComponent, getFieldError, getFieldHeight, mergeFieldHandler, useFormField, useResolvedValidators } from "../../shared/utils.native.js";
 import { ensureFocusVisibleRing, ensureKeyboardModalityTracking, wasKeyboardFocus } from "@multiplatform.one/theme";
-import { formCommonColors, formInputColors } from "../../shared/colorRamps.native.js";
+import { formCommonColors, formDropzoneColors, formInputColors } from "../../shared/colorRamps.native.js";
 import { t } from "../../shared/t.native.js";
+import { pickFilesNatively } from "./nativeFilePicker.native.js";
+function _instanceof(left, right) {
+  "@swc/helpers - instanceof";
+
+  if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) {
+    return !!right[Symbol.hasInstance](left);
+  } else {
+    return left instanceof right;
+  }
+}
 var UploadAreaFrame = styled(YStack, {
   width: "100%",
   position: "relative",
   overflow: "hidden",
   borderStyle: "dashed",
-  backgroundColor: formInputColors.background.base,
-  borderColor: formInputColors.border.base,
+  // BENTO-DERIVED (bento-pickers-measured.md §2/§4, MPO-57): the zone ground
+  // is TRANSPARENT — the page shows through and the dashed edge is the whole
+  // control. Only the LC-40 disabled wash paints the ground at rest; the
+  // hover/drag $color4 flood is a held mpo state, not a ground.
+  backgroundColor: "transparent",
+  // The dash is the legible $color9 step (boards media-01..04: 1px dashed
+  // rgb(77,77,77) light / rgb(133,133,133) dark) — formInputColors.border.base
+  // ($borderColor) measured near-invisible as a dashed edge.
+  borderColor: formDropzoneColors.border,
   // LC-71: kill UA :focus-visible on the dropzone. House ring is painted
   // only on keyboard-origin focus via wasKeyboardFocus() below — never the
   // 1px browser outline (forms-fileupload--standalone audit Cluster C).
@@ -29,13 +46,6 @@ var UploadAreaFrame = styled(YStack, {
   focusVisibleStyle: {
     outlineWidth: 0,
     outlineStyle: "none"
-  },
-  variants: {
-    outlined: {
-      true: {
-        backgroundColor: "transparent"
-      }
-    }
   }
 });
 var DropOverlayFrame = styled(YStack, {
@@ -55,7 +65,8 @@ var DropOverlayFrame = styled(YStack, {
 var UploadFileListFrame = styled(YStack, {
   width: "100%",
   borderTopWidth: 1,
-  borderTopColor: formCommonColors.divider
+  borderStyle: "dashed",
+  borderTopColor: formDropzoneColors.border
 });
 function FileUpload(props) {
   var {
@@ -66,12 +77,15 @@ function FileUpload(props) {
     multiple = false,
     dragDrop = true,
     showPreview = true,
-    placeholder = t("or drag and drop"),
+    // Bento caption on web; native has nothing to drag so the same slot is the tap hint.
+    placeholder = isWeb ? t("Drag a file into this area") : t("or tap to browse"),
     buttonText = t("Choose File"),
     onFileSelect,
     onFileRemove,
+    onUpload,
     onChange: onChangeProp,
     onValueChange: onValueChangeProp,
+    pickerMode = "auto",
     mode,
     name,
     preserveValue,
@@ -80,6 +94,7 @@ function FileUpload(props) {
     readOnly,
     skeleton,
     compact,
+    actions,
     id: idProp,
     ...fieldProps
   } = useProps(props);
@@ -101,13 +116,30 @@ function FileUpload(props) {
   }, [onChangeProp, onValueChangeProp]);
   var resolvedValidators = useResolvedValidators(fieldProps.required, validators, fieldProps.label, name);
   var cappedRadius = clampRadiusForLargeComponent(knobProps.borderRadius.borderRadius);
+  var rowMediaPx = knobProps.nestedControl.px;
+  var rowGlyphSize = knobProps.controlIcon.width;
   var [selectedFiles, setSelectedFiles] = useState([]);
+  var [transfers, setTransfers] = useState([]);
   var [isDragOver, setIsDragOver] = useState(false);
   var [validationError, setValidationError] = useState();
   var fileInputRef = useRef(null);
   var zoneCleanupRef = useRef(null);
   var lastZoneInputWasKeyboardRef = useRef(false);
   var previewUrlsRef = useRef(/* @__PURE__ */new Map());
+  var transferSeqRef = useRef(0);
+  var transfersRef = useRef([]);
+  var onUploadRef = useRef(onUpload);
+  onUploadRef.current = onUpload;
+  var emitFieldRef = useRef(void 0);
+  var multipleRef = useRef(multiple);
+  multipleRef.current = multiple;
+  var setTransfersAndRef = useCallback(function (updater) {
+    setTransfers(function (prev) {
+      var next = updater(prev);
+      transfersRef.current = next;
+      return next;
+    });
+  }, []);
   useEffect(function () {
     if (!isWeb) return;
     ensureKeyboardModalityTracking();
@@ -127,6 +159,9 @@ function FileUpload(props) {
         return URL.revokeObjectURL(url);
       });
       previewUrlsRef.current.clear();
+      transfersRef.current.forEach(function (item) {
+        return item.controller.abort();
+      });
       (_zoneCleanupRef_current = zoneCleanupRef.current) === null || _zoneCleanupRef_current === void 0 ? void 0 : _zoneCleanupRef_current.call(zoneCleanupRef);
       zoneCleanupRef.current = null;
     };
@@ -171,6 +206,132 @@ function FileUpload(props) {
     }
     onValueChange((_nextFiles_ = nextFiles[0]) !== null && _nextFiles_ !== void 0 ? _nextFiles_ : null);
   }, [multiple]);
+  var runTransfer = useCallback(async function (id2, file, controller) {
+    var upload = onUploadRef.current;
+    if (!upload) return;
+    try {
+      await upload(file, {
+        onProgress: function onProgress(percent) {
+          var n = Math.min(100, Math.max(0, Math.round(Number(percent) || 0)));
+          setTransfersAndRef(function (prev) {
+            return prev.map(function (item) {
+              return item.id === id2 ? {
+                ...item,
+                progress: n
+              } : item;
+            });
+          });
+        },
+        signal: controller.signal
+      });
+      if (controller.signal.aborted) return;
+      setTransfersAndRef(function (prev) {
+        return prev.filter(function (item) {
+          return item.id !== id2;
+        });
+      });
+      setSelectedFiles(function (prev) {
+        var nextFiles = multipleRef.current ? [...prev, file] : [file];
+        syncFieldValue(nextFiles, emitFieldRef.current);
+        return nextFiles;
+      });
+    } catch (err) {
+      if (controller.signal.aborted || _instanceof(err, DOMException) && err.name === "AbortError") {
+        setTransfersAndRef(function (prev) {
+          return prev.filter(function (item) {
+            return item.id !== id2;
+          });
+        });
+        return;
+      }
+      var problem = _instanceof(err, Error) && err.message ? err.message : t("Upload failed");
+      setTransfersAndRef(function (prev) {
+        return prev.map(function (item) {
+          return item.id === id2 ? {
+            ...item,
+            status: "failed",
+            error: {
+              problem,
+              action: t("Try again or remove the file"),
+              cta: t("Retry")
+            }
+          } : item;
+        });
+      });
+    }
+  }, [setTransfersAndRef, syncFieldValue]);
+  var startTransfer = useCallback(function (file) {
+    if (!multipleRef.current) {
+      transfersRef.current.forEach(function (item2) {
+        return item2.controller.abort();
+      });
+      setTransfersAndRef(function () {
+        return [];
+      });
+    }
+    var id2 = `xfer-${++transferSeqRef.current}`;
+    var controller = new AbortController();
+    var item = {
+      id: id2,
+      file,
+      status: "uploading",
+      progress: 0,
+      controller
+    };
+    setTransfersAndRef(function (prev) {
+      return [...prev, item];
+    });
+    void runTransfer(id2, file, controller);
+  }, [runTransfer, setTransfersAndRef]);
+  var handleCancelTransfer = useCallback(function (id2) {
+    var item = transfersRef.current.find(function (row) {
+      return row.id === id2;
+    });
+    item === null || item === void 0 ? void 0 : item.controller.abort();
+    setTransfersAndRef(function (prev) {
+      return prev.filter(function (row) {
+        return row.id !== id2;
+      });
+    });
+  }, [setTransfersAndRef]);
+  var handleRetryTransfer = useCallback(function (id2) {
+    var item = transfersRef.current.find(function (row) {
+      return row.id === id2;
+    });
+    if (!item) return;
+    item.controller.abort();
+    var controller = new AbortController();
+    setTransfersAndRef(function (prev) {
+      return prev.map(function (row) {
+        return row.id === id2 ? {
+          ...row,
+          status: "uploading",
+          progress: 0,
+          error: void 0,
+          controller
+        } : row;
+      });
+    });
+    void runTransfer(id2, item.file, controller);
+  }, [runTransfer, setTransfersAndRef]);
+  var handleRemoveTransfer = useCallback(function (id2) {
+    var item = transfersRef.current.find(function (row) {
+      return row.id === id2;
+    });
+    item === null || item === void 0 ? void 0 : item.controller.abort();
+    if (isWeb && item) {
+      var previewUrl = previewUrlsRef.current.get(item.file);
+      if (previewUrl) {
+        URL.revokeObjectURL(previewUrl);
+        previewUrlsRef.current.delete(item.file);
+      }
+    }
+    setTransfersAndRef(function (prev) {
+      return prev.filter(function (row) {
+        return row.id !== id2;
+      });
+    });
+  }, [setTransfersAndRef]);
   var handleFileSelect = useCallback(function (files, onValueChange, rawFileList) {
     if (!files) return;
     var fileArray = Array.isArray(files) ? files : Array.from(files);
@@ -186,14 +347,21 @@ function FileUpload(props) {
     });
     setValidationError(errors.length > 0 ? errors.join("\n") : void 0);
     if (validFiles.length > 0) {
-      setSelectedFiles(function (prev) {
-        var nextFiles = multiple ? [...prev, ...validFiles] : validFiles.slice(0, 1);
-        syncFieldValue(nextFiles, onValueChange);
-        return nextFiles;
-      });
+      emitFieldRef.current = onValueChange;
+      if (onUploadRef.current) {
+        validFiles.forEach(function (file) {
+          return startTransfer(file);
+        });
+      } else {
+        setSelectedFiles(function (prev) {
+          var nextFiles = multiple ? [...prev, ...validFiles] : validFiles.slice(0, 1);
+          syncFieldValue(nextFiles, onValueChange);
+          return nextFiles;
+        });
+      }
       onFileSelect === null || onFileSelect === void 0 ? void 0 : onFileSelect(rawFileList !== null && rawFileList !== void 0 ? rawFileList : Array.isArray(files) ? null : files);
     }
-  }, [multiple, validateFile, onFileSelect, syncFieldValue]);
+  }, [multiple, validateFile, onFileSelect, syncFieldValue, startTransfer]);
   var handleFileRemove = useCallback(function (fileToRemove, onValueChange) {
     if (isWeb) {
       var previewUrl = previewUrlsRef.current.get(fileToRemove);
@@ -245,6 +413,31 @@ function FileUpload(props) {
     if (disabled || readOnly) return;
     (_fileInputRef_current = fileInputRef.current) === null || _fileInputRef_current === void 0 ? void 0 : _fileInputRef_current.click();
   }, [disabled, readOnly]);
+  var nativePickInFlightRef = useRef(false);
+  var openNativePicker = useCallback(async function (onValueChange, onBlurHandler) {
+    if (disabled || readOnly || nativePickInFlightRef.current) return;
+    nativePickInFlightRef.current = true;
+    try {
+      var outcome = await pickFilesNatively({
+        accept,
+        multiple,
+        mode: pickerMode
+      });
+      if (outcome.unavailable) {
+        setValidationError(t("No file picker is available on this device."));
+        return;
+      }
+      if (outcome.denied) {
+        setValidationError(t("Permission to open your photo library was denied."));
+        return;
+      }
+      if (outcome.canceled || outcome.files.length === 0) return;
+      handleFileSelect(outcome.files, onValueChange);
+      onBlurHandler === null || onBlurHandler === void 0 ? void 0 : onBlurHandler();
+    } finally {
+      nativePickInFlightRef.current = false;
+    }
+  }, [accept, disabled, handleFileSelect, multiple, pickerMode, readOnly]);
   var isInteractiveChild = useCallback(function (e) {
     var target = e.target;
     var current = e.currentTarget;
@@ -290,7 +483,11 @@ function FileUpload(props) {
     setKbZoneFocus(false);
   }, []);
   var getFilePreview = useCallback(function (file) {
-    if (!isWeb) return null;
+    if (!isWeb) {
+      var _file_type;
+      var uri = file.uri;
+      return uri && ((_file_type = file.type) === null || _file_type === void 0 ? void 0 : _file_type.startsWith("image/")) ? uri : null;
+    }
     if (file.type.startsWith("image/")) {
       var existingUrl = previewUrlsRef.current.get(file);
       if (existingUrl) return existingUrl;
@@ -315,47 +512,106 @@ function FileUpload(props) {
     });
   }
   var canInteract = !disabled && !readOnly;
-  var renderUploadArea = function renderUploadArea2(errorProp, onValueChange, onBlurHandler) {
-    var _knobProps_borderRadius_borderWidth, _knobProps_borderRadius_borderWidth1;
-    if (!isWeb) {
-      var _knobProps_borderRadius_borderWidth2;
-      return /* @__PURE__ */_jsx(UploadAreaFrame, {
-        outlined: knobProps.outlined,
-        // LC-40: text-bearing chrome — surface wash, not an opacity dim
-        // (a dim here stacks with the inner Button's treatment).
-        ...(disabled ? disabledState.surfaceKnobProps : void 0),
+  var hasRows = selectedFiles.length > 0 || transfers.length > 0;
+  var renderRemoveDisc = function renderRemoveDisc2(ariaLabel, onPress) {
+    return canInteract ? /* @__PURE__ */_jsx(Button, {
+      // Bento remove: a filled $color12 disc with the inverse
+      // ✕ — painted at nestedControl (32) with hitSlop
+      // restoring the 44 floor via `nested` (held exception);
+      // the nested icon step lands the board's 14px ✕.
+      nested: true,
+      circular: true,
+      icon: XIcon,
+      "aria-label": ariaLabel,
+      backgroundColor: formDropzoneColors.removeDisc.background.base,
+      color: formDropzoneColors.removeDisc.ink,
+      hoverStyle: {
+        backgroundColor: formDropzoneColors.removeDisc.background.hover
+      },
+      pressStyle: {
+        backgroundColor: formDropzoneColors.removeDisc.background.press
+      },
+      onPress: function onPress1(e) {
+        e.stopPropagation();
+        onPress();
+      }
+    }) : null;
+  };
+  var renderFileMeta = function renderFileMeta2(file, preview, extra) {
+    return /* @__PURE__ */_jsxs(XStack, {
+      flex: 1,
+      gap: "$2",
+      alignItems: "center",
+      children: [preview ? /* @__PURE__ */_jsx(Image, {
         borderRadius: cappedRadius,
-        // Intentional: extract borderWidth from knobProps.borderRadius fragment
-        // to use as a fallback value, not as a style spread.
-        borderWidth: (_knobProps_borderRadius_borderWidth2 = knobProps.borderRadius.borderWidth) !== null && _knobProps_borderRadius_borderWidth2 !== void 0 ? _knobProps_borderRadius_borderWidth2 : 1,
-        ...(errorProp ? {
-          borderColor: formCommonColors.error
-        } : void 0),
-        elevation: knobProps.elevation,
-        transition: knobProps.transition,
-        "aria-required": fieldProps.required || void 0,
-        "aria-invalid": !!errorProp || void 0,
-        "aria-readonly": readOnly || void 0,
-        children: /* @__PURE__ */_jsxs(YStack, {
-          ...knobProps.panelPadding,
-          minHeight: getFieldHeight(fieldProps.size || knobProps.sizeToken, 5),
-          width: "100%",
-          alignItems: "center",
-          justifyContent: "center",
-          ...knobProps.gap,
-          children: [/* @__PURE__ */_jsx(Paragraph, {
-            color: formCommonColors.text,
-            textAlign: "center",
-            children: t("File upload requires a native file picker.")
-          }), /* @__PURE__ */_jsx(Paragraph, {
-            color: formCommonColors.muted,
-            textAlign: "center",
-            fontSize: "$2",
-            children: "Use expo-document-picker or expo-image-picker for native support."
-          })]
+        // src (string), not source: the RN source object leaks
+        // onto the DOM <img> as source="[object Object]" on web
+        src: preview,
+        alt: file.name,
+        width: rowMediaPx,
+        height: rowMediaPx,
+        objectFit: "cover"
+      }) : /* @__PURE__ */_jsx(XStack, {
+        width: rowMediaPx,
+        height: rowMediaPx,
+        justifyContent: "center",
+        alignItems: "center",
+        children: /* @__PURE__ */_jsx(FileIcon, {
+          size: rowGlyphSize
         })
-      });
-    }
+      }), /* @__PURE__ */_jsxs(YStack, {
+        flex: 1,
+        gap: "$1",
+        children: [/* @__PURE__ */_jsx(Text, {
+          numberOfLines: 1,
+          ...knobProps.body,
+          children: file.name
+        }),
+        /* Bento (bento-pickers-measured.md §2): the size is a
+        SECOND LINE, BOLD, one type step down (the label
+        tier — 13/24 at medium). The 700 is the Bento
+        treatment, a deliberate eject over the weight knob. */
+        /* @__PURE__ */
+        _jsx(Text, {
+          numberOfLines: 1,
+          color: formCommonColors.text,
+          ...knobProps.label,
+          fontWeight: "700",
+          children: formatFileSize(file.size)
+        }), extra]
+      })]
+    });
+  };
+  var renderUploadArea = function renderUploadArea2(errorProp, onValueChange, onBlurHandler) {
+    var _knobProps_borderRadius_borderWidth, _knobProps_borderRadius_borderWidth1, _knobProps_borderRadius_borderWidth2;
+    emitFieldRef.current = onValueChange;
+    var requestFiles = isWeb ? openFileDialog : function () {
+      void openNativePicker(onValueChange, onBlurHandler);
+    };
+    var zoneInteractionProps = canInteract ? isWeb ? {
+      // DROPZONE-FULL-TARGET: the entire surface is the click target.
+      role: "button",
+      tabIndex: 0,
+      onFocus: handleZoneFocus,
+      onBlur: handleZoneBlur,
+      cursor: "pointer",
+      onClick: handleZoneClick,
+      onKeyDown: handleZoneKeyDown,
+      ...(dragDrop ? {
+        onDragEnter: handleDragEnter,
+        onDragOver: handleDragOver,
+        onDragLeave: handleDragLeave,
+        onDrop: function onDrop(e) {
+          handleDrop(e, onValueChange);
+          onBlurHandler === null || onBlurHandler === void 0 ? void 0 : onBlurHandler();
+        }
+      } : null)
+    } : {
+      role: "button",
+      onPress: requestFiles
+    } : {
+      cursor: disabled ? "not-allowed" : void 0
+    };
     return /* @__PURE__ */_jsxs(UploadAreaFrame, {
       // The dropzone is this field's control: it carries the FieldLayout id
       // so the rendered `<label htmlFor>` resolves (family pattern — see
@@ -367,7 +623,8 @@ function FileUpload(props) {
       "data-kb-ring": kbZoneFocus ? "true" : void 0,
       outlined: knobProps.outlined,
       // LC-40: text-bearing chrome — surface wash, not an opacity dim
-      // (a dim here stacks with the inner Button's treatment).
+      // (a dim here stacks with the inner Button's treatment). This is the
+      // ONLY treatment that paints the transparent zone ground at rest.
       ...(disabled ? disabledState.surfaceKnobProps : void 0),
       borderRadius: cappedRadius,
       // Keep width stable on drag (Polaris overlay, not a 1→2 layout shift).
@@ -377,49 +634,37 @@ function FileUpload(props) {
       } : void 0),
       elevation: knobProps.elevation,
       transition: knobProps.transition,
+      // CONTRACT (boards media-01..03): the getFieldHeight floor sits on
+      // the FRAME, so the frame border-box measures 220 — hanging it on
+      // the inner stack painted 222, a number no token expresses.
+      minHeight: getFieldHeight(fieldProps.size || knobProps.sizeToken, 5),
       "aria-required": fieldProps.required || void 0,
       "aria-invalid": !!errorProp || void 0,
       "aria-readonly": readOnly || void 0,
       "aria-disabled": disabled || void 0,
-      // Inset: overflow:hidden on this frame would clip an outer ring (LC-71).
+      // One family ring rule (boards media-01 dz-ring): 2px $outlineColor at
+      // offset 0. The old -2 inset was the F1 defect — an element's own
+      // outline is never clipped by its own overflow:hidden.
       ...(kbZoneFocus ? ensureFocusVisibleRing({
-        outlineOffset: -2
+        outlineOffset: 0
       }) : void 0),
       hoverStyle: canInteract ? {
         borderColor: errorProp ? formCommonColors.error : formInputColors.border.hover,
-        ...(knobProps.outlined ? void 0 : {
-          backgroundColor: formInputColors.background.focus
-        })
+        // Held exception: the measured mpo $color4 hover flood stays
+        // (Bento's hover/drag states were not measurable headlessly).
+        backgroundColor: formInputColors.background.focus
       } : void 0,
-      ...(canInteract ? {
-        // DROPZONE-FULL-TARGET: the entire surface is the click target.
-        role: "button",
-        tabIndex: 0,
-        onFocus: handleZoneFocus,
-        onBlur: handleZoneBlur,
-        // Labeled fields get aria-labelledby auto-wired by the
-        // FieldLayout Label (tamagui Label htmlFor → this id); the
-        // aria-label fallback covers label-less usage.
-        ...(fieldProps.label && id ? null : {
-          "aria-label": typeof fieldProps.label === "string" ? t("{{label}}: choose file", {
-            label: fieldProps.label
-          }) : t("Choose file")
-        }),
-        cursor: "pointer",
-        onClick: handleZoneClick,
-        onKeyDown: handleZoneKeyDown,
-        ...(dragDrop ? {
-          onDragEnter: handleDragEnter,
-          onDragOver: handleDragOver,
-          onDragLeave: handleDragLeave,
-          onDrop: function onDrop(e) {
-            handleDrop(e, onValueChange);
-            onBlurHandler === null || onBlurHandler === void 0 ? void 0 : onBlurHandler();
-          }
-        } : null)
-      } : {
-        cursor: disabled ? "not-allowed" : void 0
-      }),
+      ...zoneInteractionProps,
+      ...(canInteract ?
+      // Labeled fields get aria-labelledby auto-wired by the FieldLayout
+      // Label (tamagui Label htmlFor → this id); the aria-label fallback
+      // covers label-less usage, and is what a screen reader announces
+      // for the native press target too.
+      fieldProps.label && id ? null : {
+        "aria-label": typeof fieldProps.label === "string" ? t("{{label}}: choose file", {
+          label: fieldProps.label
+        }) : t("Choose file")
+      } : null),
       children: [isDragOver && canInteract && dragDrop ? /* @__PURE__ */_jsxs(DropOverlayFrame, {
         "data-file-upload": "overlay",
         borderRadius: cappedRadius,
@@ -430,8 +675,8 @@ function FileUpload(props) {
         ...knobProps.gap,
         ...knobProps.panelPadding,
         children: [/* @__PURE__ */_jsx(XStack, {
-          width: compact ? 24 : 32,
-          height: compact ? 24 : 32,
+          width: rowMediaPx,
+          height: rowMediaPx,
           alignItems: "center",
           justifyContent: "center",
           // `color` tints the phosphor glyph via currentColor; Tamagui applies
@@ -440,7 +685,7 @@ function FileUpload(props) {
             color: formCommonColors.text
           },
           children: /* @__PURE__ */_jsx(UploadIcon, {
-            size: compact ? 24 : 32,
+            size: rowMediaPx,
             "aria-hidden": true
           })
         }), /* @__PURE__ */_jsx(Text, {
@@ -451,40 +696,35 @@ function FileUpload(props) {
         })]
       }) : null, /* @__PURE__ */_jsxs(YStack, {
         ...knobProps.panelPadding,
-        minHeight: getFieldHeight(fieldProps.size || knobProps.sizeToken, 5),
+        flexGrow: 1,
         width: "100%",
         alignItems: "center",
         justifyContent: "center",
         ...knobProps.gap,
-        children: [selectedFiles.length === 0 ? /* @__PURE__ */_jsx(XStack, {
-          width: compact ? 24 : 32,
-          height: compact ? 24 : 32,
+        children: [/* @__PURE__ */_jsxs(XStack, {
           alignItems: "center",
-          justifyContent: "center",
-          // `color` tints the phosphor glyph via currentColor; Tamagui applies
-          // it on web Stacks though the RN-flavored View type omits it.
-          ...{
-            color: formCommonColors.muted
-          },
-          children: /* @__PURE__ */_jsx(UploadIcon, {
-            size: compact ? 24 : 32,
-            "aria-hidden": true
-          })
-        }) : null, /* @__PURE__ */_jsx(Button, {
-          onPress: openFileDialog,
-          disabled: !canInteract,
-          size: knobProps.sizeToken,
-          tabIndex: -1,
-          children: /* @__PURE__ */_jsx(Button.Text, {
-            ...knobProps.body,
-            children: buttonText
-          })
-        }), selectedFiles.length === 0 && /* @__PURE__ */_jsx(Text, {
+          ...knobProps.gap,
+          children: [/* @__PURE__ */_jsx(Button, {
+            onPress: requestFiles,
+            disabled: !canInteract,
+            size: knobProps.sizeToken,
+            tabIndex: -1,
+            // BENTO-DERIVED (bento-pickers-measured.md §2/§4): NO standalone
+            // glyph exists — the upload mark rides INSIDE the CTA. Held at
+            // the house 44 control with the recipe's 16px icon (Bento draws
+            // 14 on its own 36/$3 button — ruled exception).
+            icon: UploadIcon,
+            children: /* @__PURE__ */_jsx(Button.Text, {
+              ...knobProps.body,
+              children: buttonText
+            })
+          }), actions]
+        }), selectedFiles.length === 0 && transfers.length === 0 && /* @__PURE__ */_jsx(Text, {
           color: formCommonColors.muted,
           textAlign: "center",
           ...knobProps.body,
           children: placeholder
-        }), /* @__PURE__ */_jsx("input", {
+        }), isWeb ? /* @__PURE__ */_jsx("input", {
           ref: fileInputRef,
           type: "file",
           accept,
@@ -498,9 +738,12 @@ function FileUpload(props) {
             display: "none"
           },
           disabled: !canInteract
-        })]
-      }), selectedFiles.length > 0 && /* @__PURE__ */_jsx(UploadFileListFrame, {
-        children: selectedFiles.map(function (file, index) {
+        }) : null]
+      }), hasRows && /* @__PURE__ */_jsxs(UploadFileListFrame, {
+        "data-file-upload": "files",
+        // The hairline tracks the frame edge's knob width — one dash voice.
+        borderTopWidth: (_knobProps_borderRadius_borderWidth2 = knobProps.borderRadius.borderWidth) !== null && _knobProps_borderRadius_borderWidth2 !== void 0 ? _knobProps_borderRadius_borderWidth2 : 1,
+        children: [selectedFiles.map(function (file, index) {
           var preview = showPreview ? getFilePreview(file) : null;
           return /* @__PURE__ */_jsxs(XStack, {
             width: "100%",
@@ -508,54 +751,82 @@ function FileUpload(props) {
             alignItems: "center",
             justifyContent: "space-between",
             ...knobProps.panelPadding,
-            children: [/* @__PURE__ */_jsxs(XStack, {
-              flex: 1,
-              gap: "$2",
-              alignItems: "center",
-              children: [preview ? /* @__PURE__ */_jsx(Image, {
-                borderRadius: cappedRadius,
-                // src (string), not source: the RN source object leaks
-                // onto the DOM <img> as source="[object Object]" on web
-                src: preview,
-                alt: file.name,
-                width: compact ? 24 : 32,
-                height: compact ? 24 : 32,
-                objectFit: "cover"
-              }) : /* @__PURE__ */_jsx(XStack, {
-                width: compact ? 24 : 32,
-                height: compact ? 24 : 32,
-                justifyContent: "center",
-                alignItems: "center",
-                children: /* @__PURE__ */_jsx(FileIcon, {
-                  size: compact ? 14 : 16
+            children: [renderFileMeta(file, preview), renderRemoveDisc(t("Remove {{name}}", {
+              name: file.name
+            }), function () {
+              return handleFileRemove(file, onValueChange);
+            })]
+          }, `${file.name}-${index}`);
+        }), transfers.map(function (item) {
+          var _failed_cta;
+          var preview = showPreview ? getFilePreview(item.file) : null;
+          var isUploading = item.status === "uploading";
+          var failed = item.status === "failed" ? item.error : void 0;
+          return /* @__PURE__ */_jsxs(XStack, {
+            "data-transfer-status": item.status,
+            width: "100%",
+            ...knobProps.gap,
+            alignItems: "center",
+            justifyContent: "space-between",
+            ...knobProps.panelPadding,
+            children: [renderFileMeta(item.file, preview, /* @__PURE__ */_jsxs(_Fragment, {
+              children: [isUploading ? /* @__PURE__ */_jsx(YStack, {
+                "data-file-upload": "progress",
+                role: "progressbar",
+                "aria-label": t("Uploading {{name}}", {
+                  name: item.file.name
+                }),
+                "aria-valuemin": 0,
+                "aria-valuemax": 100,
+                "aria-valuenow": item.progress,
+                height: 11,
+                width: "100%",
+                borderRadius: 1e3,
+                backgroundColor: formDropzoneColors.progress.track,
+                overflow: "hidden",
+                children: /* @__PURE__ */_jsx(YStack, {
+                  height: "100%",
+                  width: `${item.progress}%`,
+                  backgroundColor: formDropzoneColors.progress.fill
                 })
-              }), /* @__PURE__ */_jsxs(YStack, {
-                flex: 1,
+              }) : null, failed ? /* @__PURE__ */_jsxs(YStack, {
                 gap: "$1",
                 children: [/* @__PURE__ */_jsx(Text, {
-                  numberOfLines: 1,
-                  ...knobProps.body,
-                  children: file.name
+                  color: formCommonColors.error,
+                  ...knobProps.label,
+                  children: failed.problem
                 }), /* @__PURE__ */_jsx(Text, {
-                  numberOfLines: 1,
-                  color: formCommonColors.text,
-                  ...knobProps.body,
-                  children: formatFileSize(file.size)
+                  color: formCommonColors.muted,
+                  ...knobProps.label,
+                  children: failed.action
                 })]
+              }) : null]
+            })), /* @__PURE__ */_jsxs(XStack, {
+              ...knobProps.gap,
+              alignItems: "center",
+              children: [canInteract && failed ? /* @__PURE__ */_jsx(Button, {
+                outlined: true,
+                size: "$2",
+                "aria-label": t("Retry {{name}}", {
+                  name: item.file.name
+                }),
+                onPress: function onPress(e) {
+                  e.stopPropagation();
+                  handleRetryTransfer(item.id);
+                },
+                children: (_failed_cta = failed.cta) !== null && _failed_cta !== void 0 ? _failed_cta : t("Retry")
+              }) : null, isUploading ? renderRemoveDisc(t("Cancel {{name}}", {
+                name: item.file.name
+              }), function () {
+                return handleCancelTransfer(item.id);
+              }) : renderRemoveDisc(t("Remove {{name}}", {
+                name: item.file.name
+              }), function () {
+                return handleRemoveTransfer(item.id);
               })]
-            }), canInteract && /* @__PURE__ */_jsx(Button, {
-              circular: true,
-              size: knobProps.sizeToken,
-              onPress: function onPress(e) {
-                e.stopPropagation();
-                handleFileRemove(file, onValueChange);
-              },
-              children: /* @__PURE__ */_jsx(Button.Icon, {
-                children: /* @__PURE__ */_jsx(XIcon, {})
-              })
             })]
-          }, `${file.name}-${index}`);
-        })
+          }, item.id);
+        })]
       })]
     });
   };