Help users send you documents or images.
When to use this pattern
Where possible, services should avoid the need for users to upload files. Try to capture the information through some other means - for example via an API or another government department.
Uploading is a challenging interaction for many users, particularly on desktop devices. It's somewhat easier on mobile devices, but still presents challenges. Users lower on the digital literacy scale will struggle and may not be able to use a service if they need to upload as part of it.
How it works
Allow for multiple file formats and upload methods
Be forgiving of different file formats and provide multiple methods for uploading files. If you’re using proprietary formats like Microsoft Excel, make sure you also support non-proprietary ones like CSV.
Check what the user uploads and provide feedback
If you can, check that what the user has uploaded meets your requirements. If it doesn’t, tell them what they need to do and let them re-upload the file.
If there are potentially lots of errors it might be better to have users upload files one at a time and to step through the errors individually. .
Default to a file picker
The most basic upload mechanism is the file picker. This can be difficult to use on desktop devices, but works well on mobile devices. You should support using a file picker as a minimum before adding alternatives.
Help users find the file
Many users struggle to use the file explorer or finder on laptop or desktop machines. If you know the kind of file you need you may be able to help them find it.
Enhance with drag and drop
Proficient computer users may prefer to drag and drop from their file system onto the browser.
Always use another upload method alongside drag and drop.
- Drag and drop only works in modern browsers
- Users with dexterity problems such as tremor may have difficulty dragging a file.
- You may want to support drag and drop to support users who attempt to drag a file, and would otherwise lose their progress in the service.
Upload from a mobile device
- File uploads from a mobile device (particularly photos) can often be much easier for users. If they can be directed to access the service from a mobile device, they may be able to upload much more easily.
- Third party integration
- Letting users upload through a third party may be an easy way for them to provide files, so long as it's likely the file exists with the third party, and they're already connected with the service.
- However, this method is likely to target more 'advanced' users - it won't help users who don't know what 'dropbox' is. is an example of a 'drop-in' way to let users connect multiple services.
Research on this pattern
Research themes to explore
- wording: 'attach' vs. 'upload'
- general usability: how do inexperienced users fare with attaching files
- mobile vs. desktop user experience
- default browser widgets: are they good enough or do we need a custom control?
- managing multiple file uploads
- managing multi-page documents (eg. all 6 photos from one marriage certificate booklet)
- whether to immediately upload after selecting file, or to 'batch' together, then have an 'upload' button.
- drag and drop as alternative to upload