Build Assets
UI Component
Single Document Upload
One-file drag-and-drop + click picker with a type-aware preview, validation, progress and error states.
Platform: bothTags: file-upload, drag-drop, document, attachment, single
Purpose
Attach exactly one file. Drag-and-drop for speed, click as the accessible fallback. Constraints (type, max size) are shown before upload, and the chosen file previews as an image thumbnail or a type icon + name/size.
Anatomy
- Drop zone: dashed border, upload icon, "click to browse or drag and drop"
- Constraints line: accepted types + max size (13px tertiary)
- Preview: image thumbnail or file-type icon + name/size, with remove ×
- Progress bar during upload; check on complete
States
- Idle: dashed border, grey icon
- Drag over: solid accent border, light accent background
- Selected: preview replaces the zone
- Uploading: progress bar + percentage
- Complete: check icon; Error: red border + specific message
Do
- Show accepted types and max size upfront, not only on error
- Preview the file so users can confirm the right one
- Explain rejections specifically ("File too large — max 10MB")
- Keep a remove control so users can swap the file
Don't
- Use placeholder-only instructions with no visible label
- Signal errors by border color alone — add an icon + message
- Block the whole UI during upload
- Silently drop an invalid file
Accessibility
- A real <input type="file"> exists (visually hidden, focusable)
- Drop zone: role="button", tabindex="0", Enter/Space activate it
- Progress announced via aria-live; errors are text + icon, not color alone