@multiplatform.one/forms 7.4.0 → 7.5.0

package/dist/cjs/fields/FileUpload/index.cjs

@@ -36,14 +36,22 @@ var import_utils = require("../../shared/utils.cjs");
 var import_theme = require("@multiplatform.one/theme");
 var import_colorRamps = require("../../shared/colorRamps.cjs");
 var import_t = require("../../shared/t.cjs");
+var import_nativeFilePicker = require("./nativeFilePicker.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
 const UploadAreaFrame = (0, import_tamagui2.styled)(import_tamagui2.YStack, {
   width: "100%",
   position: "relative",
   overflow: "hidden",
   borderStyle: "dashed",
-  backgroundColor: import_colorRamps.formInputColors.background.base,
-  borderColor: import_colorRamps.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: import_colorRamps.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).
@@ -56,13 +64,6 @@ const UploadAreaFrame = (0, import_tamagui2.styled)(import_tamagui2.YStack, {
   focusVisibleStyle: {
     outlineWidth: 0,
     outlineStyle: "none"
-  },
-  variants: {
-    outlined: {
-      true: {
-        backgroundColor: "transparent"
-      }
-    }
   }
 });
 const DropOverlayFrame = (0, import_tamagui2.styled)(import_tamagui2.YStack, {
@@ -82,7 +83,8 @@ const DropOverlayFrame = (0, import_tamagui2.styled)(import_tamagui2.YStack, {
 const UploadFileListFrame = (0, import_tamagui2.styled)(import_tamagui2.YStack, {
   width: "100%",
   borderTopWidth: 1,
-  borderTopColor: import_colorRamps.formCommonColors.divider
+  borderStyle: "dashed",
+  borderTopColor: import_colorRamps.formDropzoneColors.border
 });
 function FileUpload(props) {
   const {
@@ -93,12 +95,15 @@ function FileUpload(props) {
     multiple = false,
     dragDrop = true,
     showPreview = true,
-    placeholder = (0, import_t.t)("or drag and drop"),
+    // Bento caption on web; native has nothing to drag so the same slot is the tap hint.
+    placeholder = import_tamagui2.isWeb ? (0, import_t.t)("Drag a file into this area") : (0, import_t.t)("or tap to browse"),
     buttonText = (0, import_t.t)("Choose File"),
     onFileSelect,
     onFileRemove,
+    onUpload,
     onChange: onChangeProp,
     onValueChange: onValueChangeProp,
+    pickerMode = "auto",
     mode,
     name,
     preserveValue,
@@ -107,6 +112,7 @@ function FileUpload(props) {
     readOnly,
     skeleton,
     compact,
+    actions,
     id: idProp,
     ...fieldProps
   } = (0, import_tamagui.useProps)(props);
@@ -128,13 +134,30 @@ function FileUpload(props) {
   }, [onChangeProp, onValueChangeProp]);
   const resolvedValidators = (0, import_utils.useResolvedValidators)(fieldProps.required, validators, fieldProps.label, name);
   const cappedRadius = (0, import_utils.clampRadiusForLargeComponent)(knobProps.borderRadius.borderRadius);
+  const rowMediaPx = knobProps.nestedControl.px;
+  const rowGlyphSize = knobProps.controlIcon.width;
   const [selectedFiles, setSelectedFiles] = (0, import_react2.useState)([]);
+  const [transfers, setTransfers] = (0, import_react2.useState)([]);
   const [isDragOver, setIsDragOver] = (0, import_react2.useState)(false);
   const [validationError, setValidationError] = (0, import_react2.useState)();
   const fileInputRef = (0, import_react2.useRef)(null);
   const zoneCleanupRef = (0, import_react2.useRef)(null);
   const lastZoneInputWasKeyboardRef = (0, import_react2.useRef)(false);
   const previewUrlsRef = (0, import_react2.useRef)(/* @__PURE__ */new Map());
+  const transferSeqRef = (0, import_react2.useRef)(0);
+  const transfersRef = (0, import_react2.useRef)([]);
+  const onUploadRef = (0, import_react2.useRef)(onUpload);
+  onUploadRef.current = onUpload;
+  const emitFieldRef = (0, import_react2.useRef)(void 0);
+  const multipleRef = (0, import_react2.useRef)(multiple);
+  multipleRef.current = multiple;
+  const setTransfersAndRef = (0, import_react2.useCallback)(updater => {
+    setTransfers(prev => {
+      const next = updater(prev);
+      transfersRef.current = next;
+      return next;
+    });
+  }, []);
   (0, import_react2.useEffect)(() => {
     if (!import_tamagui2.isWeb) return;
     (0, import_theme.ensureKeyboardModalityTracking)();
@@ -151,6 +174,7 @@ function FileUpload(props) {
       document.removeEventListener("pointerdown", onPointer, true);
       previewUrlsRef.current.forEach(url => URL.revokeObjectURL(url));
       previewUrlsRef.current.clear();
+      transfersRef.current.forEach(item => item.controller.abort());
       zoneCleanupRef.current?.();
       zoneCleanupRef.current = null;
     };
@@ -192,6 +216,92 @@ function FileUpload(props) {
     }
     onValueChange(nextFiles[0] ?? null);
   }, [multiple]);
+  const runTransfer = (0, import_react2.useCallback)(async (id2, file, controller) => {
+    const upload = onUploadRef.current;
+    if (!upload) return;
+    try {
+      await upload(file, {
+        onProgress: percent => {
+          const n = Math.min(100, Math.max(0, Math.round(Number(percent) || 0)));
+          setTransfersAndRef(prev => prev.map(item => item.id === id2 ? {
+            ...item,
+            progress: n
+          } : item));
+        },
+        signal: controller.signal
+      });
+      if (controller.signal.aborted) return;
+      setTransfersAndRef(prev => prev.filter(item => item.id !== id2));
+      setSelectedFiles(prev => {
+        const nextFiles = multipleRef.current ? [...prev, file] : [file];
+        syncFieldValue(nextFiles, emitFieldRef.current);
+        return nextFiles;
+      });
+    } catch (err) {
+      if (controller.signal.aborted || err instanceof DOMException && err.name === "AbortError") {
+        setTransfersAndRef(prev => prev.filter(item => item.id !== id2));
+        return;
+      }
+      const problem = err instanceof Error && err.message ? err.message : (0, import_t.t)("Upload failed");
+      setTransfersAndRef(prev => prev.map(item => item.id === id2 ? {
+        ...item,
+        status: "failed",
+        error: {
+          problem,
+          action: (0, import_t.t)("Try again or remove the file"),
+          cta: (0, import_t.t)("Retry")
+        }
+      } : item));
+    }
+  }, [setTransfersAndRef, syncFieldValue]);
+  const startTransfer = (0, import_react2.useCallback)(file => {
+    if (!multipleRef.current) {
+      transfersRef.current.forEach(item2 => item2.controller.abort());
+      setTransfersAndRef(() => []);
+    }
+    const id2 = `xfer-${++transferSeqRef.current}`;
+    const controller = new AbortController();
+    const item = {
+      id: id2,
+      file,
+      status: "uploading",
+      progress: 0,
+      controller
+    };
+    setTransfersAndRef(prev => [...prev, item]);
+    void runTransfer(id2, file, controller);
+  }, [runTransfer, setTransfersAndRef]);
+  const handleCancelTransfer = (0, import_react2.useCallback)(id2 => {
+    const item = transfersRef.current.find(row => row.id === id2);
+    item?.controller.abort();
+    setTransfersAndRef(prev => prev.filter(row => row.id !== id2));
+  }, [setTransfersAndRef]);
+  const handleRetryTransfer = (0, import_react2.useCallback)(id2 => {
+    const item = transfersRef.current.find(row => row.id === id2);
+    if (!item) return;
+    item.controller.abort();
+    const controller = new AbortController();
+    setTransfersAndRef(prev => prev.map(row => row.id === id2 ? {
+      ...row,
+      status: "uploading",
+      progress: 0,
+      error: void 0,
+      controller
+    } : row));
+    void runTransfer(id2, item.file, controller);
+  }, [runTransfer, setTransfersAndRef]);
+  const handleRemoveTransfer = (0, import_react2.useCallback)(id2 => {
+    const item = transfersRef.current.find(row => row.id === id2);
+    item?.controller.abort();
+    if (import_tamagui2.isWeb && item) {
+      const previewUrl = previewUrlsRef.current.get(item.file);
+      if (previewUrl) {
+        URL.revokeObjectURL(previewUrl);
+        previewUrlsRef.current.delete(item.file);
+      }
+    }
+    setTransfersAndRef(prev => prev.filter(row => row.id !== id2));
+  }, [setTransfersAndRef]);
   const handleFileSelect = (0, import_react2.useCallback)((files, onValueChange, rawFileList) => {
     if (!files) return;
     const fileArray = Array.isArray(files) ? files : Array.from(files);
@@ -207,14 +317,19 @@ function FileUpload(props) {
     });
     setValidationError(errors.length > 0 ? errors.join("\n") : void 0);
     if (validFiles.length > 0) {
-      setSelectedFiles(prev => {
-        const nextFiles = multiple ? [...prev, ...validFiles] : validFiles.slice(0, 1);
-        syncFieldValue(nextFiles, onValueChange);
-        return nextFiles;
-      });
+      emitFieldRef.current = onValueChange;
+      if (onUploadRef.current) {
+        validFiles.forEach(file => startTransfer(file));
+      } else {
+        setSelectedFiles(prev => {
+          const nextFiles = multiple ? [...prev, ...validFiles] : validFiles.slice(0, 1);
+          syncFieldValue(nextFiles, onValueChange);
+          return nextFiles;
+        });
+      }
       onFileSelect?.(rawFileList ?? (Array.isArray(files) ? null : files));
     }
-  }, [multiple, validateFile, onFileSelect, syncFieldValue]);
+  }, [multiple, validateFile, onFileSelect, syncFieldValue, startTransfer]);
   const handleFileRemove = (0, import_react2.useCallback)((fileToRemove, onValueChange) => {
     if (import_tamagui2.isWeb) {
       const previewUrl = previewUrlsRef.current.get(fileToRemove);
@@ -263,6 +378,31 @@ function FileUpload(props) {
     if (disabled || readOnly) return;
     fileInputRef.current?.click();
   }, [disabled, readOnly]);
+  const nativePickInFlightRef = (0, import_react2.useRef)(false);
+  const openNativePicker = (0, import_react2.useCallback)(async (onValueChange, onBlurHandler) => {
+    if (disabled || readOnly || nativePickInFlightRef.current) return;
+    nativePickInFlightRef.current = true;
+    try {
+      const outcome = await (0, import_nativeFilePicker.pickFilesNatively)({
+        accept,
+        multiple,
+        mode: pickerMode
+      });
+      if (outcome.unavailable) {
+        setValidationError((0, import_t.t)("No file picker is available on this device."));
+        return;
+      }
+      if (outcome.denied) {
+        setValidationError((0, import_t.t)("Permission to open your photo library was denied."));
+        return;
+      }
+      if (outcome.canceled || outcome.files.length === 0) return;
+      handleFileSelect(outcome.files, onValueChange);
+      onBlurHandler?.();
+    } finally {
+      nativePickInFlightRef.current = false;
+    }
+  }, [accept, disabled, handleFileSelect, multiple, pickerMode, readOnly]);
   const isInteractiveChild = (0, import_react2.useCallback)(e => {
     const target = e.target;
     const current = e.currentTarget;
@@ -302,7 +442,10 @@ function FileUpload(props) {
     setKbZoneFocus(false);
   }, []);
   const getFilePreview = (0, import_react2.useCallback)(file => {
-    if (!import_tamagui2.isWeb) return null;
+    if (!import_tamagui2.isWeb) {
+      const uri = file.uri;
+      return uri && file.type?.startsWith("image/") ? uri : null;
+    }
     if (file.type.startsWith("image/")) {
       const existingUrl = previewUrlsRef.current.get(file);
       if (existingUrl) return existingUrl;
@@ -327,41 +470,89 @@ function FileUpload(props) {
     });
   }
   const canInteract = !disabled && !readOnly;
-  const renderUploadArea = (errorProp, onValueChange, onBlurHandler) => {
-    if (!import_tamagui2.isWeb) {
-      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(UploadAreaFrame, {
-        outlined: knobProps.outlined,
-        ...(disabled ? disabledState.surfaceKnobProps : void 0),
-        borderRadius: cappedRadius,
-        borderWidth: knobProps.borderRadius.borderWidth ?? 1,
-        ...(errorProp ? {
-          borderColor: import_colorRamps.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__ */(0, import_jsx_runtime.jsxs)(import_tamagui2.YStack, {
-          ...knobProps.panelPadding,
-          minHeight: (0, import_utils.getFieldHeight)(fieldProps.size || knobProps.sizeToken, 5),
-          width: "100%",
-          alignItems: "center",
-          justifyContent: "center",
-          ...knobProps.gap,
-          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui2.Paragraph, {
-            color: import_colorRamps.formCommonColors.text,
-            textAlign: "center",
-            children: (0, import_t.t)("File upload requires a native file picker.")
-          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui2.Paragraph, {
-            color: import_colorRamps.formCommonColors.muted,
-            textAlign: "center",
-            fontSize: "$2",
-            children: "Use expo-document-picker or expo-image-picker for native support."
-          })]
-        })
-      });
+  const hasRows = selectedFiles.length > 0 || transfers.length > 0;
+  const renderRemoveDisc = (ariaLabel, onPress) => canInteract ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
+    nested: true,
+    circular: true,
+    icon: import_react.XIcon,
+    "aria-label": ariaLabel,
+    backgroundColor: import_colorRamps.formDropzoneColors.removeDisc.background.base,
+    color: import_colorRamps.formDropzoneColors.removeDisc.ink,
+    hoverStyle: {
+      backgroundColor: import_colorRamps.formDropzoneColors.removeDisc.background.hover
+    },
+    pressStyle: {
+      backgroundColor: import_colorRamps.formDropzoneColors.removeDisc.background.press
+    },
+    onPress: e => {
+      e.stopPropagation();
+      onPress();
     }
+  }) : null;
+  const renderFileMeta = (file, preview, extra) => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui2.XStack, {
+    flex: 1,
+    gap: "$2",
+    alignItems: "center",
+    children: [preview ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui2.Image, {
+      borderRadius: cappedRadius,
+      src: preview,
+      alt: file.name,
+      width: rowMediaPx,
+      height: rowMediaPx,
+      objectFit: "cover"
+    }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui2.XStack, {
+      width: rowMediaPx,
+      height: rowMediaPx,
+      justifyContent: "center",
+      alignItems: "center",
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.FileIcon, {
+        size: rowGlyphSize
+      })
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui2.YStack, {
+      flex: 1,
+      gap: "$1",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui2.Text, {
+        numberOfLines: 1,
+        ...knobProps.body,
+        children: file.name
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui2.Text, {
+        numberOfLines: 1,
+        color: import_colorRamps.formCommonColors.text,
+        ...knobProps.label,
+        fontWeight: "700",
+        children: formatFileSize(file.size)
+      }), extra]
+    })]
+  });
+  const renderUploadArea = (errorProp, onValueChange, onBlurHandler) => {
+    emitFieldRef.current = onValueChange;
+    const requestFiles = import_tamagui2.isWeb ? openFileDialog : () => {
+      void openNativePicker(onValueChange, onBlurHandler);
+    };
+    const zoneInteractionProps = canInteract ? import_tamagui2.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: e => {
+          handleDrop(e, onValueChange);
+          onBlurHandler?.();
+        }
+      } : null)
+    } : {
+      role: "button",
+      onPress: requestFiles
+    } : {
+      cursor: disabled ? "not-allowed" : void 0
+    };
     return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(UploadAreaFrame, {
       id,
       ref: bindZoneNode,
@@ -377,48 +568,31 @@ function FileUpload(props) {
       } : void 0),
       elevation: knobProps.elevation,
       transition: knobProps.transition,
+      minHeight: (0, import_utils.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,
       ...(kbZoneFocus ? (0, import_theme.ensureFocusVisibleRing)({
-        outlineOffset: -2
+        outlineOffset: 0
       }) : void 0),
       hoverStyle: canInteract ? {
         borderColor: errorProp ? import_colorRamps.formCommonColors.error : import_colorRamps.formInputColors.border.hover,
-        ...(knobProps.outlined ? void 0 : {
-          backgroundColor: import_colorRamps.formInputColors.background.focus
-        })
+        // Held exception: the measured mpo $color4 hover flood stays
+        // (Bento's hover/drag states were not measurable headlessly).
+        backgroundColor: import_colorRamps.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" ? (0, import_t.t)("{{label}}: choose file", {
-            label: fieldProps.label
-          }) : (0, import_t.t)("Choose file")
-        }),
-        cursor: "pointer",
-        onClick: handleZoneClick,
-        onKeyDown: handleZoneKeyDown,
-        ...(dragDrop ? {
-          onDragEnter: handleDragEnter,
-          onDragOver: handleDragOver,
-          onDragLeave: handleDragLeave,
-          onDrop: e => {
-            handleDrop(e, onValueChange);
-            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" ? (0, import_t.t)("{{label}}: choose file", {
+          label: fieldProps.label
+        }) : (0, import_t.t)("Choose file")
+      } : null),
       children: [isDragOver && canInteract && dragDrop ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(DropOverlayFrame, {
         "data-file-upload": "overlay",
         borderRadius: cappedRadius,
@@ -429,15 +603,15 @@ function FileUpload(props) {
         ...knobProps.gap,
         ...knobProps.panelPadding,
         children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui2.XStack, {
-          width: compact ? 24 : 32,
-          height: compact ? 24 : 32,
+          width: rowMediaPx,
+          height: rowMediaPx,
           alignItems: "center",
           justifyContent: "center",
           ...{
             color: import_colorRamps.formCommonColors.text
           },
           children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.UploadIcon, {
-            size: compact ? 24 : 32,
+            size: rowMediaPx,
             "aria-hidden": true
           })
         }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui2.Text, {
@@ -448,38 +622,31 @@ function FileUpload(props) {
         })]
       }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui2.YStack, {
         ...knobProps.panelPadding,
-        minHeight: (0, import_utils.getFieldHeight)(fieldProps.size || knobProps.sizeToken, 5),
+        flexGrow: 1,
         width: "100%",
         alignItems: "center",
         justifyContent: "center",
         ...knobProps.gap,
-        children: [selectedFiles.length === 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui2.XStack, {
-          width: compact ? 24 : 32,
-          height: compact ? 24 : 32,
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui2.XStack, {
           alignItems: "center",
-          justifyContent: "center",
-          ...{
-            color: import_colorRamps.formCommonColors.muted
-          },
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.UploadIcon, {
-            size: compact ? 24 : 32,
-            "aria-hidden": true
-          })
-        }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
-          onPress: openFileDialog,
-          disabled: !canInteract,
-          size: knobProps.sizeToken,
-          tabIndex: -1,
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button.Text, {
-            ...knobProps.body,
-            children: buttonText
-          })
-        }), selectedFiles.length === 0 && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui2.Text, {
+          ...knobProps.gap,
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
+            onPress: requestFiles,
+            disabled: !canInteract,
+            size: knobProps.sizeToken,
+            tabIndex: -1,
+            icon: import_react.UploadIcon,
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button.Text, {
+              ...knobProps.body,
+              children: buttonText
+            })
+          }), actions]
+        }), selectedFiles.length === 0 && transfers.length === 0 && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui2.Text, {
           color: import_colorRamps.formCommonColors.muted,
           textAlign: "center",
           ...knobProps.body,
           children: placeholder
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("input", {
+        }), import_tamagui2.isWeb ? /* @__PURE__ */(0, import_jsx_runtime.jsx)("input", {
           ref: fileInputRef,
           type: "file",
           accept,
@@ -493,9 +660,11 @@ function FileUpload(props) {
             display: "none"
           },
           disabled: !canInteract
-        })]
-      }), selectedFiles.length > 0 && /* @__PURE__ */(0, import_jsx_runtime.jsx)(UploadFileListFrame, {
-        children: selectedFiles.map((file, index) => {
+        }) : null]
+      }), hasRows && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(UploadFileListFrame, {
+        "data-file-upload": "files",
+        borderTopWidth: knobProps.borderRadius.borderWidth ?? 1,
+        children: [selectedFiles.map((file, index) => {
           const preview = showPreview ? getFilePreview(file) : null;
           return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui2.XStack, {
             width: "100%",
@@ -503,52 +672,75 @@ function FileUpload(props) {
             alignItems: "center",
             justifyContent: "space-between",
             ...knobProps.panelPadding,
-            children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui2.XStack, {
-              flex: 1,
-              gap: "$2",
-              alignItems: "center",
-              children: [preview ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui2.Image, {
-                borderRadius: cappedRadius,
-                src: preview,
-                alt: file.name,
-                width: compact ? 24 : 32,
-                height: compact ? 24 : 32,
-                objectFit: "cover"
-              }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui2.XStack, {
-                width: compact ? 24 : 32,
-                height: compact ? 24 : 32,
-                justifyContent: "center",
-                alignItems: "center",
-                children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.FileIcon, {
-                  size: compact ? 14 : 16
+            children: [renderFileMeta(file, preview), renderRemoveDisc((0, import_t.t)("Remove {{name}}", {
+              name: file.name
+            }), () => handleFileRemove(file, onValueChange))]
+          }, `${file.name}-${index}`);
+        }), transfers.map(item => {
+          const preview = showPreview ? getFilePreview(item.file) : null;
+          const isUploading = item.status === "uploading";
+          const failed = item.status === "failed" ? item.error : void 0;
+          return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui2.XStack, {
+            "data-transfer-status": item.status,
+            width: "100%",
+            ...knobProps.gap,
+            alignItems: "center",
+            justifyContent: "space-between",
+            ...knobProps.panelPadding,
+            children: [renderFileMeta(item.file, preview, /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+              children: [isUploading ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui2.YStack, {
+                "data-file-upload": "progress",
+                role: "progressbar",
+                "aria-label": (0, import_t.t)("Uploading {{name}}", {
+                  name: item.file.name
+                }),
+                "aria-valuemin": 0,
+                "aria-valuemax": 100,
+                "aria-valuenow": item.progress,
+                height: 11,
+                width: "100%",
+                borderRadius: 1e3,
+                backgroundColor: import_colorRamps.formDropzoneColors.progress.track,
+                overflow: "hidden",
+                children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui2.YStack, {
+                  height: "100%",
+                  width: `${item.progress}%`,
+                  backgroundColor: import_colorRamps.formDropzoneColors.progress.fill
                 })
-              }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui2.YStack, {
-                flex: 1,
+              }) : null, failed ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui2.YStack, {
                 gap: "$1",
                 children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui2.Text, {
-                  numberOfLines: 1,
-                  ...knobProps.body,
-                  children: file.name
+                  color: import_colorRamps.formCommonColors.error,
+                  ...knobProps.label,
+                  children: failed.problem
                 }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui2.Text, {
-                  numberOfLines: 1,
-                  color: import_colorRamps.formCommonColors.text,
-                  ...knobProps.body,
-                  children: formatFileSize(file.size)
+                  color: import_colorRamps.formCommonColors.muted,
+                  ...knobProps.label,
+                  children: failed.action
                 })]
-              })]
-            }), canInteract && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
-              circular: true,
-              size: knobProps.sizeToken,
-              onPress: e => {
-                e.stopPropagation();
-                handleFileRemove(file, onValueChange);
-              },
-              children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button.Icon, {
-                children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.XIcon, {})
-              })
+              }) : null]
+            })), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui2.XStack, {
+              ...knobProps.gap,
+              alignItems: "center",
+              children: [canInteract && failed ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
+                outlined: true,
+                size: "$2",
+                "aria-label": (0, import_t.t)("Retry {{name}}", {
+                  name: item.file.name
+                }),
+                onPress: e => {
+                  e.stopPropagation();
+                  handleRetryTransfer(item.id);
+                },
+                children: failed.cta ?? (0, import_t.t)("Retry")
+              }) : null, isUploading ? renderRemoveDisc((0, import_t.t)("Cancel {{name}}", {
+                name: item.file.name
+              }), () => handleCancelTransfer(item.id)) : renderRemoveDisc((0, import_t.t)("Remove {{name}}", {
+                name: item.file.name
+              }), () => handleRemoveTransfer(item.id))]
             })]
-          }, `${file.name}-${index}`);
-        })
+          }, item.id);
+        })]
       })]
     });
   };