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
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

Uploading

Progress row.
Q2_report.pdf64% - 2.4 MB PDF

Success

Completed file row.
Q2_report.pdf2.4 MB PDF

Image

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

Error

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

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.