Upload

Upload lets users upload a single file when uploading is the primary purpose of the screen.

Upload component.
When to use

Use an upload:

  • when the user needs to upload a single file
  • when uploading a file is the purpose of the screen and main CTA

Don't use an upload:

  • if the user may need to upload multiple files — use an upload input instead
  • within a form — use an upload input instead

Best practice
  • Include a description if you need to specify the file requirements, such as the type or size (and you haven’t got this info somewhere else on the screen).

Placement

The upload should be the priority interaction on the screen.

Interaction

Users can either drag and drop their file, or use the button.

Content

Title

Title copy should:

  • be the name of the file the user needs to upload

  • be in sentence case

  • have no full stop

Description (optional)

Description copy should:

  • give the user more information about the file requirements

  • be 1 or 2 sentences

  • have a full stop

Playground
Availability

Platform

Available

Developer documentation

Web