File upload

Help users select and upload a file.

Open this example in Storybook

Source unavailable from Storybook for this example.

Source unavailable from Storybook for this example.

When to use this component

You should only ask users to upload something if it’s critical to the delivery of your service.

How it works

To upload a file, the user can either:

use the ‘Choose file’ button

‘drag and drop’ a file into the file upload input area

Let users reuse uploaded files

Make sure users can easily reuse a previously uploaded file within a single journey, unless doing so would be a major security or privacy concern.

For example, a user might need to upload a photo of their driving licence to prove their identity, and again to prove their address.

You can make it easier for the user to reuse a file by showing it as an option for the user to select instead of the file upload. Consider users on public devices before choosing to make the file available to preview or download.

There are 2 ways to use the file upload component. You can use HTML or, if you are using Nunjucks, you can use the Nunjucks macro.

Open this example in Storybook

Source unavailable from Storybook for this example.

Source unavailable from Storybook for this example.

Get the Nunjucks macro for this example from the Camden Frontend library

Error messages

Error messages should be styled like this:

Open this example in Storybook

Source unavailable from Storybook for this example.

Source unavailable from Storybook for this example.

Get the Nunjucks macro for this example from the Camden Frontend library

Make sure errors follow the guidance in error message and have specific error messages for specific error states.

Say ‘Select a [whatever they need to select]’.

For example, ‘Select a report’.

Say ‘The selected file must be a [list of file types]’.

For example, ‘The selected file must be a CSV or ODS’ or ‘The selected file must be a JPG, BMP, PNG, TIF or PDF’.

Say ‘The selected file must be smaller than [largest file size]’.

For example, ‘The selected file must be smaller than 2MB’.

Say ‘The selected file is empty’.

Say ‘The selected file contains a virus’.

Say ‘The selected file is password protected’.

Say ‘The selected file could not be uploaded – try again’.

Say ‘You can only select up to [highest number] files at the same time’.

For example, ‘You can only select up to 10 files at the same time’.

Say ‘The selected file must use the template’.

Research on this component

This component is based on the file upload component from the GOV.UK Design System.

You can take part in the ‘File upload' discussion on GOV.UK’s Design System’s GitHub and share your research.