Build Assets
UI Component
Multiple Documents Upload
Drag-and-drop + click picker for many files, each row with its own preview, progress and error.
Platform: bothTags: file-upload, drag-drop, multiple, batch, attachments
Purpose
Upload several files at once. The drop zone stays visible so users can keep adding; each file gets its own row with a preview, per-file progress, and per-file error so one failure never hides the others.
Anatomy
- Persistent drop zone with a running count (e.g. 2/5 files)
- One row per file: preview (thumbnail/icon), name, size, remove
- Per-file progress bar during upload
- Per-file error row (red) with a specific reason
States
- Idle / drag over (accent border)
- At limit: zone disabled once max files reached
- Per file: uploading (progress), complete (check), error (red + reason)
Do
- Show per-file progress for uploads over 1 second (Doherty threshold)
- Keep the drop zone after selection so more files can be added
- Report each rejected file and why, not a single generic error
- Allow removing any file before and during the batch
Don't
- Collapse all files into one progress bar that hides failures
- Freeze the UI while the batch uploads
- Reject the whole batch because one file is invalid
- Hide which specific file exceeded the limit
Accessibility
- A real multiple <input type="file"> exists (hidden, focusable)
- Drop zone: role="button", tabindex="0", keyboard-activated
- Each file's progress and error announced via aria-live