Input Upload

Every user-facing string: the `title` headline, the fallback `trigger` text and each rejection message (`tooLarge`, `wrongType`, `tooMany`, `minWidth`, `maxWidth`, `minHeight`, `maxHeight`, `aspectRatio`). Messages with values take a function or a `{placeholder}` template (`"Arquivo maior que {max}"`). Unset keys keep the English defaults; an explicit `title` / `trigger` prop wins over `labels.title` / `labels.trigger`. In Astro only template strings survive to the client.

BCP 47 locale for the file sizes interpolated into rejection messages (`{max}`, `{size}`), formatted with `Intl.NumberFormat` (`"pt-BR"` → `"1,5 kB"`). Omitted, sizes keep the English form (`"1.5 KB"`).

Bindable mirror of the upload entries — every picked, uploading, stored or rejected file (engine → out only; use the engine API to change them).

Seed entries — files already stored elsewhere (`{ name, url, size }`). Read once, at creation.

Surface background variant.

Corner radius override. Without it the dropzone keeps its default `lg` corner. `inner` renders a concentric corner computed from the nearest parent panel (parent radius − parent padding, floored at `2xs`).

Size variant. Scales the dropzone's min-height, padding, icon, and typography together.

Semantic tone color scheme indicating validation state or context (for example, a red dropzone after rejecting an oversized file).

Stretch the dropzone to fill its container width.

Dropzone layout: - `stack` — the classic centered dropzone. - `inline` — a compact single row as tall as an Input of the same `size`. - `tile` — a square that fills a grid cell (put it in an `UploadList` grid's `append` slot to get a gallery "add" tile). - `avatar` — a single-image picker that shows the current image, its upload progress and a remove button. Forces single-file selection.

Border radius for the bottom-left and bottom-right corners.

Border radius for the top-left and bottom-left corners.

Border radius for the top-right and bottom-right corners.

Border radius for the top-left and top-right corners. Overrides `radius` on those corners only (flush-edge chains).

Avatar corner shape (`layout="avatar"` only).

Native `accept` filter forwarded to the file input.

Start uploading as soon as files are accepted (otherwise call `engine.start()`).

Native `capture` hint for camera/microphone sources.

How many files upload at once.

Another element that accepts dropped files: `"document"` (the whole page), a CSS selector or an element. Pair it with an `UploadDropOverlay`.

Maps a stored entry to the value its hidden form input submits. Defaults to the response's `id` / `key` / `url`, then the entry `url`.

Width/height constraints applied to image files.

Maximum number of accepted files.

Maximum size per file, in bytes. Larger files are rejected.

Allow selecting multiple files.

Fires with the full entry list whenever it changes.

Fires with the rejected files (and their reasons) whenever validation runs.

Uploads each accepted file: `(file, { onProgress, signal, entry })` → the server's response. With it, the engine runs the queue (progress, time left, retry, abort on remove) and the field `name` moves onto hidden inputs carrying each stored file's value.

Custom per-file validator — return an error string to reject, `null` to accept. May be async.

Fires when an upload rejects.

Fires when an upload resolves.

Extra dropzone content rendered after the trigger row.

Secondary helper line under the title (e.g. accepted formats).

Centered dropzone icon. Defaults to a built-in upload glyph.

Dropzone headline — a plain string or a snippet for rich content. Overrides `labels.title`.

Trigger button label — a plain string renders the built-in button, a snippet takes over the trigger entirely. Overrides `labels.trigger`.

Bindable reference to the native `<input type="file">` element.

Bindable handle to the headless engine (`addEntries`, `removeEntry`, `retry`, `start`, `clear`, the `$entries` store, …).

Per-slot escape hatch bag — each slot accepts a Panda CSS `style` object and a `props` map of HTML attributes spread onto that slot's element.

Astro / vanilla: serialize the props into `data-input-upload-config` so the client runtime hydrates this instance and `getPindoba(el, "input-upload")` can `update()` it. Frameworks with their own reactivity don't need it.

Every user-facing string: per-status row text, action labels, the live-region announcements and the list's accessible name.

BCP 47 locale for sizes and durations (`Intl.NumberFormat`).

Row size for `density="compact"`: rows become control rows as tall as an `inline` dropzone of the same size, so the two line up when stacked.

Fixed column count for `layout="grid"`. Omitted, tiles auto-fill from a minimum width.

`compact` tightens rows: name and status share one line and in-flight uploads show a small ring instead of a bar. In a grid, tiles shrink and drop their caption.

`list` — one row per file with a progress bar under it. `grid` — square thumbnail tiles (photo galleries); put a `layout="tile"` dropzone in the `append` slot for an "add" tile.

Per-slot escape hatch bag — each slot accepts a Panda CSS `style` object and a `props` map of HTML attributes spread onto that slot's element.

Astro / vanilla: serialize the props into `data-upload-list-config` so the client runtime hydrates this instance and `getPindoba(el, "upload-list")` can `update()` it. Frameworks with their own reactivity don't need it.

Overlay strings.

`fixed` covers the viewport (a page-wide `dropTarget="document"`); `absolute` covers the nearest positioned ancestor (a container target).

Per-slot escape hatch bag.

Astro / vanilla: serialize the props into `data-upload-drop-overlay-config` so the client runtime hydrates this instance and `getPindoba(el, "upload-drop-overlay")` can `update()` it. Frameworks with their own reactivity don't need it.

Every user-facing string: the button `label` and each rejection message (`tooLarge`, `wrongType`, `tooMany`, `minWidth`, `maxWidth`, `minHeight`, `maxHeight`, `aspectRatio`). Messages with values take a function or a `{placeholder}` template. Unset keys keep the English defaults; an explicit `label` prop wins over `labels.label`. In Astro only template strings survive to the client.

BCP 47 locale for the file sizes interpolated into rejection messages (`{max}`, `{size}`), formatted with `Intl.NumberFormat` (`"pt-BR"` → `"1,5 kB"`). Omitted, sizes keep the English form (`"1.5 KB"`).

Visual emphasis forwarded to the inner Pindoba `<Button>`.

Size variant for the upload button.

Semantic tone color forwarded to the inner Pindoba `<Button>`.

Stretch the upload button to fill its container width.

Per-slot escape hatch bag — each slot accepts a Panda CSS `style` object and a `props` map of HTML attributes spread onto that slot's element.

Astro / vanilla: serialize the props into `data-upload-button-config` so the client runtime hydrates this instance and `getPindoba(el, "upload-button")` can `update()` it. Frameworks with their own reactivity don't need it.