@xeplr/ui-factory 1.8.5 → 1.8.6

package/AUTHORING.md

@@ -241,7 +241,7 @@ A button is **a registered function and its parameters** — never code. Several
 ] } }
 ```
 
-Register the function with `event: 'button'` and an `inputSchema` (with `options` for the values allowed, and a `note` input if a button asks for one). `when` / `disabledWhen` are `@xeplr/rules` rules on the record. Publishing refuses parameters the function does not take. See the README's "Buttons".
+Register the function with `event: 'button'` and an `inputSchema` (with `options` for the values allowed, a `note` input if a button asks for one, and a `files` input if its `ask.file` takes photos or documents — `{ "accept": ".png,.jpg,.jpeg", "multiple": true, "source": "any" }`, the same rules as a file field). `when` / `disabledWhen` are `@xeplr/rules` rules on the record. Publishing refuses parameters the function does not take. See the README's "Buttons".
 
 ## When the document cannot say it
 
@@ -292,6 +292,8 @@ Rules you give merge over the ready-made ones (`"validation": { "max": 120 }`).
 | one of the app's records | `dropdown` with `table` |
 | several of a set — tags, skills, days | `multiselect` |
 | a document, a contract, a spreadsheet, a photo | `file` with `accept` (`".pdf,.docx"`) |
+| several photos, several documents | `file` with `multiple: true` (and `maxFiles`) — the value is a list of paths |
+| a photo taken now, at the door / on site | `file` with `source: "camera"` and images in `accept` — the phone opens its camera |
 | a section title between groups | `{ "type": "label", "text": "…", "variant": "subheading" }` |
 | a long form people work through in stages | a `stepper`, then `step` on each field |
 

package/README.md

@@ -103,6 +103,7 @@ import { FactoryScreen } from '@xeplr/ui-factory'
   onDelete={async ({ id, source }) => api.remove(source, id)}
   fetchOptions={async ({ table }) => api.options(table)}
   uploadFile={async (file, { screen, field }) => api.upload(file, screen, field)}  // a file field: → { path }
+  readFile={async (path) => api.fileBlob(path)}       // optional: a stored picture's bytes, for its thumbnail
   screens={{ employee_edit: editScreen }}             // what a list's Edit / New open in a popup
 />
 ```
@@ -115,7 +116,7 @@ import { FactoryScreen } from '@xeplr/ui-factory'
 
 If `onSave` throws an error with `fields: [{ field, message }]` (what `createFactoryApi` does with the server's 422 — a rule, or a hook's `reject`), each message shows on its field until that field is changed.
 
-Values arrive typed: numbers as numbers, checkboxes as booleans, dates as `"YYYY-MM-DD"`, a date and time as `"YYYY-MM-DDTHH:MM"`, a dropdown or radio group as the option's own `id` (a table's numeric id stays a number), a multi-select as an **array** of ids, and a file as the stored file's **path**.
+Values arrive typed: numbers as numbers, checkboxes as booleans, dates as `"YYYY-MM-DD"`, a date and time as `"YYYY-MM-DDTHH:MM"`, a dropdown or radio group as the option's own `id` (a table's numeric id stays a number), a multi-select as an **array** of ids, and a file as the stored file's **path** (a field with `multiple`: an **array** of paths).
 
 ### On a phone
 
@@ -143,7 +144,10 @@ one scalar have a rule of their own:
   the server use them, so it is written once.
 * **File** — the column holds the path the upload answered with, not the file.
   The file itself is stored by `@xeplr/factory` and read back through its
-  authenticated route; nothing is ever served without a check.
+  authenticated route; nothing is ever served without a check. A field with
+  `multiple` keeps its paths in one `text` column, joined by commas, like a
+  multi-select (a stored path has no comma in it); turning `multiple` on is a
+  widening, so a path already saved reads back as a list of one.
 * **Date and time** — a `timestamp` column, read back as text so no timezone can
   move the moment. A `date` column may be widened to `timestamp` on publish
   (the day becomes midnight); the reverse is refused, as it would lose the time.
