Component

File upload

Local upload queue composition with dropzone, file validation, progress rows, and remove actions.

File upload owns local selection and value shape only. Applications own signed URLs, transport, retries, virus scanning, and persistence.
form
DOM renderImage render
File uploadDefault
Upload filesDrop PDFs, images, or source packets.
Q2_report.pdf2.3 MB
source_packet.csv898 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

Dropzone with mixed completed and active rows.
Upload filesDrop PDFs, images, or source packets.
Q2_report.pdf2.3 MB
source_packet.csv898 KB - 64%
Render state

Uploading

Active upload progress row.
Upload filesDrop PDFs, images, or source packets.
Q2_report.pdf2.3 MB - 72%
Render state

Success

Completed file row with metadata.
Upload filesDrop PDFs, images, or source packets.
Q2_report.pdf2.3 MB
Render state

Grid

Grid queue layout for dense packet review.
Upload filesDrop PDFs, images, or source packets.
Q2_report.pdf2.3 MB
source_packet.csv898 KB - 64%
Render state

Empty

Empty drop target.
Upload filesDrop PDFs, images, or source packets.
Render state

Error

Rejected file row with validation copy.
Upload filesDrop PDFs, images, or source packets.
archive.zipFile type is not accepted.
Render state

Public contract

The public prop table is generated from item metadata and schema-backed controls.
NameTypeDefaultDescription
valuereadonly UploadItemValue[]-Controlled upload queue.
defaultValuereadonly UploadItemValue[][]Uncontrolled initial upload queue.
acceptstring-Native accept filter for selected files.
maxSizenumber-Maximum file size in bytes.
multiplebooleantrueAllows multiple files in the queue.
previewImagesbooleanfalseCreates local object URLs for image previews.
onValueChange(value: readonly UploadItemValue[]) => void-Receives queue values.
onFilesChange(files: readonly File[]) => void-Receives raw dropped or selected files.
labelReactNode-Field label.