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.

Q2_report.pdf2.4 MB

Playground

Props in the URL.

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

Loading playground.

States

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

Q2_report.pdf2.4 MB

Default

Completed file row.

Q2_report.pdf2.4 MB - 64%

Uploading

Progress row.

interface-reference.png2.4 MB

Image

Image row with preview affordance.

Q2_report.pdfFile type is not accepted.

Error

Rejected file row.

Props

Name	Type	Default	Description
`name *`	`ReactNode`	-	Visible file name.
`meta`	`ReactNode`	-	Size, type, or secondary upload metadata.
`error`	`ReactNode`	-	Error copy shown instead of metadata.
`status`	`'idle' \| 'uploading' \| 'success' \| 'error'`	`idle`	Upload item status.
`progress`	`number`	-	Optional 0-100 upload progress rail.
`previewUrl`	`string`	-	Image preview URL.
`icon`	`IconName`	`file`	Fallback glyph when no preview is present.
`onRemove`	`() => void`	-	Shows and handles the remove affordance.