@@ -443,6 +447,52 @@ Rules are [`@xeplr/rules`](https://www.npmjs.com/package/@xeplr/rules) rules —
 - **What happens next is the host's.** The panel shows the function's `message`; `onButtonDone({ button, result, record })` lets the page reload what it shows. Lists on the same screen reload by themselves.
 - **In the builder**, picking a function lists the parameters it takes — a dropdown where it names the values allowed — so nobody types a status by hand. Functions come from `listFunctions` (`createFactoryApi`'s `builderProps` has it).
 
+### A button that takes files — `ask.file`
+
+A press can carry photos or documents: the button's `ask` gets a file picker,
+with a file field's own rules.
+
+```json
+{ "id": "proof", "label": "Delivered", "action": "markDelivered", "params": { "status": "delivered" },
+  "ask": { "title": "Proof of delivery", "note": "Note (optional)",
+           "file": { "label": "Photos", "accept": ".png,.jpg,.jpeg", "maxSize": 10, "multiple": true, "maxFiles": 5, "source": "any", "required": true } } }
+```
+
+```js
+actions.register({
+  name: 'markDelivered', event: 'button',
+  inputSchema: [{ name: 'status', type: 'string', required: true }, { name: 'files', type: 'array' }, { name: 'note', type: 'string' }],
+  execute: async ({ input, system }) => {
+    // input.files: the stored paths. system.files: [{ path, name, size, fullPath }] — read the bytes from fullPath.
+  }
+})
+```
+
+- **Each file is stored before the press** — `POST /factory/buttons/:screen/:button/files`, checked against `ask.file`'s `accept` and `maxSize` — and the press sends the stored paths as `files`.
+- **The server takes only files stored for this button, by this person, in this company** — a path typed by hand, or another button's, is refused. It also checks `required`, `multiple` and `maxFiles` again.
+- `accept` is required: the server must have something to check an upload against.
+- The function must take `files` (in its `inputSchema`); publishing refuses a button whose function does not. The builder shows the file settings only for a function that does.
+- Host: pass `uploadButtonFile` (`createFactoryApi`'s `screenProps` has it).
+
+## Files: gallery, camera, several
+
+A file field — and a button's `ask.file` — says **what** it wants; the device
+decides how to get it. The same document works in a desktop browser, a phone
+browser, an installed web app and, later, a phone app.
+
+| prop | |
+|---|---|
+| `accept` | the extensions it takes — the server refuses anything else |
+| `maxSize` | megabytes, per file |
+| `source` | `any` (default): the device's own picker — on a phone, one menu of **Camera, Photos and Files**. `camera`: the camera opens straight away, for a photo taken now (`capture="environment"`); `accept` must then be images only |
+| `multiple` | holds several files — the value is an array of paths |
+| `maxFiles` | with `multiple`: at most this many (up to 20) |
+
+- **Pictures show as thumbnails.** An `<img>` cannot send the sign-in token, so a stored picture is read back through `readFile(path) → Blob` and shown from an object URL. `createFactoryApi({ fetch: authFetch, fetchFile: authFetchFile })` (both from `@xeplr/ui-account`) gives `screenProps.readFile`; without it a field shows names only.
+- **Several files**: chosen together, they upload one by one and each is added as it lands, so a refusal of the third keeps the first two. Remove takes one away.
+- `filePicker(props)` → `{ accept, multiple, capture }` is the one place that turns these props into a picker — a phone app's renderer reads the same.
+- iPhone photos are HEIC. iOS hands a photo over as JPEG when the picker does not ask for HEIC, so `.heic` is not in the Images list — not yet checked on a real iPhone.
+
 ## A list whose rows a function works out — `rowsFrom`
 
 A list reads one table's records. When the rows are **worked out** — an
@@ -786,7 +836,7 @@ Both walk someone through something, and they answer different questions:
 | `dropdown` | option id | — |
 | `radio` | option id | — |
 | `multiselect` | array of option ids | `minItems`, `maxItems` |
-| `file` | the stored file's path | `accept` (extensions), `maxSize` (MB) |
+| `file` | the stored file's path — or, with `multiple`, an array of them | `accept` (extensions), `maxSize` (MB), `multiple`, `maxFiles`, `source` (`any` / `camera`); see [Files: gallery, camera, several](#files-gallery-camera-several) |
 | `stepper` | — | a journey across the top; every other control says which step it is on |
 | `label` | — | text with a heading, subheading or text preset |
 | `list` | — | saved records, with New / Edit / Delete — or rows a function works out (`rowsFrom`), with search, filter chips and counts; see above |
@@ -1030,7 +1080,7 @@ src/
   hooks.js               ─ FactoryHooks: get / save / delete / actions — extend and call super
   presets.js             ─ ready-made fields (Email, Age, Gender…), changing a field's kind, label suggestions
   tableSchema.js         ─ a form → its table; the publish plan (create / add / widen / confirmed drops and conversions)
-  remote.js              ─ createFactoryApi({ fetch }): the calls to @xeplr/factory's routes — fetch may be window.fetch or @xeplr/ui-account's authFetch (which returns parsed bodies); includes createEntity({ key, label })
+  remote.js              ─ createFactoryApi({ fetch, fetchFile }): the calls to @xeplr/factory's routes — fetch may be window.fetch or @xeplr/ui-account's authFetch (which returns parsed bodies); includes createEntity({ key, label })
   screenSource.js        ─ this app's screens as another designer wants them: describeScreen, loadScreens, keyFromName, editScreenOf (React-free)
   model.js               ─ everything above, React-free
   useFactoryBuilder.js   ─ builder controller
@@ -1041,10 +1091,11 @@ src/
   urlState.js            ─ the URL keys and values for selection and steps (React-free)
   useUrlPlaces.js        ─ useUrlSteps, useUrlSelection: those places, in the URL or in memory
   useScreenSource.js     ─ { screens, screenEditor } for @xeplr/ui-workflow's Screen step
-  designs/               ─ BuilderSample, ScreenSample, ScreenEditorSample, ControlView, ListView, FedList, ButtonsView, Palette, PropertyPanel, styles.js, factory.css
+  useFilePreview.js      ─ a stored picture as an object URL, through readFile
+  designs/               ─ BuilderSample, ScreenSample, ScreenEditorSample, ControlView, ListView, FedList, ButtonsView, FileField, Palette, PropertyPanel, styles.js, factory.css
   pages.jsx              ─ FactoryBuilder, FactoryScreen
 bin/xeplr-factory.js     ─ screens / generate / validate / controls / schema / pages
-examples/                ─ employee.entity.json and what `screens` makes of it; orders-board and order-actions (a function-fed list, buttons)
+examples/                ─ employee.entity.json and what `screens` makes of it; orders-board and order-actions (a function-fed list, buttons — one takes photos); delivery-photos (several pictures, camera only)
 dev/                     ─ the stand-in app for `npm run dev` (not published)
 ```
 
@@ -1054,7 +1105,7 @@ dev/                     ─ the stand-in app for `npm run dev` (not published)
 npm test
 ```
 
-`test/buttons.test.js` covers buttons and function-fed lists in the document: what the checker refuses, when a button shows or is greyed out, what a press sends (the document's parameters, never the request's), and `functionProblems` against a registry. `test/cli.test.js` includes `pages`.
+`test/buttons.test.js` covers buttons and function-fed lists in the document: what the checker refuses, when a button shows or is greyed out, what a press sends (the document's parameters, never the request's), and `functionProblems` against a registry. `test/cli.test.js` includes `pages`. `test/files.test.js` covers files: several in one field (the value, its column, its checks), camera only, and a button whose press takes files.
 
 `test/urlState.test.js` covers the URL state: the key format, and the three controllers reading their places back from a real `MemoryRouter` and being clicked through in memory, rendered with `react-dom/server`.
 
@@ -1063,7 +1114,7 @@ npx playwright install chromium-headless-shell   # once
 npm run test:phone
 ```
 
-`test/phone.check.js` opens the dev app (`dev/`) in a real browser at 360, 390 and 430px wide and holds every screen to the phone rules: the page never scrolls sideways; fields are one per row, full width, in reading order, none overlapping; inputs are 16px or larger and 44px tall; the footer's buttons are 44px and on screen; a list's row buttons are on screen without scrolling the table; a popup fills the screen. At 1280px it checks that the designed layout is untouched. On the Orders page it checks the function-fed list and buttons at phone sizes (16px / 44px search, chips on screen, an "ask first" that fills the screen) and, at 1280px, that they work: search and chips narrow the rows and the counts, the hover box lists entries, a row opens, a press with a note changes the order and greys its button out, and Confirm COD gives way to Undo. It is not part of `npm test` — it needs a browser and starts a dev server — so run it before releasing anything that changes how a screen is drawn. The list checks use the `@xeplr/ui-table` installed here.
+`test/phone.check.js` opens the dev app (`dev/`) in a real browser at 360, 390 and 430px wide and holds every screen to the phone rules: the page never scrolls sideways; fields are one per row, full width, in reading order, none overlapping; inputs are 16px or larger and 44px tall; the footer's buttons are 44px and on screen; a list's row buttons are on screen without scrolling the table; a popup fills the screen. At 1280px it checks that the designed layout is untouched. On the Orders page it checks the function-fed list and buttons at phone sizes (16px / 44px search, chips on screen, an "ask first" that fills the screen) and, at 1280px, that they work: search and chips narrow the rows and the counts, the hover box lists entries, a row opens, a press with a note changes the order and greys its button out, and Confirm COD gives way to Undo. On the Photos page it checks the pickers (several images; the back camera for camera only), the thumbnails, Remove, and a button whose press takes a photo end to end. It is not part of `npm test` — it needs a browser and starts a dev server — so run it before releasing anything that changes how a screen is drawn. The list checks use the `@xeplr/ui-table` installed here.
 
 ## License
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xeplr/ui-factory",
-  "version": "1.8.5",
+  "version": "1.8.6",
   "description": "Design data-entry screens on @xeplr/ui-canvas, save them as JSON, run them as auto-saving forms with lists of saved records — built for Claude to draft and people to refine",
   "type": "module",
   "main": "src/index.js",

package/src/buttons.js

@@ -46,6 +46,13 @@ export const BADGE_TONES = ['accent', 'success', 'warning', 'danger', 'muted']
 /** The name a button's note reaches its function under. */
 export const NOTE_INPUT = 'note'
 
+/**
+ * The name a button's files reach its function under: the stored paths, as a
+ * list, when the button's `ask.file` takes them. The function reads the bytes
+ * through `system.files` (each with its full path on disk).
+ */
+export const FILES_INPUT = 'files'
+
 /** Operators a button's condition can use: every one that compares a single value. */
 export const CONDITION_OPERATORS = OPERATORS.filter((o) => !o.needsRows)
 
@@ -89,15 +96,37 @@ export function buttonById(doc, id) {
   return screenButtons(doc).find((b) => b.button && b.button.id === id) || null
 }
 
-/** What a press sends the function: the document's parameters, and the person's note when it asks for one. */
-export function buttonInput(button, note) {
+/** The file a button's press takes (`ask.file`), or null when it takes none. */
+export function askFile(button) {
+  const f = button && button.ask && button.ask.file
+  return f && typeof f === 'object' ? f : null
+}
+
+/**
+ * What a press sends the function: the document's parameters, the person's
+ * note when it asks for one, and the stored files when it takes them.
+ */
+export function buttonInput(button, note, files) {
   const input = { ...((button && button.params) || {}) }
   if (button && button.ask && button.ask.note && note !== undefined && note !== null && String(note).trim() !== '') {
     input[NOTE_INPUT] = String(note).trim()
   }
+  if (askFile(button) && Array.isArray(files) && files.length) input[FILES_INPUT] = files.slice()
   return input
 }
 
+/** Why the files given to a press are not what its `ask.file` takes — or null. */
+export function askFileProblem(button, files) {
+  const f = askFile(button)
+  const list = Array.isArray(files) ? files : []
+  if (!f) return list.length ? 'This button takes no files' : null
+  const label = f.label || 'A file'
+  if (!list.length) return f.required ? `${label} is required` : null
+  if (!f.multiple && list.length > 1) return `${label}: one file only`
+  if (f.multiple && f.maxFiles && list.length > f.maxFiles) return `${label}: at most ${f.maxFiles} files`
+  return null
+}
+
 /**
  * The functions a screen's CONTROLS name, as [{ event, name, at }] — a list's
  * rows, a column's hover box, each button. `at` is where in the document, so
@@ -141,9 +170,11 @@ export function paramProblems(button, inputSchema) {
   schema.forEach((f) => {
     if (!f || !f.name || !f.required || f.default !== undefined) return
     if (f.name === NOTE_INPUT && button && button.ask && button.ask.note) return
+    if (f.name === FILES_INPUT && askFile(button)) return
     if (params[f.name] === undefined || params[f.name] === null || params[f.name] === '') problems.push(`needs "${f.name}"`)
   })
   if (button && button.ask && button.ask.note && !byName.has(NOTE_INPUT)) problems.push(`asks for a note, but takes no "${NOTE_INPUT}"`)
+  if (askFile(button) && !byName.has(FILES_INPUT)) problems.push(`asks for a file, but takes no "${FILES_INPUT}"`)
   return problems
 }
 

package/src/controls.js

@@ -139,6 +139,44 @@ export const FILE_KINDS = {
   any: { label: 'Any of the above', accept: '.pdf,.doc,.docx,.odt,.rtf,.txt,.xls,.xlsx,.csv,.ods,.png,.jpg,.jpeg,.gif,.webp,.svg' }
 }
 
+/** The extensions a picture can have — what a preview is drawn for, and all a camera field takes. */
+export const IMAGE_EXTENSIONS = acceptList(FILE_KINDS.image.accept)
+
+/**
+ * Where a file field's files come from. `any` is the device's own choice —
+ * on a phone that is Camera, Photos and Files in one menu; `camera` opens the
+ * camera straight away (a photo taken now, not one from the gallery).
+ */
+export const FILE_SOURCES = [
+  { value: 'any', label: 'Files, gallery or camera' },
+  { value: 'camera', label: 'Camera only' }
+]
+
+/** Most files one field can hold. */
+export const MAX_FILES = 20
+
+/** Whether a stored path (or a file name) is a picture — by its extension, as the server checks. */
+export function isImageFile(name) {
+  const s = String(name || '').toLowerCase()
+  const dot = s.lastIndexOf('.')
+  return dot !== -1 && IMAGE_EXTENSIONS.includes(s.slice(dot))
+}
+
+/**
+ * What a file picker is asked for, from a file field's props — the one place
+ * that turns `accept`, `multiple` and `source` into a picker. The web reads it
+ * as <input type="file"> attributes; a phone app reads the same three.
+ */
+export function filePicker(props) {
+  const p = props || {}
+  const camera = p.source === 'camera'
+  return {
+    accept: p.accept || '',
+    multiple: Boolean(p.multiple) && !camera,
+    capture: camera ? 'environment' : undefined
+  }
+}
+
 /** An extension list as one string → the same list, cleaned and lower-cased. */
 export function acceptList(accept) {
   return String(accept || '')
@@ -456,11 +494,13 @@ export const CONTROLS = {
     label: 'File upload',
     group: 'Inputs',
     input: true,
-    // The value is the stored file's path, as the upload answered with it.
+    // The value is the stored file's path, as the upload answered with it —
+    // or, with `multiple`, a list of them (one text column, comma separated,
+    // like a multi-select: a stored path has no comma in it).
     valueType: 'string',
     defaultSize: { w: 0.44, h: 0.1 },
     defaults: { label: 'File', accept: FILE_KINDS.document.accept, maxSize: 10 },
-    props: ['name', 'label', 'preset', 'required', 'accept', 'maxSize', 'style'],
+    props: ['name', 'label', 'preset', 'required', 'accept', 'maxSize', 'multiple', 'maxFiles', 'source', 'style'],
     validation: [],
     styles: INPUT_STYLES.filter((k) => k !== 'textAlign'),
     properties: [
@@ -470,7 +510,10 @@ export const CONTROLS = {
         title: 'File',
         fields: [
           { path: 'props.accept', label: 'Allowed types', type: 'accept', help: 'Extensions, comma separated — the server refuses anything else' },
-          { path: 'props.maxSize', label: 'Largest size (MB)', type: 'number', min: 1, max: 200 }
+          { path: 'props.maxSize', label: 'Largest size (MB)', type: 'number', min: 1, max: 200 },
+          { path: 'props.source', label: 'Take from', type: 'select', options: FILE_SOURCES, help: 'Camera only: a photo taken now — the allowed types must be images' },
+          { path: 'props.multiple', label: 'Several files', type: 'toggle' },
+          { path: 'props.maxFiles', label: 'At most (files)', type: 'number', min: 1, max: MAX_FILES, help: 'With several files' }
         ]
       },
       ...styleGroups(INPUT_STYLES.filter((k) => k !== 'textAlign'))

package/src/designs/ButtonsView.jsx

@@ -1,13 +1,16 @@
 import { useEffect, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
 import { boxStyle, fieldStyle } from './styles.js'
+import FileField from './FileField.jsx'
 
 // A PANEL OF BUTTONS. Each runs a function of the app on the server, with the
 // parameters the screen gives it; which ones show, and which are greyed out,
 // the controller works out from the record (useFactoryScreen.buttonsFor).
 //
-// A button that asks first opens a small dialog: its message, and a note box
-// when it takes a note. Presentation only — the press is the controller's.
+// A button that asks first opens a small dialog: its message, a note box when
+// it takes a note, and a file picker when it takes files (`ask.file` — on a
+// phone, the gallery or the camera). Presentation only — the press, and the
+// upload, are the controller's.
 //
 // On the canvas (design) the buttons are drawn as they will look, inert.
 
@@ -58,17 +61,22 @@ export default function ButtonsView({ node, design, panel }) {
           busy={panel.pressing === asking.id}
           error={note && note.kind === 'error' && note.button === asking.id ? note.text : null}
           onCancel={() => { setAsking(null); panel.clearNote() }}
-          onConfirm={async (typed) => { if (await panel.press(asking, typed)) setAsking(null) }}
+          upload={(file) => panel.upload(file, asking)}
+          readFile={panel.readFile}
+          onConfirm={async (typed, files) => { if (await panel.press(asking, typed, files)) setAsking(null) }}
         />
       )}
     </div>
   )
 }
 
-/** "Change status to Packed?" — the button's message, and a note when it takes one. */
-function AskDialog({ button, busy, error, onCancel, onConfirm }) {
+/** "Change status to Packed?" — the button's message, a note and files when it takes them. */
+function AskDialog({ button, busy, error, onCancel, onConfirm, upload, readFile }) {
   const ask = button.ask || {}
+  const file = ask.file && typeof ask.file === 'object' ? ask.file : null
   const [typed, setTyped] = useState('')
+  const [files, setFiles] = useState([])
+  const missing = Boolean(file && file.required && !files.length)
   const ref = useRef(null)
   useEffect(() => {
     ref.current?.focus()
@@ -93,11 +101,26 @@ function AskDialog({ button, busy, error, onCancel, onConfirm }) {
               <textarea id={`${titleId}-note`} className="xeplr-factory-ask-note" rows={3} maxLength={1000} value={typed} onChange={(e) => setTyped(e.target.value)} />
             </label>
           )}
+          {file && (
+            <div className="xeplr-factory-ask-field">
+              <span className="xeplr-factory-ask-label" id={`${titleId}-file`}>{file.label || (file.multiple ? 'Files' : 'File')}{file.required ? ' *' : ''}</span>
+              <FileField
+                id={`${titleId}-files`}
+                rules={file}
+                files={files}
+                onChange={setFiles}
+                upload={upload}
+                readFile={readFile}
+                disabled={busy}
+                inputProps={{ 'aria-labelledby': `${titleId}-file`, 'aria-required': file.required ? true : undefined }}
+              />
+            </div>
+          )}
           {error && <p className="xeplr-factory-ask-error" role="alert">{error}</p>}
         </div>
         <footer className="xeplr-factory-ask-foot">
           <button type="button" className="xeplr-factory-secondary" onClick={onCancel} disabled={busy}>Cancel</button>
-          <button type="button" className={button.variant === 'danger' ? 'xeplr-factory-danger' : 'xeplr-factory-primary'} onClick={() => onConfirm(typed)} disabled={busy}>
+          <button type="button" className={button.variant === 'danger' ? 'xeplr-factory-danger' : 'xeplr-factory-primary'} onClick={() => onConfirm(typed, files)} disabled={busy || missing}>
             {busy ? 'Working…' : button.label}
           </button>
         </footer>

package/src/designs/ControlView.jsx

@@ -3,6 +3,7 @@ import { tableColumns, LABEL_PRESETS } from '../controls.js'
 import { stepsOf } from '../document.js'
 import ListView from './ListView.jsx'
 import ButtonsView from './ButtonsView.jsx'
+import FileField from './FileField.jsx'
 import { fieldStyle, labelStyle, boxStyle } from './styles.js'
 
 // How each control LOOKS — the one renderer, used both on the builder's
@@ -14,7 +15,7 @@ import { fieldStyle, labelStyle, boxStyle } from './styles.js'
 
 const ids = (node) => `xeplr-factory-${node.id}`
 
-export default function ControlView({ node, mode = 'live', value, error, options, onChange, onBlur, disabled, list, upload, stepper, subform, rows, buttons }) {
+export default function ControlView({ node, mode = 'live', value, error, options, onChange, onBlur, disabled, list, upload, readFile, stepper, subform, rows, buttons }) {
   const View = VIEWS[node.type]
   if (!View) {
     return <div className="xeplr-factory-unknown">Unknown control “{node.type}”</div>
@@ -33,6 +34,7 @@ export default function ControlView({ node, mode = 'live', value, error, options
       disabled={design || disabled}
       list={list}
       upload={upload}
+      readFile={readFile}
       stepper={stepper}
       subform={subform}
       rows={rows}
@@ -317,51 +319,31 @@ function DatetimeView({ node, p, value, error, onChange, onBlur, disabled }) {
 }
 
 /**
- * A file field holds the stored file's PATH, not the file. Picking one uploads
- * it straight away (`upload`, supplied by the screen) and what comes back is
- * the value that is saved with the record.
+ * A file field holds the stored file's PATH, not the file — or, with
+ * `multiple`, a list of them. Picking one uploads it straight away (`upload`,
+ * supplied by the screen) and what comes back is the value saved with the
+ * record. A stored picture shows as a thumbnail when the screen can read it
+ * back (`readFile`).
  */
-function FileView({ node, p, design, value, error, onChange, onBlur, disabled, upload }) {
-  const [busy, setBusy] = useState(false)
-  const [failed, setFailed] = useState(null)
-  const accept = p.accept || ''
-  const choose = async (file) => {
-    if (!file || !upload) return
-    setFailed(null)
-    setBusy(true)
-    try {
-      const out = await upload(file, node)
-      onChange(out && out.path ? out.path : undefined)
-    } catch (e) {
-      setFailed(e && e.message ? e.message : 'The file could not be uploaded')
-    } finally {
-      setBusy(false)
-      onBlur()
-    }
-  }
+function FileView({ node, p, design, value, error, onChange, onBlur, disabled, upload, readFile }) {
+  const several = Boolean(p.multiple)
+  const files = several ? (Array.isArray(value) ? value : []) : value ? [value] : []
+  const { style, ...aria } = inputProps(node, p, error, disabled, onBlur)
   return (
-    <Field node={node} p={p} error={error || failed}>
-      {value
-        ? (
-          <div className="xeplr-factory-file">
-            <span className="xeplr-factory-file-name" title={String(value)}>{fileName(value)}</span>
-            <button type="button" className="xeplr-factory-file-clear" disabled={disabled} onClick={() => { onChange(undefined); onBlur() }}>Remove</button>
-          </div>
-        )
-        : (
-          <input
-            className="xeplr-factory-input xeplr-factory-file-input"
-            type="file"
-            accept={accept}
-            disabled={disabled || busy}
-            onChange={(e) => { const f = e.target.files && e.target.files[0]; e.target.value = ''; choose(f) }}
-            {...inputProps(node, p, error, disabled || busy, onBlur)}
-          />
-        )}
-      {busy && <div className="xeplr-factory-hint">Uploading…</div>}
-      {!busy && !value && (design || accept) && (
-        <div className="xeplr-factory-hint">{accept || 'any file'}{p.maxSize ? ` · up to ${p.maxSize} MB` : ''}</div>
-      )}
+    <Field node={node} p={p} error={error}>
+      <FileField
+        id={aria.id}
+        rules={p}
+        files={files}
+        onChange={(paths) => onChange(several ? paths : paths[0])}
+        onBlur={onBlur}
+        upload={upload ? (file) => upload(file, node) : undefined}
+        readFile={readFile}
+        disabled={disabled}
+        design={design}
+        inputProps={aria}
+        style={style}
+      />
     </Field>
   )
 }

package/src/designs/FileField.jsx

@@ -0,0 +1,99 @@
+import { useState } from 'react'
+import { filePicker, isImageFile } from '../controls.js'
+import { fileLabel } from '../values.js'
+import { useFilePreview } from '../useFilePreview.js'
+
+// THE FILES A FIELD HOLDS, AND THE PICKER THAT ADDS ONE — a file field's, and
+// a button's `ask.file`. Presentation only: what an upload is, and how a
+// stored picture is read back, are handed in.
+//
+// On a phone the picker is the phone's own: "Files, gallery or camera" opens
+// its menu (Photos, Camera, Files), "Camera only" opens the camera.
+
+/**
+ * @param rules     { accept, maxSize, multiple, maxFiles, source }
+ * @param files     the stored paths, as a list
+ * @param onChange  (paths) → void
+ * @param upload    async (File) → { path }
+ * @param readFile  async (path) → Blob — a picture's preview; names only without it
+ */
+export default function FileField({ id, rules, files, onChange, onBlur, upload, readFile, disabled, design, inputProps, style }) {
+  const [busy, setBusy] = useState(false)
+  const [failed, setFailed] = useState(null)
+  const r = rules || {}
+  const picker = filePicker(r)
+  const several = Boolean(r.multiple)
+  const list = Array.isArray(files) ? files : []
+  const full = several ? Boolean(r.maxFiles) && list.length >= r.maxFiles : list.length >= 1
+
+  // One at a time, in the order chosen: each answer is added as it lands, so a
+  // refusal of the third keeps the first two.
+  const choose = async (chosen) => {
+    if (!chosen.length || !upload) return
+    setFailed(null)
+    setBusy(true)
+    let next = list
+    try {
+      const room = several ? (r.maxFiles ? Math.max(r.maxFiles - list.length, 0) : chosen.length) : 1
+      if (chosen.length > room) setFailed(`At most ${r.maxFiles} files — the first ${room} were added`)
+      for (const file of chosen.slice(0, room)) {
+        const out = await upload(file)
+        if (out && out.path) { next = several ? [...next, out.path] : [out.path]; onChange(next) }
+      }
+    } catch (e) {
+      setFailed(e && e.message ? e.message : 'The file could not be uploaded')
+    } finally {
+      setBusy(false)
+      if (onBlur) onBlur()
+    }
+  }
+
+  const remove = (path) => { onChange(list.filter((p) => p !== path)); if (onBlur) onBlur() }
+  const hint = [r.accept || 'any file', r.maxSize ? `up to ${r.maxSize} MB` : null, several && r.maxFiles ? `at most ${r.maxFiles} files` : null].filter(Boolean).join(' · ')
+
+  return (
+    <div className="xeplr-factory-files">
+      {list.length > 0 && (
+        <ul className="xeplr-factory-files-list">
+          {list.map((path) => (
+            <FileItem key={path} path={path} readFile={readFile} disabled={disabled || busy} onRemove={() => remove(path)} />
+          ))}
+        </ul>
+      )}
+      {!full && (
+        <label className={`xeplr-factory-files-add${disabled || busy ? ' xeplr-factory-files-add--off' : ''}`} style={style}>
+          <input
+            className="xeplr-factory-files-input"
+            type="file"
+            accept={picker.accept || undefined}
+            multiple={picker.multiple || undefined}
+            capture={picker.capture}
+            disabled={disabled || busy}
+            onChange={(e) => { const chosen = Array.from(e.target.files || []); e.target.value = ''; choose(chosen) }}
+            {...(inputProps || {})}
+            id={id}
+          />
+          <span className="xeplr-factory-files-add-label">
+            {busy ? 'Uploading…' : r.source === 'camera' ? (list.length ? 'Take another photo' : 'Take a photo') : list.length ? 'Add another' : several ? 'Choose files' : 'Choose a file'}
+          </span>
+        </label>
+      )}
+      {failed && <div className="xeplr-factory-files-error" role="alert">{failed}</div>}
+      {!busy && !list.length && (design || r.accept) && <div className="xeplr-factory-hint">{hint}</div>}
+    </div>
+  )
+}
+
+function FileItem({ path, readFile, disabled, onRemove }) {
+  const preview = useFilePreview(path, readFile)
+  const picture = isImageFile(path)
+  return (
+    <li className="xeplr-factory-files-item">
+      {picture && preview.url
+        ? <img className="xeplr-factory-files-thumb" src={preview.url} alt="" />
+        : <span className="xeplr-factory-files-icon" aria-hidden="true">{picture ? '🖼' : '📄'}</span>}
+      <span className="xeplr-factory-files-name" title={fileLabel(path)}>{fileLabel(path)}</span>
+      <button type="button" className="xeplr-factory-files-remove" disabled={disabled} onClick={onRemove} aria-label={`Remove ${fileLabel(path)}`}>Remove</button>
+    </li>
+  )
+}

package/src/designs/PropertyPanel.jsx

@@ -3,8 +3,8 @@ import { getAtPath } from '../propertyPath.js'
 import { FIELD_PRESETS, presetFor } from '../presets.js'
 import { slugify, inputNodes, paramsText, screenParams } from '../document.js'
 import { isBinding, previousBinding } from '../values.js'
-import { FONT_FAMILIES, STYLE_KEYS, SCREEN_STYLE_KEYS, LIST_ACTIONS, FILE_KINDS } from '../controls.js'
-import { BUTTON_VARIANTS, COLUMN_DISPLAYS, BADGE_TONES, CONDITION_OPERATORS, NOTE_INPUT, optionValues } from '../buttons.js'
+import { FONT_FAMILIES, STYLE_KEYS, SCREEN_STYLE_KEYS, LIST_ACTIONS, FILE_KINDS, FILE_SOURCES, MAX_FILES } from '../controls.js'
+import { BUTTON_VARIANTS, COLUMN_DISPLAYS, BADGE_TONES, CONDITION_OPERATORS, NOTE_INPUT, FILES_INPUT, optionValues } from '../buttons.js'
 
 // The selected control's properties, GENERATED from its entry in controls.js:
 // each field there names a path and an editor type, and this file owns only
@@ -941,6 +941,7 @@ function ButtonsEditor({ value, onChange, functions }) {
         const fn = pick.find((f) => f.name === b.action) || null
         const schema = (fn && fn.inputSchema) || []
         const takesNote = schema.some((f) => f.name === NOTE_INPUT)
+        const takesFiles = schema.some((f) => f.name === FILES_INPUT)
         return (
           <fieldset key={i} className="xeplr-factory-rows-editor-card">
             <legend>{b.label || `Button ${i + 1}`}</legend>
@@ -961,7 +962,7 @@ function ButtonsEditor({ value, onChange, functions }) {
               </select>
             </MiniField>
             {fn && fn.description && <div className="xeplr-factory-prop-help">{fn.description}</div>}
-            {schema.filter((f) => f.name !== NOTE_INPUT).map((f) => (
+            {schema.filter((f) => f.name !== NOTE_INPUT && f.name !== FILES_INPUT).map((f) => (
               <MiniField key={f.name} label={(f.label || f.name) + (f.required && f.default === undefined ? ' *' : '')} help={f.description}>
                 <ParamInput field={f} value={b.params ? b.params[f.name] : undefined} onChange={(v) => {
                   const params = { ...(b.params || {}) }
@@ -981,6 +982,9 @@ function ButtonsEditor({ value, onChange, functions }) {
                 {takesNote
                   ? <MiniField label="Note box label" help="Blank → no note box"><input className="xeplr-factory-prop-input" value={b.ask.note || ''} placeholder="Reason (optional)" onChange={(e) => edit(i, { ask: clean({ ...b.ask, note: e.target.value }) })} /></MiniField>
                   : fn && <div className="xeplr-factory-prop-help">{fn.name} takes no note.</div>}
+                {takesFiles
+                  ? <AskFileEditor value={b.ask.file} onChange={(file) => edit(i, { ask: clean({ ...b.ask, file }) })} />
+                  : b.ask.file && <div className="xeplr-factory-prop-help">{fn ? fn.name : 'This function'} takes no files — the picker will be refused when publishing.</div>}
               </>
             )}
             <ConditionsEditor label="Shows when" value={b.when} onChange={(v) => edit(i, { when: v })} />
@@ -1001,6 +1005,51 @@ function ButtonsEditor({ value, onChange, functions }) {
 
 const VARIANT_LABELS = { default: 'Ordinary', primary: 'Main', danger: 'Undo / remove' }
 
+/**
+ * The file a button's press takes (`ask.file`): a file field's rules, set the
+ * same way. Offered only when the function takes "files".
+ */
+function AskFileEditor({ value, onChange }) {
+  const f = value && typeof value === 'object' ? value : null
+  const set = (patch) => {
+    const next = { ...f, ...patch }
+    Object.keys(next).forEach((k) => { if (next[k] === undefined || next[k] === '' || next[k] === false) delete next[k] })
+    if (!next.multiple) delete next.maxFiles
+    onChange(next)
+  }
+  return (
+    <>
+      <label className="xeplr-factory-toggle">
+        <input type="checkbox" checked={Boolean(f)} onChange={(e) => onChange(e.target.checked ? { label: 'Photo', accept: FILE_KINDS.image.accept } : undefined)} />
+        <span>Asks for a file</span>
+      </label>
+      {f && (
+        <>
+          <MiniField label="File box label"><input className="xeplr-factory-prop-input" value={f.label || ''} onChange={(e) => set({ label: e.target.value })} /></MiniField>
+          <MiniField label="Allowed types"><AcceptEditor value={f.accept} onChange={(accept) => set({ accept })} /></MiniField>
+          <MiniField label="Take from">
+            <select className="xeplr-factory-prop-input" value={f.source || 'any'} onChange={(e) => set({ source: e.target.value === 'any' ? undefined : e.target.value })}>
+              {FILE_SOURCES.map((o) => <option key={o.value} value={o.value}>{o.label}</option>)}
+            </select>
+          </MiniField>
+          <MiniField label="Largest size (MB)"><input className="xeplr-factory-prop-input" type="number" min={1} max={200} value={f.maxSize ?? ''} onChange={(e) => set({ maxSize: e.target.value === '' ? undefined : Number(e.target.value) })} /></MiniField>
+          <label className="xeplr-factory-toggle">
+            <input type="checkbox" checked={Boolean(f.multiple)} onChange={(e) => set({ multiple: e.target.checked })} />
+            <span>Several files</span>
+          </label>
+          {f.multiple && (
+            <MiniField label="At most (files)"><input className="xeplr-factory-prop-input" type="number" min={1} max={MAX_FILES} value={f.maxFiles ?? ''} onChange={(e) => set({ maxFiles: e.target.value === '' ? undefined : Number(e.target.value) })} /></MiniField>
+          )}
+          <label className="xeplr-factory-toggle">
+            <input type="checkbox" checked={Boolean(f.required)} onChange={(e) => set({ required: e.target.checked })} />
+            <span>Required</span>
+          </label>
+        </>
+      )}
+    </>
+  )
+}
+
 /** One parameter's value: a dropdown when the function names the values allowed. */
 function ParamInput({ field, value, onChange }) {
   const allowed = optionValues(field.options)

package/src/designs/ScreenSample.jsx

@@ -220,6 +220,7 @@ export default function ScreenSample({ ctrl, className, style, renderPopup, rend
               error={node.props?.name ? ctrl.errors[node.props.name] : undefined}
               options={CHOICE_TYPES.includes(node.type) ? ctrl.optionsFor(node) : undefined}
               upload={node.type === 'file' ? ctrl.upload : undefined}
+              readFile={node.type === 'file' ? ctrl.readFile : undefined}
               rows={node.type === 'table' && ctrl.rowsFor ? ctrl.rowsFor(node) : undefined}
               stepper={node.type === 'stepper' ? {
                 active: ctrl.steps.active(node.id),

package/src/designs/factory.css

@@ -157,15 +157,40 @@
 .xeplr-factory-choice { display: flex; align-items: center; gap: calc(8 * var(--xf-u)); cursor: pointer; color: var(--xf-ink); }
 .xeplr-factory-choice input { width: calc(16 * var(--xf-u)); height: calc(16 * var(--xf-u)); min-width: 11px; min-height: 11px; margin: 0; accent-color: var(--xf-accent); }
 
-/* ── file ─────────────────────────────────────────────────────────────────── */
-.xeplr-factory-file { display: flex; align-items: center; gap: calc(8 * var(--xf-u)); min-width: 0; }
-.xeplr-factory-file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--xf-ink); }
-.xeplr-factory-file-clear {
+/* ── file ───────────────────────────────────────────────────────────────────
+   What the field holds — a row per file, a thumbnail for a picture — and,
+   while it has room, the picker: a box that looks like the other inputs, the
+   real <input type="file"> laid over it, invisible, so a tap opens the
+   device's own picker (on a phone: Photos, Camera, Files). */
+.xeplr-factory-files { display: flex; flex-direction: column; gap: calc(6 * var(--xf-u, 1px)); min-width: 0; min-height: 0; overflow: auto; }
+.xeplr-factory-files-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: calc(4 * var(--xf-u, 1px)); }
+.xeplr-factory-files-item { display: flex; align-items: center; gap: calc(8 * var(--xf-u, 1px)); min-width: 0; }
+.xeplr-factory-files-thumb {
+  flex: none; width: calc(40 * var(--xf-u, 1px)); height: calc(40 * var(--xf-u, 1px)); min-width: 28px; min-height: 28px;
+  object-fit: cover; border-radius: calc(4 * var(--xf-u, 1px)); border: 1px solid var(--xf-field-border); background: var(--xf-field-bg);
+}
+.xeplr-factory-files-icon {
+  flex: none; width: calc(40 * var(--xf-u, 1px)); height: calc(40 * var(--xf-u, 1px)); min-width: 28px; min-height: 28px;
+  display: inline-flex; align-items: center; justify-content: center; border-radius: calc(4 * var(--xf-u, 1px));
+  border: 1px solid var(--xf-field-border); background: var(--xf-field-bg);
+}
+.xeplr-factory-files-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--xf-ink); }
+.xeplr-factory-files-remove {
   flex: none; border: 1px solid var(--xf-field-border); background: var(--xf-field-bg); color: var(--xf-muted);
-  border-radius: calc(6 * var(--xf-u)); padding: calc(3 * var(--xf-u)) calc(8 * var(--xf-u)); cursor: pointer; font: inherit;
+  border-radius: calc(6 * var(--xf-u, 1px)); padding: calc(3 * var(--xf-u, 1px)) calc(8 * var(--xf-u, 1px)); cursor: pointer; font: inherit;
 }
-.xeplr-factory-file-clear:hover { color: var(--xf-ink); border-color: var(--xf-accent); }
-.xeplr-factory-file-input { padding: calc(5 * var(--xf-u)); }
+.xeplr-factory-files-remove:hover { color: var(--xf-ink); border-color: var(--xf-accent); }
+.xeplr-factory-files-add {
+  position: relative; display: flex; align-items: center; justify-content: center; flex: none;
+  min-height: calc(34 * var(--xf-u, 1px)); padding: calc(5 * var(--xf-u, 1px)) calc(10 * var(--xf-u, 1px)); box-sizing: border-box;
+  border: 1px dashed var(--xf-field-border); border-radius: calc(6 * var(--xf-u, 1px)); background: var(--xf-field-bg);
+  color: var(--xf-ink); cursor: pointer;
+}
+.xeplr-factory-files-add:hover, .xeplr-factory-files-add:focus-within { border-color: var(--xf-accent); }
+.xeplr-factory-files-add--off { cursor: default; opacity: .6; }
+.xeplr-factory-files-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: inherit; margin: 0; }
+.xeplr-factory-files-add-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.xeplr-factory-files-error { color: var(--xf-danger); font-size: .9em; white-space: normal; }
 
 /* ── stepper ──────────────────────────────────────────────────────────────
    The journey across the top: a circle per step, joined by a line. The line
@@ -804,7 +829,9 @@ button.xeplr-factory-activity-item:hover, button.xeplr-factory-activity-item:foc
      the smallest target a thumb hits reliably. */
   .xeplr-factory-input { --xf-min-font: 16px; font-size: max(16px, 1em); flex: none; min-height: 44px; }
   .xeplr-factory-textarea { min-height: 112px; }
-  .xeplr-factory-file-input { min-height: 0; }
+  .xeplr-factory-files { overflow: visible; }
+  .xeplr-factory-files-add { min-height: 44px; }
+  .xeplr-factory-files-thumb, .xeplr-factory-files-icon { width: 48px; height: 48px; }
   /* In the flow now: a message may push the next field down, and wraps
      rather than being cut off at the edge of a narrow screen. */
   .xeplr-factory-error { position: static; white-space: normal; }
@@ -812,7 +839,7 @@ button.xeplr-factory-activity-item:hover, button.xeplr-factory-activity-item:foc
   .xeplr-factory-check input { width: 22px; height: 22px; }
   .xeplr-factory-choice input { width: 20px; height: 20px; }
   .xeplr-factory-choices { overflow: visible; }
-  .xeplr-factory-file-clear { min-height: 40px; padding-inline: 14px; }
+  .xeplr-factory-files-remove { min-height: 40px; padding-inline: 14px; }
   .xeplr-factory-text { height: auto; overflow: visible; }
   .xeplr-factory-stepper { height: auto; }
   .xeplr-factory-list { max-height: none; }

package/src/model.js

@@ -3,7 +3,7 @@
 //
 //   import { screenFromSpec, validateDocument, formSchema } from '@xeplr/ui-factory/model'
 
-export { CONTROLS, OPTION_ID, OPTION_LABEL, LABEL_VARIANTS, LABEL_PRESETS, LIST_ACTIONS, STYLE_KEYS, SCREEN_STYLE_KEYS, FONT_FAMILIES, LAYOUTS, CHOICE_TYPES, STEP_LIMIT, MULTI_SEPARATOR, FILE_KINDS, MAX_FILE_MB, acceptList, controlGroups, withControls } from './controls.js'
+export { CONTROLS, OPTION_ID, OPTION_LABEL, LABEL_VARIANTS, LABEL_PRESETS, LIST_ACTIONS, STYLE_KEYS, SCREEN_STYLE_KEYS, FONT_FAMILIES, LAYOUTS, CHOICE_TYPES, STEP_LIMIT, MULTI_SEPARATOR, FILE_KINDS, MAX_FILE_MB, IMAGE_EXTENSIONS, FILE_SOURCES, MAX_FILES, isImageFile, filePicker, acceptList, controlGroups, withControls } from './controls.js'
 export {
   DOCUMENT_KIND, DOCUMENT_VERSION, DEFAULT_ASPECT, DEFAULT_WIDTH, MARGIN, GAP,
   createScreen, renameScreen, setScreenProperty, addControl, moveNode, setNodeProperty, getNodeProperty, removeNodes,
@@ -16,12 +16,12 @@ export { validateDocument, assertValidDocument } from './validateDocument.js'
 export { SCREEN_EVENTS, SCREEN_EVENT_KEYS, DECIDE_EVENT, FUNCTION_NAME, screenFunctions, missingFunctions, functionProblems, setEvent, functionsFor } from './events.js'
 // Buttons and lists whose rows a function works out — names and values only.
 export {
-  BUTTON_EVENT, LIST_ROWS_EVENT, ROW_DETAILS_EVENT, BUTTON_VARIANTS, COLUMN_DISPLAYS, BADGE_TONES, NOTE_INPUT, CONDITION_OPERATORS,
-  conditionMet, buttonShown, buttonDisabled, buttonPressed, screenButtons, buttonById, buttonInput, nodeFunctions, paramProblems, optionValues
+  BUTTON_EVENT, LIST_ROWS_EVENT, ROW_DETAILS_EVENT, BUTTON_VARIANTS, COLUMN_DISPLAYS, BADGE_TONES, NOTE_INPUT, FILES_INPUT, CONDITION_OPERATORS,
+  conditionMet, buttonShown, buttonDisabled, buttonPressed, screenButtons, buttonById, buttonInput, askFile, askFileProblem, nodeFunctions, paramProblems, optionValues
 } from './buttons.js'
 // Which pages are drawn from documents and which are web only (ui/pages.json).
 export { checkInventory, routesIn, pageWarnings, webOnlyMenus } from './pagesInventory.js'
-export { formSchema, initialValues, parseInput, validateValues, fieldError, sameId, optionValue, chooseable, saveState, recordValues, displayValue, fileLabel, toDbValue, fromDbValue, listColumns, listSource } from './values.js'
+export { formSchema, initialValues, parseInput, validateValues, fieldError, sameId, optionValue, chooseable, saveState, recordValues, displayValue, fileLabel, isMultiFile, toDbValue, fromDbValue, listColumns, listSource } from './values.js'
 export { screenFromSpec, screensFromSpec, entityNames, SPEC_HEIGHTS, ROW_GAP } from './generate.js'
 export { scaffoldEntity } from './scaffold.js'
 export { getAtPath, setAtPath } from './propertyPath.js'

package/src/pages.jsx

@@ -65,6 +65,8 @@ export function FactoryBuilder(props) {
  * @prop fetchRecord  async ({ screen, id }) → record — Edit loads the record fresh
  * @prop onDelete     async ({ id, source, record }) → void
  * @prop onChange     (values) → void
+ * @prop uploadFile   async (file, { screen, field }) → { path } — a file field's upload
+ * @prop readFile     async (path) → Blob — an attached file's bytes, for a picture's preview
  * @prop screens      { id → document } — the screens a list's Edit / New open in a popup
  * @prop loadScreen   async (id) → document — for screens not in `screens`
  * @prop controls     control registry (default: built-ins)
@@ -107,6 +109,7 @@ export function FactoryScreen(props) {
           onDelete={props.onDelete}
           uploadFile={props.uploadFile}
           fileUrl={props.fileUrl}
+          readFile={props.readFile}
           screens={props.screens}
           loadScreen={props.loadScreen}
           controls={props.controls}
@@ -138,6 +141,10 @@ export function FactoryScreen(props) {
               fetchRecord={props.fetchRecord}
               fetchRecords={props.fetchRecords}
               onDelete={props.onDelete}
+              // A file field in the popup uploads like one on the page.
+              uploadFile={props.uploadFile}
+              fileUrl={props.fileUrl}
+              readFile={props.readFile}
               screens={props.screens}
               loadScreen={props.loadScreen}
               controls={props.controls}

package/src/remote.js

@@ -3,7 +3,7 @@
 // in the app's database; this only sends and receives.
 //
 //   import { authFetch } from '@xeplr/ui-account'
-//   const factory = createFactoryApi({ fetch: authFetch })
+//   const factory = createFactoryApi({ fetch: authFetch, fetchFile: authFetchFile })
 //   <FactoryScreen document={screen} {...factory.screenProps} />
 //   <FactoryBuilder document={screen} {...factory.builderProps} lockedNames={…} />
 //
@@ -12,10 +12,13 @@
 /**
  * @param options.fetch  a fetch that adds auth and tenant headers (e.g. @xeplr/ui-account's authFetch)
  * @param options.base   prefix before /factory, if the router is mounted elsewhere (default '')
+ * @param options.fetchFile  (url) → Blob, signed like `fetch` (@xeplr/ui-account's authFetchFile):
+ *                       how an attached picture is read back for its preview. Without it
+ *                       a file field shows names only — an <img> cannot send the token.
  */
 import { createChildTable } from './masters.js'
 
-export function createFactoryApi({ fetch: doFetch, base = '' } = {}) {
+export function createFactoryApi({ fetch: doFetch, fetchFile, base = '' } = {}) {
   if (typeof doFetch !== 'function') throw new Error('createFactoryApi: pass { fetch } — usually authFetch from @xeplr/ui-account')
 
   // Two kinds of fetch are accepted, because both are what apps have:
@@ -135,7 +138,16 @@ export function createFactoryApi({ fetch: doFetch, base = '' } = {}) {
     // A button's press on one record → { button, message, output }. The
     // server reads the button — its function and parameters — from the
     // published screen; the request names it and carries the note.
-    pressButton: async ({ screen, button, id, note }) => one(await call('POST', `/buttons/${enc(screen)}/${enc(button)}`, note ? { id, note } : { id })),
+    pressButton: async ({ screen, button, id, note, files }) => one(await call('POST', `/buttons/${enc(screen)}/${enc(button)}`, {
+      id, ...(note ? { note } : {}), ...(Array.isArray(files) && files.length ? { files } : {})
+    })),
+    // A file a button's ask.file takes, stored before the press; the press
+    // then names it by the path this answers with.
+    uploadButtonFile: async (file, { screen, button }) => {
+      const form = new FormData()
+      form.append('file', file)
+      return one(await send('POST', `/buttons/${enc(screen)}/${enc(button)}/files`, form))
+    },
 
     // A file field's upload. The answer's `path` is what the record stores;
     // the file itself is read back through the same route, with auth.
@@ -144,10 +156,12 @@ export function createFactoryApi({ fetch: doFetch, base = '' } = {}) {
       form.append('file', file)
       return one(await send('POST', `/files/${enc(screen)}/${enc(field)}`, form))
     },
-    fileUrl: (path) => `${base}/factory/files/${String(path).split('/').map(enc).join('/')}`
+    fileUrl: (path) => `${base}/factory/files/${String(path).split('/').map(enc).join('/')}`,
+    // An attached file's bytes (a picture's preview), when the host said how.
+    readFile: typeof fetchFile === 'function' ? (path) => fetchFile(api.fileUrl(path)) : undefined
   }
-  api.screenProps = { loadScreen: api.loadScreen, onSave: api.onSave, fetchRecords: api.fetchRecords, fetchRecord: api.fetchRecord, onDelete: api.onDelete, fetchOptions: api.fetchOptions, uploadFile: api.uploadFile, fileUrl: api.fileUrl,
-    fetchRows: api.fetchRows, fetchRowDetails: api.fetchRowDetails, pressButton: api.pressButton }
+  api.screenProps = { loadScreen: api.loadScreen, onSave: api.onSave, fetchRecords: api.fetchRecords, fetchRecord: api.fetchRecord, onDelete: api.onDelete, fetchOptions: api.fetchOptions, uploadFile: api.uploadFile, fileUrl: api.fileUrl, readFile: api.readFile,
+    fetchRows: api.fetchRows, fetchRowDetails: api.fetchRowDetails, pressButton: api.pressButton, uploadButtonFile: api.uploadButtonFile }
   // makeChildTable: a list on a form can make the table it is about to point
   // at — rows belonging to this record — without leaving the designer. A
   // server act, which is why the builder is given it rather than doing it.

package/src/tableSchema.js

@@ -88,8 +88,10 @@ export function columnForField(node) {
     case 'datetime':
       return { ...base, type: 'timestamp' }
     case 'file':
-      // The stored file's path, as the upload answered with it.
-      return { ...base, type: 'varchar', length: FILE_PATH_LENGTH }
+      // The stored file's path, as the upload answered with it — several of
+      // them, comma separated, in a text column (varchar → text is a widening,
+      // so turning "several files" on keeps what is saved).
+      return p.multiple ? { ...base, type: 'text' } : { ...base, type: 'varchar', length: FILE_PATH_LENGTH }
     case 'multiselect':
       // Every chosen id in one text column, separated by commas.
       return { ...base, type: 'text' }

package/src/useFactoryScreen.js

@@ -61,7 +61,9 @@ import { buttonShown, buttonDisabled, buttonPressed } from './buttons.js'
  * @param hooks         a FactoryHooks (or an object with some of its methods) — get / save / delete / actions
  * @param fetchRows     async ({ screen, node, q, filter }) → { rows, counts } — a list whose rows a function works out (rowsFrom)
  * @param fetchRowDetails async ({ screen, node, column, id }) → [{ text, sub?, at?, open? }] — an activity cell's hover box
- * @param pressButton   async ({ screen, button, id, note }) → { message } — a button's press, run on the server
+ * @param pressButton   async ({ screen, button, id, note, files }) → { message } — a button's press, run on the server
+ * @param uploadButtonFile async (file, { screen, button }) → { path } — a file a button's `ask.file` takes, stored before the press
+ * @param readFile      async (path) → Blob — an attached file's bytes: a picture's preview (no preview without it)
  * @param onButtonDone  ({ button, result, record }) → void — after a press: the host reloads what it shows
  * @param reloadKey     anything — when it changes, every list reloads (the host heard something changed)
  * @param urlKey        where the open step of each stepper lives in the URL (`<urlKey>Steps`),
@@ -82,9 +84,9 @@ import { buttonShown, buttonDisabled, buttonPressed } from './buttons.js'
 const SEARCH_PAUSE_MS = 250
 
 export function useFactoryScreen({
-  document: doc, record, recordKey = 'id', onSave, fetchOptions, fetchRecords, fetchRecord, onDelete, onChange, screens, loadScreen, hooks, uploadFile, fileUrl,
+  document: doc, record, recordKey = 'id', onSave, fetchOptions, fetchRecords, fetchRecord, onDelete, onChange, screens, loadScreen, hooks, uploadFile, fileUrl, readFile,
   onOpenRecord, onDone, onDirtyChange, params, urlKey, previous,
-  fetchRows, fetchRowDetails, pressButton, onButtonDone, reloadKey,
+  fetchRows, fetchRowDetails, pressButton, uploadButtonFile, onButtonDone, reloadKey,
   link, onReady,
   controls = CONTROLS
 } = {}) {
@@ -830,6 +832,7 @@ export function useFactoryScreen({
   // and is greyed out is read from it; the press runs on the server, which
   // checks the same again on the saved record.
   const pressRef = useRef(pressButton); pressRef.current = pressButton
+  const buttonUploadRef = useRef(uploadButtonFile); buttonUploadRef.current = uploadButtonFile
   const buttonDoneRef = useRef(onButtonDone); buttonDoneRef.current = onButtonDone
   const [pressing, setPressing] = useState(null)        // button id on the wire
   const [buttonNote, setButtonNote] = useState(null)    // { kind: 'done' | 'error', text, button }
@@ -842,12 +845,20 @@ export function useFactoryScreen({
     pressing,
     note: buttonNote,
     clearNote: () => setButtonNote(null),
-    press: async (b, typed) => {
+    readFile: readFile || null,
+    // A file the button's ask.file takes: stored first, its path sent with the press.
+    upload: async (file, b) => {
+      if (!buttonUploadRef.current) throw new Error('No uploadButtonFile was provided, so this button cannot take a file')
+      const out = await buttonUploadRef.current(file, { screen: doc.id, button: b.id })
+      if (!out || !out.path) throw new Error('The upload did not answer with the stored file')
+      return out
+    },
+    press: async (b, typed, files) => {
       if (!pressRef.current) { setButtonNote({ kind: 'error', text: 'No pressButton was provided', button: b.id }); return false }
       setPressing(b.id)
       setButtonNote(null)
       try {
-        const result = await pressRef.current({ screen: doc.id, button: b.id, id: recordId, note: typed })
+        const result = await pressRef.current({ screen: doc.id, button: b.id, id: recordId, note: typed, files })
         setButtonNote({ kind: 'done', text: (result && result.message) || `${b.label} — done`, button: b.id })
         setListVersion((v) => v + 1)
         if (buttonDoneRef.current) buttonDoneRef.current({ button: b, result, record: buttonRecord })
@@ -859,7 +870,7 @@ export function useFactoryScreen({
         setPressing(null)
       }
     }
-  }), [buttonRecord, pressing, buttonNote, doc, recordId])
+  }), [buttonRecord, pressing, buttonNote, doc, recordId, readFile])
 
   return {
     document: doc,
@@ -889,6 +900,7 @@ export function useFactoryScreen({
     visibleNodes,
     upload,
     fileUrl,
+    readFile: readFile || null,
     flush,
     save: runSave,
     saveNow: runSave,

package/src/useFilePreview.js

@@ -0,0 +1,40 @@
+import { useEffect, useState } from 'react'
+import { isImageFile } from './controls.js'
+
+// A STORED PICTURE, SHOWN. Attachments come back only through the factory's
+// signed route, which an <img src> cannot call — so the bytes are fetched
+// (`readFile`, the host's signed fetch) and shown from a local object URL,
+// released when the path changes or the field goes away. No JSX.
+
+/**
+ * @param path      a stored path, as the upload answered with it
+ * @param readFile  async (path) → Blob, or nothing (then: no preview)
+ * @returns {{ url, failed }} — url is null until loaded, for a non-picture,
+ *          or without readFile
+ */
+export function useFilePreview(path, readFile) {
+  const [state, setState] = useState({ url: null, failed: false })
+  const wanted = Boolean(path && readFile && isImageFile(path))
+
+  useEffect(() => {
+    if (!wanted) { setState({ url: null, failed: false }); return undefined }
+    let gone = false
+    let url = null
+    Promise.resolve()
+      .then(() => readFile(path))
+      .then((blob) => {
+        if (gone) return
+        url = URL.createObjectURL(blob)
+        setState({ url, failed: false })
+      })
+      .catch(() => { if (!gone) setState({ url: null, failed: true }) })
+    return () => {
+      gone = true
+      if (url) URL.revokeObjectURL(url)
+    }
+    // readFile is the host's function; a new one each render must not refetch.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [path, wanted])
+
+  return state
+}

package/src/validateDocument.js

@@ -11,7 +11,7 @@
 // fields writing the same key — looks like a data problem to whoever uses it.
 
 import { SCREEN_EVENT_KEYS, FUNCTION_NAME } from './events.js'
-import { CONTROLS, LABEL_VARIANTS, LIST_ACTIONS, STYLE_KEYS, SCREEN_STYLE_KEYS, LAYOUTS, MULTI_SEPARATOR, MAX_FILE_MB, STEP_LIMIT, acceptList } from './controls.js'
+import { CONTROLS, LABEL_VARIANTS, LIST_ACTIONS, STYLE_KEYS, SCREEN_STYLE_KEYS, LAYOUTS, MULTI_SEPARATOR, MAX_FILE_MB, STEP_LIMIT, acceptList, FILE_SOURCES, IMAGE_EXTENSIONS, MAX_FILES } from './controls.js'
 import { DOCUMENT_KIND, DOCUMENT_VERSION } from './document.js'
 import { RESERVED_COLUMNS, MAX_IDENTIFIER } from './tableSchema.js'
 import { FIELD_PRESETS, INPUT_TYPES, presetFor } from './presets.js'
@@ -281,19 +281,44 @@ function checkStep(node, doc, at, err) {
 
 /** A file field: which extensions it takes, and how big a file may be. */
 function checkFile(props, at, err) {
-  if (props.accept !== undefined) {
-    if (typeof props.accept !== 'string') err(`${at}.props.accept`, 'must be a string of extensions, e.g. ".pdf,.docx"')
+  checkFileRules(props, `${at}.props`, err)
+}
+
+/**
+ * A file's rules — a file field's props, or a button's `ask.file`: what it
+ * takes, how large, how many, and from where. `at` is where they sit.
+ */
+function checkFileRules(rules, at, err) {
+  if (rules.accept !== undefined) {
+    if (typeof rules.accept !== 'string') err(`${at}.accept`, 'must be a string of extensions, e.g. ".pdf,.docx"')
     else {
-      const list = acceptList(props.accept)
-      if (!list.length) err(`${at}.props.accept`, 'names no extension — ".pdf,.docx", or leave it out for any file')
+      const list = acceptList(rules.accept)
+      if (!list.length) err(`${at}.accept`, 'names no extension — ".pdf,.docx", or leave it out for any file')
       list.forEach((x) => {
-        if (!EXTENSION.test(x)) err(`${at}.props.accept`, `"${x}" is not an extension — letters and digits after a dot, e.g. ".xlsx"`)
+        if (!EXTENSION.test(x)) err(`${at}.accept`, `"${x}" is not an extension — letters and digits after a dot, e.g. ".xlsx"`)
       })
     }
   }
-  if (props.maxSize !== undefined) {
-    if (!(Number.isFinite(props.maxSize) && props.maxSize > 0 && props.maxSize <= MAX_FILE_MB)) {
-      err(`${at}.props.maxSize`, `must be a number of megabytes from 1 to ${MAX_FILE_MB}`)
+  if (rules.maxSize !== undefined) {
+    if (!(Number.isFinite(rules.maxSize) && rules.maxSize > 0 && rules.maxSize <= MAX_FILE_MB)) {
+      err(`${at}.maxSize`, `must be a number of megabytes from 1 to ${MAX_FILE_MB}`)
+    }
+  }
+  if (rules.multiple !== undefined && typeof rules.multiple !== 'boolean') err(`${at}.multiple`, 'must be true or false')
+  if (rules.maxFiles !== undefined) {
+    if (!(Number.isInteger(rules.maxFiles) && rules.maxFiles >= 1 && rules.maxFiles <= MAX_FILES)) err(`${at}.maxFiles`, `must be a whole number of files from 1 to ${MAX_FILES}`)
+    else if (!rules.multiple) err(`${at}.maxFiles`, 'is for several files — turn on "multiple", or remove it')
+  }
+  if (rules.source !== undefined) {
+    const sources = FILE_SOURCES.map((s) => s.value)
+    if (!sources.includes(rules.source)) err(`${at}.source`, `must be one of: ${sources.join(', ')}`)
+    else if (rules.source === 'camera') {
+      // A camera takes pictures: a field that also takes PDFs could never be
+      // filled the way it says, and one that takes no images at all is wrong.
+      const list = typeof rules.accept === 'string' ? acceptList(rules.accept) : []
+      if (!list.length || list.some((x) => !IMAGE_EXTENSIONS.includes(x))) {
+        err(`${at}.accept`, `a camera takes photos — with "source": "camera", the allowed types must be images only (${IMAGE_EXTENSIONS.join(',')})`)
+      }
     }
   }
 }
@@ -524,12 +549,25 @@ function checkFedColumn(c, p, err) {
 
 const BUTTON_KEYS = ['id', 'label', 'action', 'params', 'ask', 'when', 'disabledWhen', 'pressedWhen', 'variant']
 const ASK_KEYS = ['title', 'message', 'note']
+// A button's `ask.file`: the file a press takes — a file field's rules, plus its label and required.
+const ASK_FILE_KEYS = ['label', 'required', 'accept', 'maxSize', 'multiple', 'maxFiles', 'source']
 
 /**
  * A panel of buttons. Each names a function and the values it is given; the
  * server checks the names against what is registered when the screen is
  * published (functionProblems). Here: the shape.
  */
+function checkAskFile(f, at, err) {
+  if (!f || typeof f !== 'object' || Array.isArray(f)) { err(at, 'must be { label?, accept, maxSize?, multiple?, maxFiles?, source?, required? } — the file a press takes'); return }
+  const bad = Object.keys(f).filter((k) => !ASK_FILE_KEYS.includes(k))
+  if (bad.length) err(at, `only ${ASK_FILE_KEYS.map((k) => `"${k}"`).join(', ')} are used — remove: ${bad.join(', ')}`)
+  if (f.label !== undefined && typeof f.label !== 'string') err(`${at}.label`, 'must be a string')
+  if (f.required !== undefined && typeof f.required !== 'boolean') err(`${at}.required`, 'must be true or false')
+  // The server checks an upload against these, so there must be something to check.
+  if (f.accept === undefined) err(`${at}.accept`, 'is required — the extensions it takes, e.g. ".png,.jpg,.jpeg" (the server refuses anything else)')
+  checkFileRules(f, at, err)
+}
+
 function checkButtons(props, at, err, ids) {
   if (props.title !== undefined && typeof props.title !== 'string') err(`${at}.props.title`, 'must be a string')
   if (!Array.isArray(props.buttons)) { err(`${at}.props.buttons`, 'must be an array of buttons — { id, label, action, params? }'); return }
@@ -553,9 +591,10 @@ function checkButtons(props, at, err, ids) {
     if (b.ask !== undefined) {
       if (!b.ask || typeof b.ask !== 'object' || Array.isArray(b.ask)) err(`${p}.ask`, 'must be { title?, message?, note? } — what the person is asked before it runs')
       else {
-        const bad = Object.keys(b.ask).filter((k) => !ASK_KEYS.includes(k))
-        if (bad.length) err(`${p}.ask`, `only ${ASK_KEYS.map((k) => `"${k}"`).join(', ')} are used — remove: ${bad.join(', ')}`)
+        const bad = Object.keys(b.ask).filter((k) => !ASK_KEYS.includes(k) && k !== 'file')
+        if (bad.length) err(`${p}.ask`, `only ${[...ASK_KEYS, 'file'].map((k) => `"${k}"`).join(', ')} are used — remove: ${bad.join(', ')}`)
         ASK_KEYS.forEach((k) => { if (b.ask[k] !== undefined && typeof b.ask[k] !== 'string') err(`${p}.ask.${k}`, 'must be a string') })
+        if (b.ask.file !== undefined) checkAskFile(b.ask.file, `${p}.ask.file`, err)
       }
     }
     if (b.variant !== undefined && !BUTTON_VARIANTS.includes(b.variant)) err(`${p}.variant`, `must be one of: ${BUTTON_VARIANTS.join(', ')}`)

package/src/values.js

@@ -20,7 +20,7 @@ export function formSchema(doc, controls = CONTROLS) {
     const def = controls[node.type]
     const p = node.props
     const field = { name: p.name }
-    if (def.valueType) field.type = def.valueType
+    if (def.valueType) field.type = isMultiFile(node) ? 'array' : def.valueType
     if (p.label) field.description = p.label
     if (p.required) field.required = true
     if (p.default !== undefined) field.default = p.default
@@ -41,6 +41,8 @@ export function formSchema(doc, controls = CONTROLS) {
       delete v.notFuture
       if (Object.keys(v).length) field.validation = v
     }
+    // Several files: a list of stored paths, no longer than the field holds.
+    if (isMultiFile(node)) field.validation = { ...(field.validation || {}), itemType: 'string', ...(p.maxFiles ? { maxItems: p.maxFiles } : {}) }
     return field
   })
 }
@@ -101,10 +103,10 @@ export function initialValues(doc, provided = {}, controls = CONTROLS, previous
       if (resolved !== undefined) out[name] = resolved
       else if (!isBinding(node.props.default)) out[name] = node.props.default
       else if (node.type === 'checkbox') out[name] = false
-      else if (node.type === 'multiselect' || node.type === 'table') out[name] = []
+      else if (listValued(node)) out[name] = []
     }
     else if (node.type === 'checkbox') out[name] = false
-    else if (node.type === 'multiselect' || node.type === 'table') out[name] = []
+    else if (listValued(node)) out[name] = []
   })
   return out
 }
@@ -116,7 +118,7 @@ export function initialValues(doc, provided = {}, controls = CONTROLS, previous
  */
 export function parseInput(node, raw) {
   if (node.type === 'checkbox') return Boolean(raw)
-  if (node.type === 'multiselect') return Array.isArray(raw) ? raw : fromDbValue(node, raw) || []
+  if (node.type === 'multiselect' || isMultiFile(node)) return Array.isArray(raw) ? raw : fromDbValue(node, raw) || []
   if (node.type === 'table') return Array.isArray(raw) ? raw : []
   if (raw === undefined || raw === null || raw === '') return undefined
   if (node.type === 'number') {
@@ -166,6 +168,13 @@ export function fieldError(node, value, loadedOptions) {
     if (v.maxItems != null && ticked.length > v.maxItems) return `${label}: tick at most ${v.maxItems}`
     return null
   }
+  // SEVERAL FILES: required is at least one, and no more than it holds.
+  if (isMultiFile(node)) {
+    const files = Array.isArray(value) ? value : []
+    if (!files.length) return p.required ? `${label} is required` : null
+    if (p.maxFiles && files.length > p.maxFiles) return `${label}: at most ${p.maxFiles} files`
+    return null
+  }
   if (node.type === 'multiselect') {
     const chosen = Array.isArray(value) ? value : []
     if (!chosen.length) return p.required ? `${label} is required` : null
@@ -286,7 +295,7 @@ export function recordValues(doc, record, controls = CONTROLS) {
     const v = record ? record[name] : undefined
     if (v !== undefined && v !== null) out[name] = fromDbValue(node, v)
     else if (node.type === 'checkbox') out[name] = false
-    else if (node.type === 'multiselect' || node.type === 'table') out[name] = []
+    else if (listValued(node)) out[name] = []
   })
   return out
 }
@@ -329,7 +338,7 @@ export function displayValue(node, value, options) {
   if (value === undefined || value === null || value === '') return ''
   if (!node) return typeof value === 'object' ? JSON.stringify(value) : value
   if (node.type === 'checkbox') return value ? 'Yes' : 'No'
-  if (node.type === 'file') return fileLabel(value)
+  if (node.type === 'file') return (isMultiFile(node) ? fromDbValue(node, value) || [] : [value]).map(fileLabel).join(', ')
   if (node.type === 'datetime') return String(value).replace('T', ' ').slice(0, 16)
   if (node.type === 'dropdown' || node.type === 'radio') return optionName(node, value, options)
   if (node.type === 'multiselect') {
@@ -344,6 +353,16 @@ function optionName(node, value, options) {
   return hit ? hit.name : String(value)
 }
 
+/** A file field that holds several files: its value is a list of stored paths. */
+export function isMultiFile(node) {
+  return Boolean(node && node.type === 'file' && node.props && node.props.multiple)
+}
+
+/** A field whose value is a list: a multi-select, a table's ticked rows, several files. */
+function listValued(node) {
+  return node.type === 'multiselect' || node.type === 'table' || isMultiFile(node)
+}
+
 /** The name at the end of a stored file path, without the id that keeps it apart. */
 export function fileLabel(path) {
   const s = String(path)
@@ -361,7 +380,7 @@ export function fileLabel(path) {
 /** A screen value → what its column stores. */
 export function toDbValue(node, value) {
   if (value === undefined || value === null) return value
-  if (node.type === 'multiselect') {
+  if (node.type === 'multiselect' || isMultiFile(node)) {
     const list = Array.isArray(value) ? value : [value]
     return list.length ? list.map((v) => String(v)).join(MULTI_SEPARATOR) : null
   }
@@ -371,7 +390,7 @@ export function toDbValue(node, value) {
 /** What a column holds → the screen's value. */
 export function fromDbValue(node, value) {
   if (value === undefined || value === null) return value
-  if (node.type === 'multiselect') {
+  if (node.type === 'multiselect' || isMultiFile(node)) {
     if (Array.isArray(value)) return value
     const s = String(value)
     return s === '' ? [] : s.split(MULTI_SEPARATOR).filter((x) => x !== '')