Overview

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. This is how GOV.UK Notify handles errors in it’s CSV file upload.

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. Filepicker 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

Emailing files to the service