@byline/admin 4.2.0 → 4.4.0

package/dist/forms/form-renderer.js

@@ -5,6 +5,7 @@ import { getClientConfig } from "@byline/core";
 import { useTranslation } from "@byline/i18n/react";
 import { Alert, Button, ComboButton } from "@byline/ui/react";
 import classnames from "classnames";
+import { sliceFieldAdmin } from "../fields/field-admin.js";
 import { FieldRenderer } from "../fields/field-renderer.js";
 import { useBylineFieldServices } from "../fields/field-services-context.js";
 import { AdminGroup } from "../presentation/group.js";
@@ -182,10 +183,10 @@ const FormContent = ({ mode, fields, onSubmit, onCancel, onStatusChange, onUnpub
         return /*#__PURE__*/ jsx(FieldRenderer, {
             field: field,
             defaultValue: initialData?.fields?.[field.name],
-            collectionPath: collectionPath,
             contentLocale: contentLocale,
             components: adminConfig?.fields?.[field.name]?.components,
-            editor: adminConfig?.fields?.[field.name]?.editor
+            editor: adminConfig?.fields?.[field.name]?.editor,
+            fieldAdmin: sliceFieldAdmin(adminConfig?.fields, field.name)
         }, field.name);
     };
     const renderItem = (name)=>{
@@ -403,6 +404,7 @@ const FormRenderer = ({ mode, fields, onSubmit, onCancel, onStatusChange, onUnpu
     return /*#__PURE__*/ jsx(FormProvider, {
         initialData: initialData,
         documentId: 'edit' === mode && 'string' == typeof initialData?.id ? initialData.id : null,
+        collectionPath: collectionPath ?? null,
         children: /*#__PURE__*/ jsx(FormContent, {
             mode: mode,
             fields: fields,

package/dist/forms/upload-executor.js

@@ -1,3 +1,4 @@
+import { parseInstancePath } from "@byline/core";
 import { get } from "./nested-path.js";
 async function executeUploads(pendingUploads, uploadField, executionContext) {
     const results = [];
@@ -36,16 +37,14 @@ function buildUploadFormData(fieldPath, upload, executionContext) {
     formData.append('field', uploadFieldName(fieldPath));
     formData.append('fieldPath', fieldPath);
     if (executionContext?.documentId) formData.append('documentId', executionContext.documentId);
-    const contextPaths = executionContext?.fields != null ? findUploadFieldByPath(executionContext.fields, fieldPath)?.context : void 0;
-    if (contextPaths && contextPaths.length > 0 && executionContext?.getFormValues) {
-        const formValues = executionContext.getFormValues();
-        for (const contextPath of contextPaths){
-            const resolvedPath = resolveContextPath(fieldPath, contextPath);
-            if (void 0 === resolvedPath) continue;
-            const value = '' === resolvedPath ? formValues : get(formValues, resolvedPath);
-            const serialized = serializeContextValue(value);
-            if (void 0 !== serialized) formData.append(leafName(contextPath), serialized);
-        }
+    const formValues = executionContext?.getFormValues?.();
+    const contextPaths = executionContext?.fields != null ? findUploadFieldByPath(executionContext.fields, fieldPath, formValues)?.context : void 0;
+    if (contextPaths && contextPaths.length > 0 && formValues) for (const contextPath of contextPaths){
+        const resolvedPath = resolveContextPath(fieldPath, contextPath);
+        if (void 0 === resolvedPath) continue;
+        const value = '' === resolvedPath ? formValues : get(formValues, resolvedPath);
+        const serialized = serializeContextValue(value);
+        if (void 0 !== serialized) formData.append(leafName(contextPath), serialized);
     }
     return formData;
 }
@@ -89,27 +88,49 @@ function serializeContextValue(value) {
 function isRelationEnvelope(value) {
     return 'object' == typeof value && null !== value && 'string' == typeof value.targetDocumentId;
 }
-function findUploadFieldByPath(fields, fieldPath) {
-    const segments = fieldPath.split('.').map((s)=>s.replace(/\[\d+\]$/, ''));
-    let currentFields = fields;
-    for(let i = 0; i < segments.length; i++){
-        const name = segments[i];
-        const isLeaf = i === segments.length - 1;
-        const field = currentFields.find((f)=>f.name === name);
-        if (!field) break;
-        if (isLeaf) return 'image' === field.type || 'file' === field.type ? field.upload : void 0;
-        if ('group' === field.type || 'array' === field.type) {
-            currentFields = field.fields;
-            continue;
+function findUploadFieldByPath(fields, fieldPath, formValues) {
+    const parsed = parseInstancePath(fieldPath);
+    if (!parsed.ok) return;
+    return resolveUploadConfig(fields, parsed.segments, formValues);
+}
+function selectItem(value, segment) {
+    if (!Array.isArray(value)) return;
+    if ('index' === segment.kind) return value[segment.index];
+    if ('id' === segment.kind) return value.find((item)=>item?._id === segment.id);
+}
+function resolveUploadConfig(fields, segments, value) {
+    const head = segments[0];
+    if (null == head || 'field' !== head.kind) return;
+    const field = fields.find((candidate)=>candidate.name === head.name);
+    if (null == field) return;
+    const fieldValue = value?.[head.name];
+    const rest = segments.slice(1);
+    if (0 === rest.length) return 'image' === field.type || 'file' === field.type ? field.upload : void 0;
+    if ('group' === field.type) return resolveUploadConfig(field.fields, rest, fieldValue);
+    if ('array' === field.type) {
+        const selector = rest[0];
+        if (selector?.kind === 'index' || selector?.kind === 'id') return resolveUploadConfig(field.fields, rest.slice(1), selectItem(fieldValue, selector));
+        return resolveUploadConfig(field.fields, rest, void 0);
+    }
+    if ('blocks' === field.type) {
+        const selector = rest[0];
+        const remainder = selector?.kind === 'index' || selector?.kind === 'id' ? rest.slice(1) : rest;
+        const item = selector?.kind === 'index' || selector?.kind === 'id' ? selectItem(fieldValue, selector) : void 0;
+        const blockType = item?._type;
+        if ('string' == typeof blockType) {
+            const block = field.blocks.find((candidate)=>candidate.blockType === blockType);
+            return null == block ? void 0 : resolveUploadConfig(block.fields, remainder, item);
         }
-        if ('blocks' === field.type) {
-            const remaining = segments[i + 1];
-            const block = field.blocks.find((b)=>b.fields.some((f)=>f.name === remaining));
-            if (!block) return;
-            currentFields = block.fields;
-            continue;
+        let found;
+        let matches = 0;
+        for (const block of field.blocks){
+            const result = resolveUploadConfig(block.fields, remainder, void 0);
+            if (void 0 !== result) {
+                matches += 1;
+                found = result;
+            }
         }
-        break;
+        return 1 === matches ? found : void 0;
     }
 }
 async function executeUploadsWithProgress(pendingUploads, uploadField, onProgress, executionContext) {

package/package.json

@@ -2,7 +2,7 @@
   "name": "@byline/admin",
   "private": false,
   "license": "MPL-2.0",
-  "version": "4.2.0",
+  "version": "4.4.0",
   "engines": {
     "node": ">=20.9.0"
   },
@@ -162,32 +162,32 @@
     "@codemirror/state": "^6.7.1",
     "@codemirror/view": "^6.43.6",
     "@lezer/highlight": "^1.2.3",
-    "@tanstack/react-form-start": "^1.33.0",
+    "@tanstack/react-form-start": "^1.33.2",
     "classnames": "^2.5.1",
     "jose": "^6.2.3",
-    "react-diff-viewer-continued": "^4.2.2",
+    "react-diff-viewer-continued": "^4.4.0",
     "uuid": "^14.0.1",
     "zod": "^4.4.3",
-    "@byline/core": "4.2.0",
-    "@byline/i18n": "4.2.0",
-    "@byline/auth": "4.2.0",
-    "@byline/ui": "4.2.0"
+    "@byline/auth": "4.4.0",
+    "@byline/i18n": "4.4.0",
+    "@byline/ui": "4.4.0",
+    "@byline/core": "4.4.0"
   },
   "peerDependencies": {
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@biomejs/biome": "2.5.2",
+    "@biomejs/biome": "2.5.4",
     "@rsbuild/plugin-react": "^2.1.0",
     "@rslib/core": "^0.23.2",
-    "@types/node": "^26.1.0",
+    "@types/node": "^26.1.1",
     "@types/react": "19.2.17",
     "@types/react-dom": "19.2.3",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
     "rimraf": "^6.1.3",
-    "tsx": "^4.23.0",
+    "tsx": "^4.23.1",
     "typescript": "^7.0.2",
     "typescript-plugin-css-modules": "^5.2.0",
     "vitest": "^4.1.10"

package/src/fields/array/array-field.tsx

@@ -8,20 +8,22 @@
 
 import { useEffect, useState } from 'react'
 
-import type { ArrayField as ArrayFieldType, Field } from '@byline/core'
+import type { ArrayField as ArrayFieldType, Field, FieldAdminConfig } from '@byline/core'
 import { useTranslation } from '@byline/i18n/react'
 import { DraggableSortable, IconButton, moveItem, PlusIcon } from '@byline/ui/react'
 import cx from 'classnames'
 
+import { sliceFieldAdmin } from '../../fields/field-admin'
 import { defaultScalarForField } from '../../fields/field-helpers'
 import { FieldRenderer } from '../../fields/field-renderer'
-import { SortableItem } from '../../fields/sortable-item'
+import { SortableItem, StaticItem } from '../../fields/sortable-item'
 import { useFormContext } from '../../forms/form-context'
 import styles from './array-field.module.css'
 
 // ---------------------------------------------------------------------------
-// ArrayField — renders `type: 'array'` fields. Children are homogeneous:
-// either single value fields or a single group definition. Supports D&D.
+// ArrayField — renders `type: 'array'` fields. Each item renders every child
+// field declared in the array's `fields` (value fields and/or groups, in any
+// combination). Supports D&D.
 // ---------------------------------------------------------------------------
 
 export const ArrayField = ({
@@ -29,26 +31,29 @@ export const ArrayField = ({
   defaultValue,
   path,
   disableSorting = false,
-  collectionPath,
   contentLocale,
+  fieldAdmin,
 }: {
   field: ArrayFieldType
   defaultValue: any
   path: string
   disableSorting?: boolean
-  /**
-   * Collection path forwarded to upload-capable fields (`file` / `image`)
-   * nested inside an array item, which need it to reach the `/upload`
-   * endpoint. Without it those fields fall back to their empty placeholder
-   * and never render an upload widget.
-   */
-  collectionPath?: string
   /**
    * Active content locale, forwarded to each array item's fields so
    * localized widgets nested inside an array (e.g. a `localized` richText)
    * can render their locale badge.
    */
   contentLocale?: string
+  /**
+   * Admin overrides for the array's child fields, keyed by dotted,
+   * index-free schema paths relative to this array ('answer',
+   * 'filesGroup.publicationFile'). Schema paths address declarations, so
+   * one entry applies to that field in every item. Arrives pre-sliced from
+   * the enclosing widget (`FieldRenderer` / `GroupField`); exact-name
+   * entries apply to the child, deeper entries are re-sliced and threaded
+   * on (see `sliceFieldAdmin`).
+   */
+  fieldAdmin?: Record<string, FieldAdminConfig>
 }) => {
   const { appendPatch, getFieldValue, getFieldValues, setFieldStore } = useFormContext()
   const { t } = useTranslation('byline-admin')
@@ -207,8 +212,11 @@ export const ArrayField = ({
       const initial = item[childField.name]
 
       if (childField.type === 'group' && childField.fields && childField.fields.length > 0) {
-        // Group child — render its inner fields with the group's sub-object
+        // Group child — render its inner fields with the group's sub-object.
+        // fieldAdmin slices one level per structural hop: the group's
+        // descendant map first, then each inner field's own slice.
         const groupData = initial && typeof initial === 'object' ? initial : {}
+        const groupAdmin = sliceFieldAdmin(fieldAdmin, childField.name)
         return (
           <div
             key={childField.name}
@@ -226,8 +234,10 @@ export const ArrayField = ({
                 defaultValue={groupData[innerField.name]}
                 basePath={`${arrayElementPath}.${childField.name}`}
                 disableSorting={true}
-                collectionPath={collectionPath}
                 contentLocale={contentLocale}
+                components={groupAdmin?.[innerField.name]?.components}
+                editor={groupAdmin?.[innerField.name]?.editor}
+                fieldAdmin={sliceFieldAdmin(groupAdmin, innerField.name)}
               />
             ))}
           </div>
@@ -241,21 +251,35 @@ export const ArrayField = ({
           defaultValue={initial}
           basePath={arrayElementPath}
           disableSorting={true}
-          collectionPath={collectionPath}
           contentLocale={contentLocale}
+          components={fieldAdmin?.[childField.name]?.components}
+          editor={fieldAdmin?.[childField.name]?.editor}
+          fieldAdmin={sliceFieldAdmin(fieldAdmin, childField.name)}
         />
       )
     })
 
-    const label = field.label ?? field.name
+    // Per-item label: the array label plus a 1-based position, so items
+    // read "Questions 1", "Questions 2" rather than all repeating the bare
+    // array label.
+    const itemLabel = `${field.label ?? field.name} ${index + 1}`
 
+    // `disableSorting` removes only the drag affordance. Structural editing
+    // (add-below / remove / collapse) is always available — StaticItem is
+    // the grip-less sibling of SortableItem (see sortable-item.tsx for why
+    // it is a separate component rather than a prop).
     if (disableSorting) {
       return (
-        <div key={itemWrapper.id} className={cx('byline-field-array-card', styles.card)}>
+        <StaticItem
+          key={itemWrapper.id}
+          label={itemLabel}
+          onAddBelow={() => handleInsertBelow(index)}
+          onRemove={() => handleRemoveItem(index)}
+        >
           <div className={cx('byline-field-array-group-fields', styles['group-fields'])}>
             {innerBody}
           </div>
-        </div>
+        </StaticItem>
       )
     }
 
@@ -263,7 +287,7 @@ export const ArrayField = ({
       <SortableItem
         key={itemWrapper.id}
         id={itemWrapper.id}
-        label={label}
+        label={itemLabel}
         onAddBelow={() => handleInsertBelow(index)}
         onRemove={() => handleRemoveItem(index)}
       >
@@ -274,14 +298,43 @@ export const ArrayField = ({
     )
   }
 
+  // The add-row renders in both branches — structural editing does not
+  // depend on sortability.
+  const addRow = (
+    <div className={cx('byline-field-array-add-row', styles['add-row'])}>
+      <IconButton
+        onClick={() => {
+          void handleAddItem()
+        }}
+        aria-label={t('fields.array.addItemAriaLabel')}
+      >
+        <PlusIcon />
+      </IconButton>
+      {/* Text-styled button so the label is clickable too. Removed from
+          the tab order (tabIndex -1) — the IconButton is the single
+          keyboard/screen-reader control for this action. */}
+      <button
+        type="button"
+        tabIndex={-1}
+        onClick={() => {
+          void handleAddItem()
+        }}
+        className={cx('byline-field-array-add-label', styles['add-label'])}
+      >
+        {t('fields.array.addItem')}
+      </button>
+    </div>
+  )
+
   return (
     <div className={`byline-field-array ${field.name}`}>
-      {!disableSorting && field.label && (
+      {field.label && (
         <h3 className={cx('byline-field-array-title', styles.title)}>{field.label}</h3>
       )}
       {disableSorting ? (
         <div className={cx('byline-field-array-stack', styles.stack)}>
           {items.map((item, index) => renderItem(item, index))}
+          {addRow}
         </div>
       ) : (
         <DraggableSortable
@@ -290,29 +343,7 @@ export const ArrayField = ({
           className={cx('byline-field-array-stack', styles.stack)}
         >
           {items.map((item, index) => renderItem(item, index))}
-          <div className={cx('byline-field-array-add-row', styles['add-row'])}>
-            <IconButton
-              onClick={() => {
-                void handleAddItem()
-              }}
-              aria-label={t('fields.array.addItemAriaLabel')}
-            >
-              <PlusIcon />
-            </IconButton>
-            {/* Text-styled button so the label is clickable too. Removed from
-                the tab order (tabIndex -1) — the IconButton is the single
-                keyboard/screen-reader control for this action. */}
-            <button
-              type="button"
-              tabIndex={-1}
-              onClick={() => {
-                void handleAddItem()
-              }}
-              className={cx('byline-field-array-add-label', styles['add-label'])}
-            >
-              {t('fields.array.addItem')}
-            </button>
-          </div>
+          {addRow}
         </DraggableSortable>
       )}
     </div>

package/src/fields/blocks/blocks-field.tsx

@@ -249,6 +249,11 @@ export const BlocksField = ({
         }
         defaultValue={fieldData}
         path={arrayElementPath}
+        // Arrays directly inside a block are fully sortable: each
+        // DraggableSortable is an independent DndContext and drag listeners
+        // are grip-scoped, so the inner array's drags can't leak into the
+        // block-level context (and vice versa).
+        disableSorting={false}
         contentLocale={contentLocale}
         fieldAdmin={blockAdminByType.get(item._type)?.fields}
       />

package/src/fields/draggable-context-menu.tsx

@@ -37,7 +37,15 @@ export function DraggableContextMenu({
 
   return (
     <DropdownMenu.Root modal={false}>
-      <DropdownMenu.Trigger render={<IconButton variant="text" size="sm" />}>
+      <DropdownMenu.Trigger
+        render={
+          <IconButton
+            variant="text"
+            size="sm"
+            aria-label={t('fields.draggableMenu.triggerAriaLabel')}
+          />
+        }
+      >
         <EllipsisIcon width="16px" height="16px" />
       </DropdownMenu.Trigger>
 

package/src/fields/field-admin.test.node.ts

@@ -0,0 +1,49 @@
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+
+import { describe, expect, it } from 'vitest'
+
+import { sliceFieldAdmin } from './field-admin.js'
+
+describe('sliceFieldAdmin', () => {
+  const answer = { editor: (() => null) as any }
+  const question = { components: {} }
+
+  it('returns undefined for an undefined map', () => {
+    expect(sliceFieldAdmin(undefined, 'faq')).toBeUndefined()
+  })
+
+  it('returns undefined when no entry addresses a descendant of the child', () => {
+    expect(sliceFieldAdmin({ faq: question, other: question }, 'faq')).toBeUndefined()
+  })
+
+  it('strips the child prefix from descendant keys', () => {
+    expect(sliceFieldAdmin({ 'faq.answer': answer, 'faq.question': question }, 'faq')).toEqual({
+      answer,
+      question,
+    })
+  })
+
+  it('keeps deeper paths dotted for the next level to slice', () => {
+    const map = { 'files.filesGroup.publicationFile': question }
+    const level1 = sliceFieldAdmin(map, 'files')
+    expect(level1).toEqual({ 'filesGroup.publicationFile': question })
+    expect(sliceFieldAdmin(level1, 'filesGroup')).toEqual({ publicationFile: question })
+  })
+
+  it('does not match on name prefixes that are not path segments', () => {
+    // 'faqExtra.answer' must not be sliced by child 'faq'.
+    expect(sliceFieldAdmin({ 'faqExtra.answer': answer }, 'faq')).toBeUndefined()
+  })
+
+  it('excludes the child’s own exact-name entry from the slice', () => {
+    expect(sliceFieldAdmin({ faq: question, 'faq.answer': answer }, 'faq')).toEqual({
+      answer,
+    })
+  })
+})

package/src/fields/field-admin.ts

@@ -0,0 +1,39 @@
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+
+import type { FieldAdminConfig } from '@byline/core'
+
+// ---------------------------------------------------------------------------
+// Field admin map slicing — `fields{}` override maps (CollectionAdminConfig /
+// BlockAdminConfig) are keyed by dotted, index-free schema paths relative to
+// the map's root ('title', 'faq.answer'). Structural widgets thread the map
+// down one level at a time: a child field takes its own entry by exact name,
+// and receives the descendant entries re-keyed relative to itself.
+// ---------------------------------------------------------------------------
+
+/**
+ * Entries of `map` addressing descendants of `childName`, re-keyed with the
+ * `childName.` prefix stripped — the sub-map a structural child (group /
+ * array) threads to its own children. Returns `undefined` when `map` has no
+ * descendant entries for the child, so leaf widgets aren't handed empty maps.
+ */
+export function sliceFieldAdmin(
+  map: Record<string, FieldAdminConfig> | undefined,
+  childName: string
+): Record<string, FieldAdminConfig> | undefined {
+  if (map == null) return undefined
+  const prefix = `${childName}.`
+  let sliced: Record<string, FieldAdminConfig> | undefined
+  for (const [key, value] of Object.entries(map)) {
+    if (key.startsWith(prefix)) {
+      sliced ??= {}
+      sliced[key.slice(prefix.length)] = value
+    }
+  }
+  return sliced
+}

package/src/fields/field-renderer.tsx

@@ -10,6 +10,7 @@ import type {
   ArrayField as ArrayFieldType,
   BlocksField as BlocksFieldType,
   Field,
+  FieldAdminConfig,
   FieldComponentSlots,
   GroupField as GroupFieldType,
   RichTextEditorComponent,
@@ -48,8 +49,6 @@ interface FieldRendererProps {
   basePath?: string
   disableSorting?: boolean
   hideLabel?: boolean
-  /** Collection path (e.g. `'media'`) forwarded to upload-capable fields. */
-  collectionPath?: string
   /**
    * The active content locale (e.g. `'en'`, `'fr'`). When provided and
    * `field.localized === true`, a small locale badge is shown so the editor
@@ -68,6 +67,15 @@ interface FieldRendererProps {
    * Ignored when `field.type !== 'richText'`.
    */
   editor?: RichTextEditorComponent
+  /**
+   * Admin overrides for this field's *descendants*, keyed by dotted,
+   * index-free schema paths relative to this field ('answer',
+   * 'filesGroup.publicationFile'). Only meaningful when `field` is a
+   * structural `group` / `array` — the widget slices the map per child
+   * (see `sliceFieldAdmin`). `components` / `editor` above stay the
+   * overrides for this field itself.
+   */
+  fieldAdmin?: Record<string, FieldAdminConfig>
 }
 
 export const FieldRenderer = ({
@@ -76,10 +84,10 @@ export const FieldRenderer = ({
   basePath,
   disableSorting,
   hideLabel,
-  collectionPath,
   contentLocale,
   components,
   editor,
+  fieldAdmin,
 }: FieldRendererProps) => {
   const path = basePath ? `${basePath}.${field.name}` : field.name
   const htmlId = path.replace(/[[\].]/g, '-')
@@ -245,7 +253,6 @@ export const FieldRenderer = ({
             defaultValue={defaultValue}
             onChange={handleChange}
             path={path}
-            collectionPath={collectionPath}
           />
         )
       case 'image':
@@ -255,7 +262,6 @@ export const FieldRenderer = ({
             defaultValue={defaultValue}
             onChange={handleChange}
             path={path}
-            collectionPath={collectionPath}
           />
         )
       case 'relation':
@@ -289,8 +295,9 @@ export const FieldRenderer = ({
             }
             defaultValue={defaultValue}
             path={path}
-            collectionPath={collectionPath}
+            disableSorting={disableSorting}
             contentLocale={contentLocale}
+            fieldAdmin={fieldAdmin}
           />
         )
       case 'blocks':
@@ -311,8 +318,8 @@ export const FieldRenderer = ({
             defaultValue={defaultValue}
             path={path}
             disableSorting={disableSorting}
-            collectionPath={collectionPath}
             contentLocale={contentLocale}
+            fieldAdmin={fieldAdmin}
           />
         )
       default:

package/src/fields/file/file-field.tsx

@@ -57,8 +57,6 @@ function triggerDownload(url: string, filename?: string) {
 
 interface FileFieldProps {
   field: FieldType
-  /** Collection path required to call the /upload endpoint. */
-  collectionPath?: string
   value?: StoredFileValue | null
   defaultValue?: StoredFileValue | null
   onChange?: (value: StoredFileValue | null) => void
@@ -67,7 +65,6 @@ interface FileFieldProps {
 
 export const FileField = ({
   field,
-  collectionPath,
   value,
   defaultValue,
   onChange: _onChange,
@@ -79,7 +76,10 @@ export const FileField = ({
   const isDirty = useIsDirty(fieldPath)
   const fieldValue = useFieldValue<StoredFileValue | null | undefined>(fieldPath)
   const isUploading = useIsFieldUploading(fieldPath)
-  const { removePendingUpload, documentId } = useFormContext()
+  // `collectionPath` comes from form context rather than a prop: it is
+  // constant for the form, and prop-drilling it meant any container that
+  // forgot to forward it silently rendered this widget read-only.
+  const { removePendingUpload, documentId, collectionPath } = useFormContext()
 
   const handleChange = useFieldChangeHandler(field, fieldPath)