# Upload
> Generated from uploader.contract.json — do not edit by hand.

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.

Surfaces: editor, dashboard, settings.

## Props
| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `listtype` | 'text' | 'picture-card' | `text` | Drop zone + file rows, or a grid of thumbnail tiles with a dashed add-box |
| `items` | JSON list | `[]` | Managed files: [{ name, status?: 'normal'|'uploading'|'error'|'done', percent?, thumb? }] |
| `multiple` | boolean | `false` | Allow selecting more than one file |
| `accept` | string | `—` | MIME/type filter, e.g. "image/*" |
| `maxcount` | number | `∞` | Cap; the add trigger hides once items reach it |
| `disabled` | boolean | `false` | Dims and disables the zone / add-box |
| `change` | CustomEvent<{files}> | `—` | Composed event on select; read e.detail.files (File[]) |
| `remove` | CustomEvent<{name,index}> | `—` | Composed event when an item's ✕ is clicked |

## Visual standard (measured)
- Zone: 1px dashed border-strong #D4D4D4, radius 8, pad 24 16
- Rest text: text-tertiary #8A8A8A, 14/21
- Hover / drag: border + accent tint color-primary / bg-accent (motion-mid, persistent zone)
- File row: 1px border #E3E3E3, radius 8, file icon + name + remove ✕
- Uploading: 4px pill progress track (split), color-primary fill, width animates (motion-slow)
- Error item: border + text color-error #F5222D on bg-negative, warning glyph
- Done item: check-circle glyph color-success #16C49A
- Picture-card: 104px tiles + dashed add-box; add-box is the trigger

## When to use
- **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

State what you accept in the zone copy and set `accept` to match. Drive `items[].status` from your upload lifecycle (uploading → done/error) and update `percent` as bytes land. Show the error reason near the failed row. Use `picture-card` for images, `text` for documents. Offer both click and drag — both are wired here.