Document upload
– User needs
– How it works
- Success pages
– Status
– Error messages
– Accessibility statement
– Research into this pattern
– Discuss this pattern
This pattern is to help users upload any supporting documents by:
-
Uploading supporting documents within an online from.
-
Uploading supporting documents after completing an online form via a link on the success page or success email.
-
Use in-form optional document upload when the service wants users to upload any supporting documents if they have them.
-
Use in-form mandatory document upload when the service needs supporting documents that the user will have easy access to.
-
Use in-form multiple mandatory and optional document upload when the service needs specific documents from a user. This upload is usually used for legal documents to ensure that these important documents are uploaded. The optional upload at the end is optional and dependent on the service, an optional upload may be used to uploading any further supporting evidence.
-
Out of form document upload is used when a user may not have the documents required to hand at the time of completing a form. For example, if they need to collect any documents from somewhere else that they don’t have in their home. The user is given 7 days or more (dependent on the service) to upload and provide the documents to complete their form/application.
The user must upload their supporting documents within the form.
Mandatory in-form document upload allows users to select files from their device, view the files they have chosen in a table format with the opportunity to delete files, re-upload or upload more files and finally submit the form.
When using mandatory in-form document upload, you should:
- include a list of required documents
- allow users to upload documents that fit the file type and size criteria
- allow users to upload multiple files in one transaction
- allow users to delete files
Miro - In-from mandatory upload - mobile
Axure - In-from mandatory upload - desktop
Add the word 'optional' in brackets next to the H1 for all optional document upload pages
The user can upload their supporting documents within the form.
Optional in-form document upload allows users to select files from their device, view the files they have chosen in a table format with the opportunity to delete files, re-upload or upload more files and finally submit the form. Or the user can press submit once they have reached the document upload page if they do not have any supporting documents to upload.
When using optional in-form document upload, you should:
- add the word 'optional' in brackets next to the H1 for all optional document upload pages
- include a primary and secondary button so that users can decide if they want to upload documents or submit.
- allow users to submit without uploading any documents.
- allow users to upload documents that fit the file type and size criteria
- allow users to upload multiple files in one transaction
- allow users to delete files
Miro - In-from optional upload - mobile
Axure - In-from optional upload - desktop
Add the word 'optional' in brackets next to the H1 for all optional document upload pages
The user must upload the documents required on each mandatory upload page. An optional upload is included after the mandatory uploads, to allow the user to upload any additional files. This pattern is usually used for specific services that require legal or important documents. To ensure specific documents are uploaded, the uploads are split up into multiple mandatory upload pages to ensure no documents are missed and that the correct amount are uploaded.
When using mandatory and optional in-form document upload, you should:
- add the word 'optional' in brackets next to the H1 for all optional document upload pages
- include more than one mandatory document upload page
- list the documents needed on each page
- remind the user on the next page what documents they have already uploaded
- allow users to upload documents that fit the file type and size criteria
- allow users to upload multiple files in one transaction
- allow users to delete files
- if an optional upload is needed, include a primary and secondary button so that users can decide if they want to upload documents or submit
Miro - Multiple mandatory and optional in-form document upload
The user must upload their documents after submitting a form using the link provided on the success page or email, the user will be directed to a mandatory document upload page. This is used in cases where the user may need more time to gather any documents that they need.
When using out of form document upload, you should:
- include a reference number taken from the success page or email
- include reCAPTCHA before the user submits the document uploads
- allow users to upload documents that fit the file type and size criteria
- allow users to upload multiple files in one transaction
- allow users to delete files
Miro - Mandatory, out of form document upload - mobile
Axure - Out of form success page with document upload - desktop
Button spacing/overrides for when both the ‘Upload file(s)’ and ‘Submit/Continue’ button is needed on the same page. On both mobile and desktop for Java Scrip disabled document uploads, the secondary 'upload file(s)' button should be placed ABOVE the primary 'Submit' or ‘Continue’ button. This is an override from the GOV.UK button component. GOV.UK put secondary and mandatory buttons next to each other(side by side) rather than below each other (apart from mobile as they have to go below each other due to screen width). GOV.UK always put the primary button before the secondary.
When Java Script is disabled two buttons are needed for the user to be able to upload and submit documents. When there is a secondary ‘upload file(s)’ button and a ‘Submit/Continue’ button, the secondary button goes first as it's closer to the choose file component, then the primary 'Submit/Continue' button would go below. We don’t want the user to make the mistake of submitting their form instead of uploading their documents due to the buttons being too close together.
On desktop, the secondary ‘Upload file(s)’ button would go under the ‘Choose file’ component. The primary ’Submit’ or ‘Continue’ button would then go below the secondary button.
Axure - button example - desktop
Axure - button example - mobile
Note: Still in development/in the backlog
Axure - Mandatory document upload - upload files and submit - mobile
Axure - Mandatory document upload - upload files and submit - desktop
Note: Still in development/in the backlog
Axure - Optional document upload - upload files and submit - desktop
Axure - Optional document upload - upload files and submit - mobile
Note: Still in development/in the backlog
Axure - Multiple mandatory and optional document upload - mobile
Note: Still in development/in the backlog
Axure - Out of form - upload files and submit - desktop
Axure - Out of form - upload files and submit - mobile
Standard success page after documents have been successfully uploaded:
Out of form success page and email used before document upload:
- Axure - Success page with document upload button - mobile
- Axure - Success page with document upload button - desktop
For content rules, see Axure mock-up's - Document upload and Miro - Document upload
Working progress
Use a validation message to identify when the user has failed to provide the information in the format you are expecting. To help the user, you should show the user an error message that allows them to fix the problem.
For styling follow GOV.UK Design System - Error message
| Label | Error state | Validation messages | For example |
|---|---|---|---|
| Choose file | If a file hasn't been uploaded in a mandatory upload and the uses presses submit/continue/upload file(s) | You must upload a file | |
| Choose file | If the file is the wrong file type | The selected file must be a {{list of file types}} | The selected file must be a CSV or ODS’ or ‘The selected file must be a JPG, BMP, PNG, TIF or PDF |
| Choose file | If the file is too big | The selected file must be smaller than {{largest file size}} | The selected file must be smaller than 4MB |
| Choose file | If there was a problem and the file was not uploaded | The selected file could not be uploaded – try again | |
| Choose file | If the combined file size is over the limit | The total size of all your added files must not be more than 20MB |
For error messages, visit: Miro - Error messages (mock-ups)
This pattern has a rating of AA.
Please see our accessibility statement.
To make it AAA, we need to:
- Add...
For the development of this pattern, we looked closely at:
GOV.UK Design System - File upload
Ministry of Justice - Pattern Library
From a user test - 'I try to upload the same file name again, it doesn't let me and just removes it from the box which remains empty. And there is no error message displayed, so it took me a while to figure out why it wasn't letting me upload this file'.
Reviewed by the UX team, Content team and Tech Leads in May 2021
Patterns
Add anotherAddress picker
Book
Check your answers (summary page)
Check your order
Conditionally revealing a related question on Radio buttons and Checkboxes
Document upload
Eligibility end-point
Emails
Error pages
Name
Pay
Phone and email
Preferred method of contact
Street picker
Success page