Component

Image upload

Image-specific upload composition with previews, accept filtering, and avatar/grid kinds.

Image upload is a tuned FileUpload preset for media previews. It does not crop, transform, or store assets.
media
DOM renderImage render
Image uploadDefault
Upload imagesDrop images here or choose from disk.
interface-reference.png820 KB
flow-detail.png605 KB - 64%

Playground

Controls update query params directly. Complex slots use item-owned examples so component states stay deterministic, linkable, and screenshot-ready.

Loading playground

Rendered matrix

Every state maps to the same component render route through the state query param.

Default

Single media upload with completed and active rows.
Upload imagesDrop images here or choose from disk.
interface-reference.png820 KB
flow-detail.png605 KB - 64%
Render state

Single

Single preview image upload.
Upload imagesDrop images here or choose from disk.
interface-reference.png820 KB
Render state

Avatar

Compact avatar-oriented image picker.
Upload imagesDrop images here or choose from disk.
interface-reference.png820 KB
Render state

Grid

Multi-image grid treatment.
Upload imagesDrop images here or choose from disk.
interface-reference.png820 KB
flow-detail.png605 KB - 64%
Render state

Uploading

Active media upload progress row.
Upload imagesDrop images here or choose from disk.
flow-detail.png605 KB - 64%
Render state

Empty

Empty image drop target.
Upload imagesDrop images here or choose from disk.
Render state

Error

Rejected image upload row.
Upload imagesDrop images here or choose from disk.
reference.psdImage type is not accepted.
Render state

Public contract

The public prop table is generated from item metadata and schema-backed controls.
NameTypeDefaultDescription
kind'single' | 'avatar' | 'grid'singleImage preview layout preset.
valuereadonly UploadItemValue[]-Controlled image queue.
defaultValuereadonly UploadItemValue[][]Uncontrolled initial image queue.
multiplebooleantrueAllows multiple images in the queue.
onValueChange(value: readonly UploadItemValue[]) => void-Receives queue values.
labelReactNode-Field label.