Files in by drag, drop or browse, with progress you can trust.
| Prop / event | Type | Notes |
|---|---|---|
| onUpload | (file, onProgress) => void | Called per file; report 0–100 |
| multiple | boolean | Accept more than one file |
| accept / maxSize | string / number | Type and size gates, checked before upload |
| drag / drop | — | Zone turns warm while a file hovers |
| remove | — | Cancels in-flight or clears a finished file |
Show honest, determinate progress and keep every file removable. For a single avatar or image, a click-to-replace tile is friendlier than a full dropzone.
Show real, determinate progress so people know it is working.
Don't hide progress behind a vague spinner. A bar is a promise.
State the accepted types and size limit before anyone tries.
Don't upload then reject. Validate type and size before the request.
File attachments in a form or message composer.
A wide dropzone for data imports and bulk uploads.
Large files show live progress and a cancel affordance.
| Token | Value | Role |
|---|---|---|
| --up-zone-border | 1.5px dashed #2F2F36 | Resting dropzone edge |
| --up-over | #FF7A00 | Drag-over border and wash |
| --up-bar | #FF7A00 | Progress fill (green when done) |
| --up-done | #1FA35C | Completed state |
| --up-radius | 12px zone · 9px row | Corners |
| --up-remove | #EB4A4F | Remove × on hover |
<div class="o-upload__zone"> <CloudIcon /> <span class="o-upload__title"><b>Click to upload</b> or drag and drop</span> <span class="o-upload__hint">PNG, PDF or ZIP up to 10 MB</span> <input type="file" multiple hidden /> </div> <div class="o-upload__file"> <FileIcon /> <span class="o-upload__name">report.pdf</span> <span class="o-upload__bar"><span style="width:45%"></span></span> <button class="o-upload__remove">×</button> </div>