Patterns
Get files into the system, map their fields, and show processing through to the end without making people wait.
How it works
- Accept files by drop or by a Browse button; list each file with its size and a Remove control.
- Show per-file progress and errors (type, size) next to the file.
- Map extracted fields to the target form, flagging fields that need a person.
- Let people leave while processing runs, and notify them when it finishes.
See it built: mapper full-screen page.
Elements
Dropzone · Progress · InputFieldMapper · NotificationCenter · Banner · Toast · List
Usability
Do
- Name the accepted file types and the size limit before the person picks a file.
Don’t
- Don’t block the whole screen while files upload.
Accessibility
- Browse is a real button; drag and drop is never the only way.
-
Each file’s progress is a named
role="progressbar", and completion is announced once.
Test your implementation too. Each element’s own contract is on its page; a flow adds focus moves and announcements that need their own keyboard and screen reader check.