File upload

Upload photos or documents directly into the software

Guidelines

Use for uploading documents and images, typically within a dialogue component.

Content

Use for uploading documents and images, typically within a dialogue component.

Title:

  • Include a title above the component
  • Title should start or include a strong, active verb such as “upload” or “add”
  • Examples:
    Add {a certificate}
    Upload {W-4 form} for {Jane Smith}

Subtitle (optional)

  • Use to further clarify what the thing is, why it’s necessary, what we’ll use it for, and/or the impact of not uploading the thing.

Component

  • Keep the component copy as is, as translations are embedded in the component.
  • Only change the files and size permitted if relevant.

Button (primary CTA)

  • If the component is in a dialog, include a primary button that repeats the verb from the title + the name of the thing (space permitting)
  • Examples:
    Upload {certificate}
    Upload {W-4 form}
    Upload

Examples

Without documents

File-Upload-Examples-No-Docs

 

With documents

File-Upload-Examples-Yes-Docs

 

File Types and State Handling

 

File-Upload-File-Types-and-States