Primitive

Upload item

Single uploaded-file row with thumbnail, progress, status, and remove affordance.

Use UploadItem inside upload components or queues. Keep the row compact and let progress/status carry the interaction state.
media
DOM renderImage render
Upload itemDefault
Q2_report.pdfQueued - 2.4 MB PDF

Playground

Controls update query params directly, so every primitive state can be linked, rendered, and screenshotted deterministically.

Loading playground

Rendered matrix

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

Default

Queued file row.
Q2_report.pdfQueued - 2.4 MB PDF
Render state

Uploading

Progress row.
Q2_report.pdf64% - 2.4 MB PDF
Render state

Success

Completed file row.
Q2_report.pdf2.4 MB PDF
Render state

Image

Image row with preview affordance.
interface-reference.png840 KB PNG
Render state

Error

Rejected file row.
archive.zipFile type is not accepted.
Render state

Public contract

The public prop table is generated from item metadata and schema-backed controls.
NameTypeDefaultDescription
name *ReactNode-Visible file name.
metaReactNode-Size, type, or secondary upload metadata.
errorReactNode-Error copy shown instead of metadata.
status'idle' | 'uploading' | 'success' | 'error'idleUpload item status.
progressnumber-Optional 0-100 upload progress rail.
previewUrlstring-Image preview URL.
iconIconNamefileFallback glyph when no preview is present.
onRemove() => void-Shows and handles the remove affordance.