@byline/ui 2.2.10 → 2.3.1

package/dist/fields/file/file-upload-field.js

@@ -0,0 +1,128 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useRef, useState } from "react";
+import { createPendingStoredFileValue } from "@byline/core";
+import classnames from "classnames";
+import { useFormContext } from "../../forms/form-context.js";
+import file_upload_field_module from "./file-upload-field.module.js";
+const FileUploadField = ({ field: _field, collectionPath, fieldPath, onUploaded, accept })=>{
+    const inputRef = useRef(null);
+    const [status, setStatus] = useState('idle');
+    const [errorMessage, setErrorMessage] = useState(null);
+    const [isDragOver, setIsDragOver] = useState(false);
+    const { addPendingUpload } = useFormContext();
+    const handleFileSelected = useCallback((file)=>{
+        setStatus('processing');
+        setErrorMessage(null);
+        const previewUrl = URL.createObjectURL(file);
+        const pendingValue = createPendingStoredFileValue(file, previewUrl);
+        addPendingUpload(fieldPath, {
+            file,
+            previewUrl,
+            collectionPath
+        });
+        setStatus('idle');
+        onUploaded(pendingValue);
+    }, [
+        collectionPath,
+        fieldPath,
+        addPendingUpload,
+        onUploaded
+    ]);
+    const handleFileChange = useCallback((e)=>{
+        const file = e.target.files?.[0];
+        if (file) handleFileSelected(file);
+        e.target.value = '';
+    }, [
+        handleFileSelected
+    ]);
+    const handleBrowseClick = useCallback(()=>{
+        inputRef.current?.click();
+    }, []);
+    const handleDragOver = useCallback((e)=>{
+        e.preventDefault();
+        setIsDragOver(true);
+    }, []);
+    const handleDragLeave = useCallback((e)=>{
+        e.preventDefault();
+        setIsDragOver(false);
+    }, []);
+    const handleDrop = useCallback((e)=>{
+        e.preventDefault();
+        setIsDragOver(false);
+        const file = e.dataTransfer.files?.[0];
+        if (file) handleFileSelected(file);
+    }, [
+        handleFileSelected
+    ]);
+    const isProcessing = 'processing' === status;
+    return /*#__PURE__*/ jsxs("div", {
+        className: classnames('byline-field-file-upload', file_upload_field_module.root),
+        children: [
+            /*#__PURE__*/ jsx("input", {
+                ref: inputRef,
+                type: "file",
+                accept: accept,
+                className: classnames('byline-field-file-upload-input', file_upload_field_module.input),
+                onChange: handleFileChange,
+                disabled: isProcessing,
+                "aria-hidden": "true",
+                tabIndex: -1
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                role: "button",
+                tabIndex: 0,
+                "aria-label": "Upload file — drag and drop or click to browse",
+                onDragOver: handleDragOver,
+                onDragLeave: handleDragLeave,
+                onDrop: handleDrop,
+                onClick: handleBrowseClick,
+                onKeyDown: (e)=>{
+                    if ('Enter' === e.key || ' ' === e.key) {
+                        e.preventDefault();
+                        handleBrowseClick();
+                    }
+                },
+                className: classnames('byline-field-file-upload-zone', file_upload_field_module.zone, isDragOver && !isProcessing && [
+                    'byline-field-file-upload-zone-active',
+                    file_upload_field_module["zone-active"]
+                ], isProcessing && [
+                    'byline-field-file-upload-zone-busy',
+                    file_upload_field_module["zone-busy"]
+                ]),
+                children: [
+                    /*#__PURE__*/ jsx("svg", {
+                        xmlns: "http://www.w3.org/2000/svg",
+                        className: classnames('byline-field-file-upload-icon', file_upload_field_module.icon),
+                        fill: "none",
+                        viewBox: "0 0 24 24",
+                        stroke: "currentColor",
+                        strokeWidth: 1.5,
+                        "aria-hidden": "true",
+                        children: /*#__PURE__*/ jsx("path", {
+                            strokeLinecap: "round",
+                            strokeLinejoin: "round",
+                            d: "M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5"
+                        })
+                    }),
+                    /*#__PURE__*/ jsxs("span", {
+                        className: classnames('byline-field-file-upload-label', file_upload_field_module.label),
+                        children: [
+                            "Drop file here or",
+                            ' ',
+                            /*#__PURE__*/ jsx("span", {
+                                className: classnames('byline-field-file-upload-action', file_upload_field_module.action),
+                                children: "browse"
+                            })
+                        ]
+                    })
+                ]
+            }),
+            'error' === status && errorMessage && /*#__PURE__*/ jsx("p", {
+                className: classnames('byline-field-file-upload-error', file_upload_field_module.error),
+                role: "alert",
+                children: errorMessage
+            })
+        ]
+    });
+};
+export { FileUploadField };

