Ask users for…
Also known as: File uploadUse: Deployed
When to use this pattern
- Required documentation. When a user must upload a file in order to provide required documentation.
When not to use this pattern
8 Don’t ask if it does not affect the delivery of a service. You should only ask users to upload documents if absolutely necessary.
How to design and build
Here is the structure for asking a user to upload a file:
- Instructions on what documents to upload
- Bulleted list of allowed file types and sizes
- Secondary button to upload
Note: This content will vary depending on what you’re asking the user to upload. Work with your content specialist with how to ask for certain documents.
How this pattern works
- Avoid error states by listing out what types and sizes of files are accepted. The types of files accepted depend on the form. Most forms accept pdf, jpg, jpeg, and png.
- Validate file uploads. A validation message for when a user skips uploading a required document: Please upload a file. When there needs to be at least one required document: Please upload at least one file
- Do not italicize information regarding file sizes. Long strings of italicized text can be difficult to read for some users with low vision or reading disabilities.
The upload button will be replaced by a gray card with a standard progress bar component to indicate the progress of the document upload. The user will see the name of the file, as well as, have the option to cancel the upload.
When a document has successfully uploaded, the card will have the uploaded file name bolded and there will be an option to delete the file. Depending on the type of form, there can be a dropdown of selecting document types. Underneath the card there will be a secondary button to give the user the option of adding more document uploads.
Error message templates for file upload
When a user doesn’t upload a required document:
Say ‘Please upload a file’’
When there needs to be at least one required document:
Say ‘Please upload at least one file’
Live application examples: