@object-ui/fields 13.2.0 → 14.1.0

package/src/widgets/FileField.tsx

@@ -5,39 +5,24 @@ import { Upload, X, File as FileIcon, ImageIcon, Camera, Loader2 } from 'lucide-
 import { FieldWidgetProps } from './types';
 
 /**
- * FileField - File upload widget with drag-and-drop support
- * Supports single and multiple file uploads with configurable accepted file types.
- * L2: File size validation, per-file progress indicators, error messages.
+ * Shared upload pipeline for the file widgets: validates size, uploads through
+ * the configured UploadProvider adapter (with progress), and merges results
+ * into the field value — append for `multiple`, replace otherwise. Extracted so
+ * the full-size FileField and the compact grid-cell {@link FileCell} stay
+ * behaviourally identical (same value shape, same error handling).
  */
-export function FileField({ value, onChange, field, readonly, ...props }: FieldWidgetProps<any>) {
-  const inputRef = useRef<HTMLInputElement>(null);
-  const cameraRef = useRef<HTMLInputElement>(null);
-  const fileField = (field || (props as any).schema) as any;
-  const multiple = fileField?.multiple || false;
-  const accept = fileField?.accept ? fileField.accept.join(',') : undefined;
-  const maxSize = fileField?.maxSize as number | undefined; // bytes
-  /**
-   * Camera capture mode for mobile devices.
-   * - `'environment'` (back camera): photos of receipts, documents, products
-   * - `'user'` (front camera): selfies, profile pictures
-   * - `false`: disable the camera button entirely
-   * @default 'environment' when accept includes image/* on a touch device
-   */
-  const captureMode = (fileField?.capture ?? null) as 'environment' | 'user' | false | null;
-  const acceptsImages = !accept || accept.split(',').some((t: string) =>
-    t.trim().startsWith('image/') || t.trim() === 'image/*' || t.trim().startsWith('.jp') || t.trim().startsWith('.png') || t.trim().startsWith('.gif') || t.trim().startsWith('.webp'),
-  );
-  // Auto-enable camera button on touch devices when image upload is permitted, unless explicitly disabled.
-  const isTouchDevice = typeof navigator !== 'undefined' && (navigator.maxTouchPoints > 0 || /Mobi|Android/i.test(navigator.userAgent));
-  const cameraEnabled = captureMode === false ? false : (captureMode ?? (acceptsImages && isTouchDevice ? 'environment' : null));
-  const [isDragOver, setIsDragOver] = useState(false);
-  const [errors, setErrors] = useState<string[]>([]);
+function useFileUploads(opts: {
+  files: any[];
+  multiple: boolean;
+  maxSize?: number;
+  onChange: (value: any) => void;
+}) {
+  const { files, multiple, maxSize, onChange } = opts;
   const { upload } = useUpload();
+  const [errors, setErrors] = useState<string[]>([]);
   const [uploadProgress, setUploadProgress] = useState<Record<string, number>>({});
   const [uploading, setUploading] = useState(false);
 
-  const files = value ? (Array.isArray(value) ? value : [value]) : [];
-
   const processFiles = useCallback(async (selectedFiles: File[]) => {
     if (selectedFiles.length === 0) return;
     const newErrors: string[] = [];
@@ -91,6 +76,42 @@ export function FileField({ value, onChange, field, readonly, ...props }: FieldW
     }
   }, [files, multiple, onChange, maxSize, upload]);
 
+  return { processFiles, errors, uploading, uploadProgress };
+}
+
+/**
+ * FileField - File upload widget with drag-and-drop support
+ * Supports single and multiple file uploads with configurable accepted file types.
+ * L2: File size validation, per-file progress indicators, error messages.
+ */
+export function FileField({ value, onChange, field, readonly, ...props }: FieldWidgetProps<any>) {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const cameraRef = useRef<HTMLInputElement>(null);
+  const fileField = (field || (props as any).schema) as any;
+  const multiple = fileField?.multiple || false;
+  const accept = fileField?.accept ? fileField.accept.join(',') : undefined;
+  const maxSize = fileField?.maxSize as number | undefined; // bytes
+  /**
+   * Camera capture mode for mobile devices.
+   * - `'environment'` (back camera): photos of receipts, documents, products
+   * - `'user'` (front camera): selfies, profile pictures
+   * - `false`: disable the camera button entirely
+   * @default 'environment' when accept includes image/* on a touch device
+   */
+  const captureMode = (fileField?.capture ?? null) as 'environment' | 'user' | false | null;
+  const acceptsImages = !accept || accept.split(',').some((t: string) =>
+    t.trim().startsWith('image/') || t.trim() === 'image/*' || t.trim().startsWith('.jp') || t.trim().startsWith('.png') || t.trim().startsWith('.gif') || t.trim().startsWith('.webp'),
+  );
+  // Auto-enable camera button on touch devices when image upload is permitted, unless explicitly disabled.
+  const isTouchDevice = typeof navigator !== 'undefined' && (navigator.maxTouchPoints > 0 || /Mobi|Android/i.test(navigator.userAgent));
+  const cameraEnabled = captureMode === false ? false : (captureMode ?? (acceptsImages && isTouchDevice ? 'environment' : null));
+  const [isDragOver, setIsDragOver] = useState(false);
+
+  const files = value ? (Array.isArray(value) ? value : [value]) : [];
+  const { processFiles, errors, uploading, uploadProgress } = useFileUploads({
+    files, multiple, maxSize, onChange,
+  });
+
   const handleDragOver = useCallback((e: React.DragEvent) => {
     e.preventDefault();
     e.stopPropagation();
@@ -301,3 +322,124 @@ export function FileField({ value, onChange, field, readonly, ...props }: FieldW
     </div>
   );
 }
+
+/**
+ * FileCell — compact upload control for a line-item grid cell (objectui#2360).
+ *
+ * Same value shape and upload pipeline as {@link FileField}, sized for a 32px
+ * grid row: existing files render as removable chips (image thumbnail / file
+ * icon + name) and a small button opens the native file picker. No
+ * drag-and-drop zone — a grid cell has no room for one; the per-row expand
+ * form still offers the full-size FileField.
+ */
+export function FileCell({
+  value,
+  onChange,
+  disabled,
+  multiple,
+  accept,
+  maxSize,
+  'aria-label': ariaLabel,
+  'data-cell': dataCell,
+}: {
+  value: any;
+  onChange: (value: any) => void;
+  disabled?: boolean;
+  multiple?: boolean;
+  /** Comma-joined accept list for the native picker (e.g. `"image/*,.pdf"`). */
+  accept?: string;
+  /** Max file size in bytes (oversize picks are rejected with an inline error). */
+  maxSize?: number;
+  'aria-label'?: string;
+  /** Focus-grid coordinate (see GridField keyboard navigation). */
+  'data-cell'?: string;
+}) {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const files = value ? (Array.isArray(value) ? value : [value]) : [];
+  const { processFiles, errors, uploading } = useFileUploads({
+    files, multiple: !!multiple, maxSize, onChange,
+  });
+
+  const removeAt = (index: number) => {
+    if (multiple) {
+      const next = files.filter((_: any, i: number) => i !== index);
+      onChange(next.length > 0 ? next : null);
+    } else {
+      onChange(null);
+    }
+  };
+
+  const isImage = (file: any) => String(file?.mime_type || '').startsWith('image/');
+  const nameOf = (file: any) =>
+    typeof file === 'string' ? file : file?.name || file?.original_name || 'File';
+  const showUpload = !disabled && !uploading && (multiple || files.length === 0);
+
+  return (
+    <div className="flex min-h-8 flex-wrap items-center gap-1 px-1 py-0.5">
+      <input
+        ref={inputRef}
+        type="file"
+        multiple={multiple}
+        accept={accept}
+        onChange={(e) => {
+          processFiles(Array.from(e.target.files || []));
+          e.target.value = ''; // allow re-picking the same file
+        }}
+        className="hidden"
+      />
+      {files.map((file: any, idx: number) => (
+        <span
+          key={idx}
+          className="inline-flex max-w-40 items-center gap-1 rounded border bg-muted/50 px-1 py-0.5 text-xs"
+          title={nameOf(file)}
+          data-testid="file-cell-chip"
+        >
+          {isImage(file) && file.url ? (
+            <img src={file.url} alt={nameOf(file)} className="size-5 shrink-0 rounded object-cover" />
+          ) : (
+            <FileIcon className="size-3 shrink-0 text-muted-foreground" />
+          )}
+          <span className="truncate">{nameOf(file)}</span>
+          {!disabled && (
+            <button
+              type="button"
+              className="shrink-0 rounded p-0.5 text-muted-foreground hover:text-foreground"
+              aria-label={`Remove ${nameOf(file)}`}
+              onClick={() => removeAt(idx)}
+            >
+              <X className="size-3" />
+            </button>
+          )}
+        </span>
+      ))}
+      {uploading && (
+        <span
+          className="inline-flex items-center gap-1 text-xs text-muted-foreground"
+          data-testid="file-cell-uploading"
+        >
+          <Loader2 className="size-3.5 animate-spin" />
+        </span>
+      )}
+      {showUpload && (
+        <Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          className="h-7 gap-1 px-2 text-xs text-muted-foreground hover:text-foreground"
+          onClick={() => inputRef.current?.click()}
+          aria-label={ariaLabel}
+          data-cell={dataCell}
+          disabled={disabled}
+        >
+          <Upload className="size-3.5" />
+          {files.length === 0 && 'Upload'}
+        </Button>
+      )}
+      {errors.length > 0 && (
+        <span className="w-full truncate text-[11px] text-destructive" title={errors.join('; ')}>
+          {errors[0]}
+        </span>
+      )}
+    </div>
+  );
+}

package/src/widgets/FilterConditionField.tsx

@@ -0,0 +1,343 @@
+import React from 'react';
+import { FilterBuilder, cn } from '@object-ui/components';
+import { SchemaRendererContext } from '@object-ui/react';
+import type { FieldWidgetProps } from './types';
+
+/**
+ * FilterConditionField — visual criteria builder for a stored FilterCondition
+ * (e.g. `sys_sharing_rule.criteria_json`), scoped to the object chosen in a
+ * sibling `object_name` field.
+ *
+ * Reached via the field `widget: 'filter-condition'` hint (resolves as
+ * `field:filter-condition`). Reads the live `object_name` from
+ * `dependentValues`, loads that object's fields via
+ * `dataSource.getObjectSchema(...)`, and renders `<FilterBuilder>` over them —
+ * so an admin builds `type == "customer" AND is_active == true` by picking
+ * fields/operators instead of hand-writing JSON.
+ *
+ * Storage contract: the value round-trips as a **MongoDB-style object filter**
+ * (`{ field: value }`, `{ field: { $gt: n } }`, `{ $or: [...] }`), JSON-encoded
+ * — the exact shape the sharing evaluator spreads into `engine.find(object,
+ * { filter })`. Criteria that can't be represented in the builder (nested
+ * mixes, unknown operators) fall back to a raw-JSON editor so nothing is hidden
+ * or lost; an "Edit as JSON" toggle is always available.
+ */
+
+interface FilterFieldDef {
+  value: string;
+  label: string;
+  type?: string;
+  options?: Array<{ value: string; label: string }>;
+  referenceTo?: string;
+}
+
+interface BuilderCondition {
+  id: string;
+  field: string;
+  operator: string;
+  value: any;
+}
+interface BuilderGroup {
+  id: string;
+  logic: 'and' | 'or';
+  conditions: BuilderCondition[];
+}
+
+const EMPTY_GROUP: BuilderGroup = { id: 'root', logic: 'and', conditions: [] };
+
+/** Field types that are not meaningfully filterable in a simple builder. */
+const NON_FILTERABLE = new Set([
+  'object', 'vector', 'file', 'image', 'avatar', 'signature',
+  'richtext', 'html', 'markdown', 'location', 'grid', 'json', 'code',
+]);
+
+function deriveFilterFields(schema: any): FilterFieldDef[] {
+  const raw = schema?.fields;
+  const entries: Array<[string, any]> = Array.isArray(raw)
+    ? raw.map((f: any) => [f?.name, f])
+    : raw && typeof raw === 'object'
+      ? Object.entries(raw)
+      : [];
+  const out: FilterFieldDef[] = [];
+  for (const [name, f] of entries) {
+    if (!name || !f || f.hidden) continue;
+    const type = f.type as string | undefined;
+    if (type && NON_FILTERABLE.has(type)) continue;
+    out.push({
+      value: name,
+      label: f.label || name,
+      type,
+      options: Array.isArray(f.options)
+        ? f.options.map((o: any) =>
+            typeof o === 'string'
+              ? { value: o, label: o }
+              : { value: String(o?.value), label: String(o?.label ?? o?.value) },
+          )
+        : undefined,
+      referenceTo: f.reference_to || f.reference,
+    });
+  }
+  return out;
+}
+
+function coerceByType(value: any, type?: string): any {
+  if (value == null) return value;
+  if (type === 'boolean' || type === 'toggle') {
+    if (typeof value === 'boolean') return value;
+    if (value === 'true') return true;
+    if (value === 'false') return false;
+    return value;
+  }
+  if (type === 'number' || type === 'currency' || type === 'percent' || type === 'rating' || type === 'slider') {
+    const n = Number(value);
+    return Number.isFinite(n) && value !== '' ? n : value;
+  }
+  return value;
+}
+
+function toArray(value: any): any[] {
+  if (Array.isArray(value)) return value;
+  if (typeof value === 'string') return value.split(',').map((s) => s.trim()).filter(Boolean);
+  return value == null ? [] : [value];
+}
+
+function condToMongo(c: BuilderCondition, typeOf: (f: string) => string | undefined): Record<string, any> | null {
+  const { field, operator, value } = c || ({} as BuilderCondition);
+  if (!field) return null;
+  const t = typeOf(field);
+  const cv = coerceByType(value, t);
+  switch (operator) {
+    case 'equals': return { [field]: cv };
+    case 'notEquals': return { [field]: { $ne: cv } };
+    case 'contains': return { [field]: { $contains: value } };
+    case 'notContains': return { [field]: { $ncontains: value } };
+    case 'isEmpty': return { [field]: { $in: [null, ''] } };
+    case 'isNotEmpty': return { [field]: { $nin: [null, ''] } };
+    case 'greaterThan':
+    case 'after': return { [field]: { $gt: cv } };
+    case 'lessThan':
+    case 'before': return { [field]: { $lt: cv } };
+    case 'greaterOrEqual': return { [field]: { $gte: cv } };
+    case 'lessOrEqual': return { [field]: { $lte: cv } };
+    case 'between': {
+      const [a, b] = Array.isArray(value) ? value : [undefined, undefined];
+      return { [field]: { $gte: coerceByType(a, t), $lte: coerceByType(b, t) } };
+    }
+    case 'in': return { [field]: { $in: toArray(value).map((v) => coerceByType(v, t)) } };
+    case 'notIn': return { [field]: { $nin: toArray(value).map((v) => coerceByType(v, t)) } };
+    default: return { [field]: cv };
+  }
+}
+
+function filterGroupToMongo(group: BuilderGroup, typeOf: (f: string) => string | undefined): Record<string, any> | null {
+  const frags = (group?.conditions ?? [])
+    .map((c) => condToMongo(c, typeOf))
+    .filter((x): x is Record<string, any> => !!x);
+  if (frags.length === 0) return null; // empty = match all
+  if (group.logic === 'or') return { $or: frags };
+  if (frags.length === 1) return frags[0];
+  const keys = frags.flatMap((f) => Object.keys(f));
+  const noCollision = new Set(keys).size === keys.length;
+  return noCollision ? Object.assign({}, ...frags) : { $and: frags };
+}
+
+function arraysEqual(a: any, b: any[]): boolean {
+  return Array.isArray(a) && a.length === b.length && a.every((v, i) => v === b[i]);
+}
+
+function kvToCondition(field: string, v: any, idx: number): BuilderCondition | null {
+  const id = `c_${idx}_${field}`;
+  if (v === null || typeof v !== 'object' || Array.isArray(v)) {
+    return { id, field, operator: 'equals', value: v };
+  }
+  const opKeys = Object.keys(v);
+  if (opKeys.length === 1) {
+    const op = opKeys[0];
+    const val = v[op];
+    switch (op) {
+      case '$ne': return { id, field, operator: 'notEquals', value: val };
+      case '$contains': return { id, field, operator: 'contains', value: val };
+      case '$ncontains': return { id, field, operator: 'notContains', value: val };
+      case '$gt': return { id, field, operator: 'greaterThan', value: val };
+      case '$lt': return { id, field, operator: 'lessThan', value: val };
+      case '$gte': return { id, field, operator: 'greaterOrEqual', value: val };
+      case '$lte': return { id, field, operator: 'lessOrEqual', value: val };
+      case '$in':
+        return arraysEqual(val, [null, ''])
+          ? { id, field, operator: 'isEmpty', value: '' }
+          : { id, field, operator: 'in', value: val };
+      case '$nin':
+        return arraysEqual(val, [null, ''])
+          ? { id, field, operator: 'isNotEmpty', value: '' }
+          : { id, field, operator: 'notIn', value: val };
+      default: return null;
+    }
+  }
+  if (opKeys.length === 2 && '$gte' in v && '$lte' in v) {
+    return { id, field, operator: 'between', value: [v.$gte, v.$lte] };
+  }
+  return null;
+}
+
+/** Returns a BuilderGroup, or `null` when the criteria can't be represented. */
+function mongoToFilterGroup(mongo: any): BuilderGroup | null {
+  if (mongo == null) return { ...EMPTY_GROUP, conditions: [] };
+  if (typeof mongo !== 'object' || Array.isArray(mongo)) return null;
+  const entries = Object.entries(mongo);
+  if (entries.length === 0) return { ...EMPTY_GROUP, conditions: [] };
+  if (entries.length === 1 && (mongo.$or || mongo.$and)) {
+    const logic: 'and' | 'or' = mongo.$or ? 'or' : 'and';
+    const arr = mongo.$or || mongo.$and;
+    if (!Array.isArray(arr)) return null;
+    const conditions: BuilderCondition[] = [];
+    for (let i = 0; i < arr.length; i++) {
+      const frag = arr[i];
+      if (!frag || typeof frag !== 'object' || Object.keys(frag).length !== 1) return null;
+      const field = Object.keys(frag)[0];
+      if (field.startsWith('$')) return null;
+      const c = kvToCondition(field, frag[field], i);
+      if (!c) return null;
+      conditions.push(c);
+    }
+    return { id: 'root', logic, conditions };
+  }
+  const conditions: BuilderCondition[] = [];
+  let i = 0;
+  for (const [field, v] of entries) {
+    if (field.startsWith('$')) return null; // mixed logical + field → raw
+    const c = kvToCondition(field, v, i++);
+    if (!c) return null;
+    conditions.push(c);
+  }
+  return { id: 'root', logic: 'and', conditions };
+}
+
+function stringifyValue(value: string | object | undefined | null): string {
+  if (value == null || value === '') return '';
+  if (typeof value === 'string') return value;
+  try {
+    return JSON.stringify(value);
+  } catch {
+    return '';
+  }
+}
+
+export function FilterConditionField({
+  value,
+  onChange,
+  readonly,
+  className,
+  ...props
+}: FieldWidgetProps<string | object>) {
+  const ctx = React.useContext(SchemaRendererContext);
+  const dataSource: any = (props as any).dataSource ?? (ctx as any)?.dataSource ?? null;
+  const dependentValues: Record<string, any> = (props as any).dependentValues ?? {};
+  const objectName = String(dependentValues.object_name ?? '');
+
+  const [fields, setFields] = React.useState<FilterFieldDef[] | null>(null);
+
+  React.useEffect(() => {
+    setFields(null);
+    if (!dataSource || !objectName || typeof dataSource.getObjectSchema !== 'function') return;
+    let cancelled = false;
+    (async () => {
+      try {
+        const schema = await dataSource.getObjectSchema(objectName);
+        if (!cancelled) setFields(deriveFilterFields(schema));
+      } catch {
+        if (!cancelled) setFields([]);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [dataSource, objectName]);
+
+  const rawValue = React.useMemo(() => stringifyValue(value), [value]);
+
+  const parsed = React.useMemo(() => {
+    if (!rawValue.trim()) return { mongo: {}, ok: true };
+    try {
+      return { mongo: JSON.parse(rawValue), ok: true };
+    } catch {
+      return { mongo: null, ok: false };
+    }
+  }, [rawValue]);
+
+  const group = React.useMemo(
+    () => (parsed.ok ? mongoToFilterGroup(parsed.mongo) : null),
+    [parsed],
+  );
+
+  // Raw JSON mode: forced when the stored value can't be represented in the
+  // builder; otherwise opt-in via the toggle.
+  const representable = parsed.ok && group !== null;
+  const [rawMode, setRawMode] = React.useState<boolean>(!representable);
+  React.useEffect(() => {
+    if (!representable) setRawMode(true);
+  }, [representable]);
+
+  const typeOf = React.useMemo(() => {
+    const map = new Map((fields ?? []).map((f) => [f.value, f.type]));
+    return (f: string) => map.get(f);
+  }, [fields]);
+
+  const handleBuilderChange = (g: BuilderGroup) => {
+    const mongo = filterGroupToMongo(g, typeOf);
+    onChange((mongo == null ? '' : JSON.stringify(mongo)) as any);
+  };
+
+  if (!objectName) {
+    return (
+      <p className={cn('text-sm text-muted-foreground', className)}>
+        Select an object first.
+      </p>
+    );
+  }
+
+  if (readonly) {
+    if (!rawValue.trim()) {
+      return <span className={cn('text-sm text-muted-foreground', className)}>All records</span>;
+    }
+    return (
+      <pre className={cn('overflow-x-auto rounded bg-muted/40 p-2 text-xs', className)}>
+        {rawValue}
+      </pre>
+    );
+  }
+
+  return (
+    <div className={cn('flex flex-col gap-2', className)}>
+      {rawMode ? (
+        <>
+          <textarea
+            className="min-h-[96px] w-full rounded border bg-background px-2 py-1 font-mono text-xs"
+            value={rawValue}
+            placeholder='{ "type": "customer", "is_active": true }'
+            onChange={(e) => onChange(e.target.value as any)}
+          />
+          {!parsed.ok && (
+            <span className="text-xs text-destructive">Invalid JSON — the rule will match no records until fixed.</span>
+          )}
+        </>
+      ) : (
+        <FilterBuilder
+          fields={fields ?? []}
+          value={(group ?? EMPTY_GROUP) as any}
+          onChange={handleBuilderChange as any}
+        />
+      )}
+      <button
+        type="button"
+        className="self-start text-xs text-muted-foreground underline-offset-2 hover:underline"
+        onClick={() => setRawMode((m) => !m)}
+        disabled={!representable && !rawMode}
+        title={!representable ? 'This criteria can only be edited as JSON' : undefined}
+      >
+        {rawMode ? 'Use visual builder' : 'Edit as JSON'}
+      </button>
+    </div>
+  );
+}
+
+export default FilterConditionField;

package/src/widgets/GridField.test.tsx

@@ -1,6 +1,7 @@
 import { describe, it, expect, vi } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import React from 'react';
+import { UploadProvider } from '@object-ui/providers';
 import { GridField, LineItemsField, sumColumn, lookupAutofillPatch } from './GridField';
 
 const columns = [
@@ -258,6 +259,88 @@ describe('GridField / LineItemsField — editable line items', () => {
     });
   });
 
+  describe('file columns (upload in a grid cell — #2360)', () => {
+    const fileField = {
+      columns: [
+        { field: 'description', label: 'Description', type: 'text' as const },
+        { field: 'receipt', label: 'Receipt', type: 'file' as const },
+      ],
+    } as any;
+
+    it('renders a real upload control in the cell, not a text input', () => {
+      render(<GridField value={[{ description: 'Taxi', receipt: null }]} onChange={() => {}} field={fileField} />);
+      // One upload button per row (data row + ghost), backed by a native file input.
+      expect(screen.getAllByRole('button', { name: 'Receipt' }).length).toBeGreaterThan(0);
+      expect(document.querySelector('input[type="file"]')).toBeTruthy();
+      expect(screen.queryByRole('textbox', { name: 'Receipt' })).toBeNull();
+    });
+
+    it('uploads a picked file and writes the file object into the row', async () => {
+      const onChange = vi.fn();
+      const adapter = {
+        name: 'test',
+        upload: async (f: File) => ({ url: 'https://cdn/receipt.png', name: f.name, size: f.size, mimeType: f.type }),
+      };
+      render(
+        <UploadProvider adapter={adapter as any}>
+          <GridField value={[{ description: 'Taxi', receipt: null }]} onChange={onChange} field={fileField} />
+        </UploadProvider>,
+      );
+      const file = new File(['x'], 'receipt.png', { type: 'image/png' });
+      const input = document.querySelectorAll('input[type="file"]')[0] as HTMLInputElement;
+      fireEvent.change(input, { target: { files: [file] } });
+      await waitFor(() => expect(onChange).toHaveBeenCalled());
+      expect(onChange).toHaveBeenCalledWith([
+        {
+          description: 'Taxi',
+          receipt: {
+            name: 'receipt.png',
+            original_name: 'receipt.png',
+            size: file.size,
+            mime_type: 'image/png',
+            url: 'https://cdn/receipt.png',
+          },
+        },
+      ]);
+    });
+
+    it('shows an uploaded file as a removable chip', () => {
+      const onChange = vi.fn();
+      render(
+        <GridField
+          value={[{ description: 'Taxi', receipt: { name: 'receipt.png', mime_type: 'image/png' } }]}
+          onChange={onChange}
+          field={fileField}
+        />,
+      );
+      expect(screen.getByText('receipt.png')).toBeTruthy();
+      fireEvent.click(screen.getByLabelText('Remove receipt.png'));
+      expect(onChange).toHaveBeenCalledWith([{ description: 'Taxi', receipt: null }]);
+    });
+
+    it('passes the column accept list to the native picker', () => {
+      const withAccept = {
+        columns: [{ field: 'receipt', label: 'Receipt', type: 'file' as const, accept: ['image/*', '.pdf'] }],
+      } as any;
+      render(<GridField value={[]} onChange={() => {}} field={withAccept} />);
+      const input = document.querySelector('input[type="file"]') as HTMLInputElement;
+      expect(input.getAttribute('accept')).toBe('image/*,.pdf');
+    });
+
+    it('renders the file name read-only in readonly mode', () => {
+      render(
+        <GridField
+          value={[{ description: 'Taxi', receipt: { name: 'receipt.png' } }]}
+          onChange={() => {}}
+          field={fileField}
+          readonly
+        />,
+      );
+      expect(screen.getByText('receipt.png')).toBeTruthy();
+      expect(document.querySelector('input[type="file"]')).toBeNull();
+    });
+  });
+
   it('sumColumn ignores blanks and NaN', () => {
     expect(sumColumn([{ amount: 1 }, { amount: 2 }, { amount: null }], 'amount')).toBe(3);
   });