A NSW Government website
Design System v3.16.0

File upload

File uploaders help users to select and upload files.

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

This functionailty is not included in the base component.

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

A loader showing the process is pending.

A loader can show the process is pending.

A tick showing the process is complete.

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.

A loader showing the process is pending.

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.

Formats accepted: JPG, PNG or PDF
File size must not exceed 350MB

Error messages

Formats accepted: JPG, PNG or PDF
File size must not exceed 350MB
The selected file must be smaller than 350MB