Drop a file, or browse for one
A dashed dropzone paired with a list of the chosen files. The list is fully controlled — you pass files and handle onFilesSelected and onFileRemove, so upload progress and per-file errors stay owned by your app. The real file input stays in the DOM for form semantics; the zone is just its label.
Try it
Drop files here or click to browse — this demo wires selection and removal to local state.
Add as many files as you need.
Accept list
Passing accept both filters the picker and prints the allowed types under the instruction copy.
PNG, JPEG, or PDF up to 10 MB each.
File list
Sizes are formatted from a raw byte count. The remove button only renders when you pass onFileRemove.
- brand-guidelines.pdf2.3 MB
- logo-primary.svg18.0 KB
- hero-photo.jpg825.3 KB
Upload progress
Give a file a progress value between 0 and 100 to show a track under its name. Omit it for files that are already stored.
- annual-report.pdf8.0 MB
- appendix.docx1.0 MB
- cover.png200.0 KB
Uploading 2 of 3 files…
Per-file errors
A file-level error swaps that row to the error tokens and replaces the size line — the rest of the list is unaffected.
- presentation.keyUnsupported file type
- raw-footage.movExceeds the 10 MB limit
- notes.txt4.0 KB
States
Field-level error
At least one attachment is required.
Disabled
- contract-signed.pdf312.5 KB
Locked once the form is submitted.
Compact
- receipt.pdf50.0 KB