opinion
FileUpload
A drop zone with a file picker, size checks and progress. It does not upload; you do.
Project filesDrop files or press the picker; progress comes from your own upload
Drag files here, or
- depot-fascia-final.pdf1.4 MB✓
- van-livery-photos.zip48.0 MB
Drag files here, or
Drag files here, or
Drag a file here, or
- rota-export-march.csv87.9 KBPending
In context
Add to a projectInside a dialog-style card
Add files to Depot signage
Drag files here, or
Props
| Prop | Type | Required | Default |
|---|---|---|---|
accept | string | undefined | No | — |
multiple | boolean | undefined | No | — |
maxSizeBytes | number | undefined | No | — |
onFilesSelected | ((files: File[]) => void) | undefined | No | — |
files | UploadFileState[] | undefined | No | — |
onRemove | ((file: UploadFileState) => void) | undefined | No | — |
data-rebar-* attributes
data-rebar-component="file-upload"; parts: dropzone, picker, input, list, file-row (each row also carrying file-name/file-size/file-status/remove).
Migrating to Ant Design
AntD's own Upload component is a close structural match, but it owns real upload-request logic internally (an action URL, customRequest) — this component deliberately doesn't, so a migration is an opportunity to either adopt AntD's built-in request handling or keep your own upload logic and just swap the rendering shell.