package/dist/fields/file/file-upload-field.module.js

@@ -0,0 +1,15 @@
+import "./file-upload-field_module.css";
+const file_upload_field_module = {
+    root: "root-Eb8eWY",
+    input: "input-xBB8ah",
+    zone: "zone-HdQNmA",
+    "zone-active": "zone-active-iYZTsU",
+    zoneActive: "zone-active-iYZTsU",
+    "zone-busy": "zone-busy-GmToil",
+    zoneBusy: "zone-busy-GmToil",
+    icon: "icon-vXw1Do",
+    label: "label-XCy7AX",
+    action: "action-LUT6jM",
+    error: "error-fFWMW2"
+};
+export default file_upload_field_module;

package/dist/fields/file/file-upload-field_module.css

@@ -0,0 +1,74 @@
+:is(.root-Eb8eWY, .byline-field-file-upload) {
+  margin-top: .25rem;
+}
+
+:is(.input-xBB8ah, .byline-field-file-upload-input) {
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  position: absolute;
+  overflow: hidden;
+}
+
+:is(.zone-HdQNmA, .byline-field-file-upload-zone) {
+  justify-content: center;
+  align-items: center;
+  gap: var(--spacing-8);
+  border: 2px dashed var(--gray-600);
+  border-radius: var(--border-radius-lg);
+  color: var(--gray-400);
+  text-align: center;
+  cursor: pointer;
+  -webkit-user-select: none;
+  user-select: none;
+  flex-direction: column;
+  padding: 1.5rem 1rem;
+  transition: color .15s, background-color .15s, border-color .15s;
+  display: flex;
+}
+
+:is(.zone-HdQNmA:hover, .byline-field-file-upload-zone:hover) {
+  border-color: var(--primary-500);
+  background-color: oklch(from var(--primary-900) l c h / .1);
+}
+
+:is(.zone-active-iYZTsU, .byline-field-file-upload-zone-active) {
+  border-color: var(--primary-400);
+  background-color: oklch(from var(--primary-900) l c h / .2);
+  color: var(--primary-300);
+}
+
+:is(.zone-busy-GmToil, .byline-field-file-upload-zone-busy) {
+  border-color: var(--gray-700);
+  background-color: oklch(from var(--canvas-800) l c h / .5);
+  color: var(--gray-600);
+  cursor: not-allowed;
+}
+
+:is(.icon-vXw1Do, .byline-field-file-upload-icon) {
+  opacity: .6;
+  width: 1.75rem;
+  height: 1.75rem;
+}
+
+:is(.label-XCy7AX, .byline-field-file-upload-label) {
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+}
+
+:is(.action-LUT6jM, .byline-field-file-upload-action) {
+  color: var(--primary-400);
+  text-underline-offset: 2px;
+  text-decoration: underline;
+}
+
+:is(.error-fFWMW2, .byline-field-file-upload-error) {
+  color: var(--red-400);
+  font-size: var(--font-size-xs);
+  margin-top: .375rem;
+}
+

package/dist/fields/image/image-field.js

@@ -2,8 +2,10 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { isPendingStoredFileValue } from "@byline/core";
 import classnames from "classnames";
