## Upload
Select files by clicking a drop zone or dragging onto it — then manage them as rows or picture tiles with per-item state.
Tier: leaf-lit. Frameworks: HTML (paste-and-run, no build step) · React · Vue 3.
Default to the HTML snippet — <aha-uploader> is a standard custom element that renders on open — React/Vue are thin adapters over the same element.
Surfaces: editor, dashboard, settings.
Props:
- listtype: 'text' | 'picture-card', default text. Drop zone + file rows, or a grid of thumbnail tiles with a dashed add-box
- items: JSON list, default []. Managed files: [{ name, status?: 'normal'|'uploading'|'error'|'done', percent?, thumb? }]
- multiple: boolean, default false. Allow selecting more than one file
- accept: string, default —. MIME/type filter, e.g. "image/*"
- maxcount: number, default ∞. Cap; the add trigger hides once items reach it
- disabled: boolean, default false. Dims and disables the zone / add-box
- change: CustomEvent<{files}>, default —. Composed event on select; read e.detail.files (File[])
- remove: CustomEvent<{name,index}>, default —. Composed event when an item's ✕ is clicked
Tokens: bg-container, bg-container-secondary, bg-hover, bg-accent, bg-negative, border, border-strong, color-primary, color-error, color-success, text-default, text-secondary, text-tertiary, split, radius-default, radius-sm, radius-pill, font-product, motion-fast, motion-mid, motion-slow, ease-in-out, ease-out.
Use when: Upload (the user brings a file in — an image, a CSV, a document); Input (capturing typed text, not a file); Colour picker (choosing a value from presets rather than importing).