Unofficial
Internal
Components
File upload
Help users select and upload a file.
Props
| Name | Type | Default | Description |
|---|---|---|---|
| id | string | - | 'id' attribute to place on the base HTML element |
| classBlock | string | govuk-file-upload | Block name override in BEM style classes applied to all elements |
| classModifiers | Modifiers | [] | BEM style modifiers to apply to the base HTML element |
| className | string | - | Extra classes to apply to the base HTML element |
| suffix | string | - | Suffix to show after the field |
| error | ReactNode | - | Error message |
| hint | ReactNode | - | Hint |
| label | ReactNode | - | REQUIRED. Label |
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
Error messages
Error messages should be styled like this:
Make sure errors follow the guidance in error message and have specific error messages for specific error states.
If no file has been selected
Say ‘Select a [whatever they need to select]’. For example, ‘Select a report’.
If the file is the wrong file type
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’.
If the file is too big
Say ‘The selected file must be smaller than [largest file size]’. For example, ‘The selected file must be smaller than 2MB’.
If the file is empty
Say ‘The selected file is empty’.
If the file contains a virus
Say ‘The selected file contains a virus’.
If the file is password protected
Say ‘The selected file is password protected’.
If there was a problem and the file was not uploaded
Say ‘The selected file could not be uploaded – try again’.
If there is a limit on how many files the user can select
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’.
If the file is not in a template that must be used or the template has been changed
Say ‘The selected file must use the template’.
Research on this component
Read a blog post about design tips for helping users upload things.