-import { useFieldError, useFieldValue, useFormContext, useIsDirty } from "../../forms/form-context.js";
-import { ErrorText, HelpText, Label } from "../../uikit.js";
+import { IconButton } from "../../components/button/icon-button.js";
+import { useFieldError, useFieldValue, useFormContext, useIsDirty, useIsFieldUploading } from "../../forms/form-context.js";
+import { CloseIcon } from "../../icons/close-icon.js";
+import { ErrorText, HelpText, Label, LoaderRing } from "../../uikit.js";
 import { ImageLightbox } from "../../widgets/image-lightbox/image-lightbox.js";
 import { useFieldChangeHandler } from "../use-field-change-handler.js";
 import image_field_module from "./image-field.module.js";
@@ -13,6 +15,7 @@ const ImageField = ({ field, collectionPath, value, defaultValue, onChange: _onC
     const fieldError = useFieldError(fieldPath);
     const isDirty = useIsDirty(fieldPath);
     const fieldValue = useFieldValue(fieldPath);
+    const isUploading = useIsFieldUploading(fieldPath);
     const { removePendingUpload } = useFormContext();
     const handleChange = useFieldChangeHandler(field, fieldPath);
     const incomingValue = isDirty ? fieldValue ?? null : value ?? fieldValue ?? defaultValue ?? null;
@@ -35,22 +38,14 @@ const ImageField = ({ field, collectionPath, value, defaultValue, onChange: _onC
     return /*#__PURE__*/ jsxs("div", {
         className: `byline-field-image ${field.name}`,
         children: [
-            /*#__PURE__*/ jsxs("div", {
+            /*#__PURE__*/ jsx("div", {
                 className: classnames('byline-field-image-header', image_field_module.header),
-                children: [
-                    /*#__PURE__*/ jsx(Label, {
-                        id: htmlId,
-                        htmlFor: htmlId,
-                        label: field.label ?? field.name,
-                        required: !field.optional
-                    }),
-                    !showUploadWidget && collectionPath && /*#__PURE__*/ jsx("button", {
-                        type: "button",
-                        className: classnames('byline-field-image-remove', image_field_module.remove),
-                        onClick: handleRemove,
-                        children: "Remove"
-                    })
-                ]
+                children: /*#__PURE__*/ jsx(Label, {
+                    id: htmlId,
+                    htmlFor: htmlId,
+                    label: field.label ?? field.name,
+                    required: !field.optional
+                })
             }),
             showUploadWidget ? collectionPath ? /*#__PURE__*/ jsx(ImageUploadField, {
                 field: field,
@@ -65,6 +60,27 @@ const ImageField = ({ field, collectionPath, value, defaultValue, onChange: _onC
             }) : /*#__PURE__*/ jsxs("div", {
                 className: classnames('byline-field-image-tile', image_field_module.tile),
                 children: [
+                    isUploading && /*#__PURE__*/ jsx("div", {
+                        className: classnames('byline-field-image-uploading', image_field_module.uploading),
+                        "aria-live": "polite",
+                        "aria-busy": "true",
+                        children: /*#__PURE__*/ jsx(LoaderRing, {})
+                    }),
+                    collectionPath && /*#__PURE__*/ jsx("div", {
+                        className: classnames('byline-field-image-remove', image_field_module.remove),
+                        children: /*#__PURE__*/ jsx(IconButton, {
+                            type: "button",
+                            intent: "noeffect",
+                            onClick: handleRemove,
+                            size: "xs",
+                            disabled: isUploading,
+                            "aria-label": "Remove image",
+                            children: /*#__PURE__*/ jsx(CloseIcon, {
+                                width: "15px",
+                                height: "15px"
+                            })
+                        })
+                    }),
                     previewUrl && /*#__PURE__*/ jsxs("div", {
                         className: classnames('byline-field-image-preview-wrap', image_field_module["preview-wrap"]),
                         children: [

package/dist/fields/image/image-field.module.js

@@ -12,6 +12,7 @@ const image_field_module = {
     "preview-svg": "preview-svg-sCwreb",
     previewSvg: "preview-svg-sCwreb",
     pending: "pending-s6X_52",
+    uploading: "uploading-nqh2Gh",
     meta: "meta-uHyKiu",
     "meta-key": "meta-key-eR6iRU",
     metaKey: "meta-key-eR6iRU",

package/dist/fields/image/image-field_module.css

@@ -6,18 +6,18 @@
 }
 
 :is(.remove-ib7eKx, .byline-field-image-remove) {
-  color: var(--red-500);
-  font-size: var(--font-size-xs);
-  cursor: pointer;
-  background: none;
-  border: none;
-  padding: 0;
+  top: var(--spacing-6);
+  right: var(--spacing-6);
+  z-index: 1;
+  position: absolute;
 }
 
-:is(.remove-ib7eKx:hover, .byline-field-image-remove:hover) {
-  color: var(--red-400);
-  text-underline-offset: 2px;
-  text-decoration: underline;
+.byline-field-image-remove .byline-button {
+  color: var(--gray-900);
+}
+
+:is(.dark .byline-field-image-remove .byline-button, [data-theme="dark"] .byline-field-image-remove .byline-button) {
+  color: var(--gray-200);
 }
 
 :is(.empty-b8pdoJ, .byline-field-image-empty) {
@@ -33,6 +33,7 @@
   border-radius: var(--border-radius-md);
   margin-top: .25rem;
   display: flex;
+  position: relative;
 }
 
 :is(.preview-wrap-Cjr0PD, .byline-field-image-preview-wrap) {
@@ -90,7 +91,19 @@
   left: .25rem;
 }
 
+:is(.uploading-nqh2Gh, .byline-field-image-uploading) {
+  z-index: 2;
+  background-color: oklch(from var(--gray-950) l c h / .5);
+  border-radius: var(--border-radius-md);
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  position: absolute;
+  inset: 0;
+}
+
 :is(.meta-uHyKiu, .byline-field-image-meta) {
+  padding-right: var(--spacing-32);
   color: var(--gray-200);
   font-size: var(--font-size-xs);
   flex-direction: column;

package/dist/fields/relation/relation-field.js

@@ -3,7 +3,9 @@ import { useState } from "react";
 import { getCollectionAdminConfig, getCollectionDefinition } from "@byline/core";
 import classnames from "classnames";
 import { useFieldError, useFieldValue } from "../../forms/form-context.js";
-import { Button, ErrorText, Label } from "../../uikit.js";
+import { CloseIcon } from "../../icons/close-icon.js";
+import { EditIcon } from "../../icons/edit-icon.js";
+import { Button, ErrorText, IconButton, Label } from "../../uikit.js";
 import relation_field_module from "./relation-field.module.js";
 import { RelationPicker } from "./relation-picker.js";
 import { RelationSummary } from "./relation-summary.js";
@@ -38,22 +40,14 @@ const RelationField = ({ field, value, defaultValue, onChange, id, path })=>{
     return /*#__PURE__*/ jsxs("div", {
         className: `byline-field-relation ${field.name}`,
         children: [
-            /*#__PURE__*/ jsxs("div", {
+            /*#__PURE__*/ jsx("div", {
                 className: classnames('byline-field-relation-header', relation_field_module.header),
-                children: [
-                    /*#__PURE__*/ jsx(Label, {
-                        id: `${htmlId}-label`,
-                        htmlFor: htmlId,
-                        label: field.label ?? field.name,
-                        required: !field.optional
-                    }),
-                    incomingValue && !isUnknown && /*#__PURE__*/ jsx("button", {
-                        type: "button",
-                        className: classnames('byline-field-relation-remove', relation_field_module.remove),
-                        onClick: handleRemove,
-                        children: "Remove"
-                    })
-                ]
+                children: /*#__PURE__*/ jsx(Label, {
+                    id: `${htmlId}-label`,
+                    htmlFor: htmlId,
+                    label: field.label ?? field.name,
+                    required: !field.optional
+                })
             }),
             field.helpText && /*#__PURE__*/ jsx("div", {
                 className: classnames('byline-field-relation-help', relation_field_module.help),
@@ -92,14 +86,33 @@ const RelationField = ({ field, value, defaultValue, onChange, id, path })=>{
                         value: incomingValue,
                         cachedRecord: cachedRecord
                     }),
-                    /*#__PURE__*/ jsx(Button, {
-                        id: htmlId,
-                        size: "xs",
-                        variant: "outlined",
-                        intent: "noeffect",
-                        type: "button",
-                        onClick: ()=>setPickerOpen(true),
-                        children: "Change"
+                    /*#__PURE__*/ jsxs("div", {
+                        className: classnames('byline-field-relation-actions', relation_field_module.actions),
+                        children: [
+                            /*#__PURE__*/ jsx(IconButton, {
+                                id: htmlId,
+                                type: "button",
+                                intent: "noeffect",
+                                size: "xs",
+                                "aria-label": `Change ${targetDef.labels.singular}`,
+                                onClick: ()=>setPickerOpen(true),
+                                children: /*#__PURE__*/ jsx(EditIcon, {
+                                    width: "15px",
+                                    height: "15px"
+                                })
+                            }),
+                            /*#__PURE__*/ jsx(IconButton, {
+                                type: "button",
+                                intent: "noeffect",
+                                size: "xs",
+                                "aria-label": `Remove ${targetDef.labels.singular}`,
+                                onClick: handleRemove,
+                                children: /*#__PURE__*/ jsx(CloseIcon, {
+                                    width: "15px",
+                                    height: "15px"
+                                })
+                            })
+                        ]
                     })
                 ]
             }) : /*#__PURE__*/ jsxs(Button, {

package/dist/fields/relation/relation-field.module.js

@@ -1,13 +1,13 @@
 import "./relation-field_module.css";
 const relation_field_module = {
     header: "header-y7lSnb",
-    remove: "remove-po_DBR",
     help: "help-DEGVPH",
     "error-tile": "error-tile-y2kiiq",
     errorTile: "error-tile-y2kiiq",
     "error-text": "error-text-jHQh34",
     errorText: "error-text-jHQh34",
     tile: "tile-Y3_yre",
+    actions: "actions-Nov8hS",
     mono: "mono-y8Xo6b"
 };
 export default relation_field_module;

package/dist/fields/relation/relation-field_module.css

@@ -5,21 +5,6 @@
   display: flex;
 }
 
-:is(.remove-po_DBR, .byline-field-relation-remove) {
-  color: var(--red-500);
-  font-size: var(--font-size-xs);
-  cursor: pointer;
-  background: none;
-  border: none;
-  padding: 0;
-}
-
-:is(.remove-po_DBR:hover, .byline-field-relation-remove:hover) {
-  color: var(--red-400);
-  text-underline-offset: 2px;
-  text-decoration: underline;
-}
-
 :is(.help-DEGVPH, .byline-field-relation-help) {
   color: var(--gray-400);
   font-size: var(--font-size-xs);
@@ -45,7 +30,7 @@
 
 :is(.tile-Y3_yre, .byline-field-relation-tile) {
   justify-content: space-between;
-  align-items: center;
+  align-items: flex-start;
   gap: var(--spacing-8);
   padding: var(--spacing-8);
   border: var(--border-width-thin) var(--border-style-solid) var(--primary-500);
@@ -56,6 +41,21 @@
   display: flex;
 }
 
+:is(.actions-Nov8hS, .byline-field-relation-actions) {
+  align-items: center;
+  gap: var(--spacing-4);
+  flex-shrink: 0;
+  display: flex;
+}
+
+.byline-field-relation-actions .byline-button {
+  color: var(--gray-900);
+}
+
+:is(.dark .byline-field-relation-actions .byline-button, [data-theme="dark"] .byline-field-relation-actions .byline-button) {
+  color: var(--gray-200);
+}
+
 :is(.mono-y8Xo6b, .byline-field-relation-mono) {
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
 }

package/dist/forms/form-context.d.ts

@@ -28,6 +28,7 @@ type FieldListener = (value: any) => void;
 type ErrorsListener = (errors: FormError[]) => void;
 type MetaListener = () => void;
 type SystemPathListener = (value: string | null) => void;
+type FieldUploadingListener = (uploading: boolean) => void;
 interface FormContextType {
     setFieldValue: (name: string, value: any) => void;
     setFieldStore: (name: string, value: any) => void;
@@ -54,6 +55,9 @@ interface FormContextType {
     getPendingUploads: () => Map<string, PendingUpload>;
     hasPendingUploads: () => boolean;
     clearPendingUploads: () => void;
+    setFieldUploading: (fieldPath: string, uploading: boolean) => void;
+    getIsFieldUploading: (fieldPath: string) => boolean;
+    subscribeFieldUploading: (fieldPath: string, listener: FieldUploadingListener) => () => void;
     getSystemPath: () => string | null;
     setSystemPath: (value: string | null) => void;
     subscribeSystemPath: (listener: SystemPathListener) => () => void;
@@ -75,4 +79,11 @@ export declare const useFormMeta: () => {
 };
 export declare const useIsDirty: (name: string) => boolean;
 export declare const useFieldValue: <T = any>(name: string) => T | undefined;
+/**
+ * Subscribe to a single field's upload-in-flight state. Returns `true` while
+ * the form orchestrator is actively transporting this field's pending upload
+ * (between the `setFieldUploading(path, true)` and the matching `false`
+ * emitted by the upload executor's progress callback).
+ */
+export declare const useIsFieldUploading: (fieldPath: string) => boolean;
 export {};

package/dist/forms/form-context.js

@@ -2,7 +2,7 @@
 import { jsx } from "react/jsx-runtime";
 import { createContext, useCallback, useContext, useEffect, useRef, useState } from "react";
 import { normalizeHooks } from "@byline/core";
-import { get, set } from "lodash-es";
+import { get, set as external_lodash_es_set } from "lodash-es";
 const FormContext = /*#__PURE__*/ createContext(null);
 const useFormContext = ()=>{
     const context = useContext(FormContext);
@@ -16,6 +16,8 @@ const FormProvider = ({ children, initialData = {} })=>{
     const dirtyFields = useRef(new Set());
     const patchesRef = useRef([]);
     const pendingUploadsRef = useRef(new Map());
+    const uploadingFieldsRef = useRef(new Set());
+    const uploadingListenersRef = useRef(new Map());
     const fieldListeners = useRef(new Map());
     const errorListeners = useRef(new Set());
     const metaListeners = useRef(new Set());
@@ -65,7 +67,7 @@ const FormProvider = ({ children, initialData = {} })=>{
         const newFieldValues = {
             ...fieldValues.current
         };
-        set(newFieldValues, name, value);
+        external_lodash_es_set(newFieldValues, name, value);
         fieldValues.current = newFieldValues;
         dirtyFields.current.add(name);
         notifyFieldListeners(name, value);
@@ -180,6 +182,34 @@ const FormProvider = ({ children, initialData = {} })=>{
         for (const upload of pendingUploadsRef.current.values())URL.revokeObjectURL(upload.previewUrl);
         pendingUploadsRef.current.clear();
     }, []);
+    const setFieldUploading = useCallback((fieldPath, uploading)=>{
+        if (uploading) {
+            if (uploadingFieldsRef.current.has(fieldPath)) return;
+            uploadingFieldsRef.current.add(fieldPath);
+        } else {
+            if (!uploadingFieldsRef.current.has(fieldPath)) return;
+            uploadingFieldsRef.current.delete(fieldPath);
+        }
+        uploadingListenersRef.current.get(fieldPath)?.forEach((listener)=>{
+            listener(uploading);
+        });
+    }, []);
+    const getIsFieldUploading = useCallback((fieldPath)=>uploadingFieldsRef.current.has(fieldPath), []);
+    const subscribeFieldUploading = useCallback((fieldPath, listener)=>{
+        let listeners = uploadingListenersRef.current.get(fieldPath);
+        if (!listeners) {
+            listeners = new Set();
+            uploadingListenersRef.current.set(fieldPath, listeners);
+        }
+        listeners.add(listener);
+        return ()=>{
+            const set = uploadingListenersRef.current.get(fieldPath);
+            if (set) {
+                set.delete(listener);
+                if (0 === set.size) uploadingListenersRef.current.delete(fieldPath);
+            }
+        };
+    }, []);
     useEffect(()=>()=>{
             for (const upload of pendingUploadsRef.current.values())URL.revokeObjectURL(upload.previewUrl);
         }, []);
@@ -343,6 +373,9 @@ const FormProvider = ({ children, initialData = {} })=>{
             getPendingUploads,
             hasPendingUploads,
             clearPendingUploads,
+            setFieldUploading,
+            getIsFieldUploading,
+            subscribeFieldUploading,
             getSystemPath,
             setSystemPath,
             subscribeSystemPath
@@ -419,4 +452,15 @@ const useFieldValue = (name)=>{
     ]);
     return value;
 };
-export { FormProvider, useFieldError, useFieldValue, useFormContext, useFormMeta, useFormStore, useIsDirty, useSystemPath };
+const useIsFieldUploading = (fieldPath)=>{
+    const { getIsFieldUploading, subscribeFieldUploading } = useFormContext();
+    const [uploading, setUploading] = useState(()=>getIsFieldUploading(fieldPath));
+    useEffect(()=>subscribeFieldUploading(fieldPath, (next)=>{
+            setUploading(next);
+        }), [
+        subscribeFieldUploading,
+        fieldPath
+    ]);
+    return uploading;
+};
+export { FormProvider, useFieldError, useFieldValue, useFormContext, useFormMeta, useFormStore, useIsDirty, useIsFieldUploading, useSystemPath };

package/dist/forms/form-renderer.js

@@ -14,7 +14,7 @@ import { FormProvider, useFieldValue, useFormContext } from "./form-context.js";
 import form_renderer_module from "./form-renderer.module.js";
 import { useNavigationGuardAdapter } from "./navigation-guard.js";
 import { PathWidget } from "./path-widget.js";
-import { executeUploads } from "./upload-executor.js";
+import { executeUploadsWithProgress } from "./upload-executor.js";
 const FormStatusDisplay = ({ initialData, workflowStatuses, publishedVersion, onUnpublish })=>{
     const statusCode = initialData?.status;
     const statusLabel = workflowStatuses?.find((s)=>s.name === statusCode)?.label ?? statusCode;
@@ -139,7 +139,7 @@ function computeStatusTransitions(currentStatus, workflowStatuses, nextStatus) {
     };
 }
 const FormContent = ({ mode, fields, onSubmit, onCancel, onStatusChange, onUnpublish, onDelete, onDuplicate, onCopyToLocale, contentLocales, nextStatus, workflowStatuses, publishedVersion, initialData, adminConfig, useAsTitle, useAsPath, headingLabel, headerSlot, collectionPath, initialLocale, onLocaleChange, defaultLocale = 'en', useNavigationGuard: useNavigationGuardProp, restoreWarnings, _activeTabBySet, _onTabChange })=>{
-    const { getFieldValues, runFieldHooks, validateForm, errors: initialErrors, hasChanges: hasChangesFn, resetHasChanges, getPatches, getSystemPath, subscribeErrors, subscribeMeta, setFieldValue, setFieldError, getPendingUploads, clearPendingUploads } = useFormContext();
+    const { getFieldValues, runFieldHooks, validateForm, errors: initialErrors, hasChanges: hasChangesFn, resetHasChanges, getPatches, getSystemPath, subscribeErrors, subscribeMeta, setFieldValue, setFieldError, getPendingUploads, clearPendingUploads, setFieldUploading } = useFormContext();
     const [errors, setErrors] = useState(initialErrors);
     const [hasChanges, setHasChanges] = useState(hasChangesFn());
     const [statusBusy, setStatusBusy] = useState(false);
@@ -273,7 +273,9 @@ const FormContent = ({ mode, fields, onSubmit, onCancel, onStatusChange, onUnpub
             if (pendingUploads.size > 0) {
                 setIsUploading(true);
                 try {
-                    const uploadResult = await executeUploads(pendingUploads, uploadField);
+                    const uploadResult = await executeUploadsWithProgress(pendingUploads, uploadField, ({ fieldPath, status })=>{
+                        setFieldUploading(fieldPath, 'uploading' === status);
+                    });
                     if (!uploadResult.allSucceeded) {
                         for (const [fieldPath, errorMessage] of uploadResult.errors.entries())setFieldError(fieldPath, `Upload failed: ${errorMessage}`);
                         console.error('One or more uploads failed:', uploadResult.errors);