Skip to main content
U.S. flag

An official website of the United States government

Dot gov

The .gov means it’s official.
Federal government websites often end in .gov or .mil. Before sharing sensitive information, make sure you’re on a federal government site.

Https

The site is secure.
The https:// ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.

Patterns

Ask users for…

Files

Also known as: File upload

Use: Deployed
Follow this pattern to help users select and upload a file.

Usage

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

Layout details

Here is the structure for asking a user to upload a file:

  • Header
  • 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.

file upload input state

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.

Loading state

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.

file upload loading state

Review state

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.

file upload review state

Content considerations

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:

Edit this page in GitHub (Permissions required)
Last updated: Aug 26, 2022