Upload imagesDrop images here or choose from disk.
![](data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80"%3E%3Crect width="80" height="80" fill="%23eef3fb"/%3E%3Cpath d="M18 56 34 36l10 12 8-10 10 18H18Z" fill="%231f6fd4"/%3E%3Ccircle cx="55" cy="25" r="6" fill="%23a9c6ef"/%3E%3C/svg%3E)
interface-reference.png820 KBSingle
Single preview image upload.
/render stateComponent
Image upload
Image-specific upload composition with previews, accept filtering, and avatar/grid variants.
Image upload is a tuned FileUpload preset for media previews. It does not crop, transform, or store assets.
Upload imagesDrop images here or choose from disk.
interface-reference.png820 KBPlayground
Props in the URL.
Controls update query params directly. Complex slots use curated fixtures so component states stay deterministic, linkable, and screenshot-ready.
Loading playground.
States
Rendered matrix.
Every state maps to the same component render route through the `state` query param.
interface-reference.png820 KBUpload imagesDrop images here or choose from disk.
interface-reference.png820 KBAvatar
Compact avatar-oriented image picker.
/render stateUpload imagesDrop images here or choose from disk.
interface-reference.png820 KBGrid
Multi-image grid treatment.
/render stateProps
Public contract.
| Name | Type | Default | Description |
|---|---|---|---|
variant | 'single' | 'avatar' | 'grid' | single | Image preview layout preset. |
value | readonly UploadItemValue[] | - | Controlled image queue. |
defaultValue | readonly UploadItemValue[] | [] | Uncontrolled initial image queue. |
multiple | boolean | true | Allows multiple images in the queue. |
onValueChange | (value: readonly UploadItemValue[]) => void | - | Receives queue values. |
label | ReactNode | - | Field label. |