A file upload input allows a user to select a file from their computer's file system.
When to use this component
Use this component when there is a requirement for a user to select and submit a local file as part of their task.
How to use this component
<input> value is set to
type="file". A file upload input also takes the attribute
accepts= which take a comma separated list of file extensions with the
. prefix for example:
How to check uploads
To help users upload a file, you should:
- check they have uploaded something
- check that what they have uploaded is a valid file type
- show an error message if they have not uploaded anything or what they have uploaded is not a valid file type
Use the correct errors pattern and show the error details above the checkbox options.
If no file has been selected
Use “Select a [whatever they need to select]”.
For example, “Select a report”.
If there was a problem and the file was not uploaded
Use “The selected file could not be uploaded. Please try again”.
If the file is the wrong file type
Use “Select a file that is [list of file types]”.
For example, “Select a file that is an XLS, XLSX or PDF”.
If the file is too big
Use “Select a file that is smaller than [largest file size]”.
For example, “Select a file that is smaller than 2MB”.