File upload

Usage

Use file upload when a user is required to upload a file from their device to a specific location. Only ask users to upload files when it's critical to the delivery of your service.

Do:

• Use help text to highlight any input restrictions to the users upfront, for example format or size
• Allow multiple file formats as not everyone has access to the same software
• Be considerate of asking for large files, as some users may have limited band width or data
• Let users know exactly what errors occurred during an upload process so they can fix them

When to avoid

Avoid asking users to provide documents if you don't require them. Be considerate of file size and don't ask users to upload large files.

How this component works

Truncate file names

Truncate file names when they extend beyond the width of the parent element

Upload status

Where a user would benefit from knowing the status of their upload consider adding indicators.

A loader can show the process is pending.

A tick can show the process is complete.

Multiple uploads

Clearly communicate if a user can upload multiple files and consider displaying additional files vertically.

Clearly group the files and allow users to remove each individually.

Error messages

Error messages inform the user when there is an issue with the data they have input. Provide helpful error messages to clearly explain to the user what the issue is and how they can effectively address the errors. Check out GOV.UK Design System's error messages for file uploads for some best practice examples.

Accessibility

All components are responsive and meet WCAG 2.1 AA accessibility guidelines.