Upload

Overview

Upload allows users with an easy way to upload files such as Excel sheets or images. Global patterns.

Design Guidelines

Use when

• One or more files need to be uploaded.

Do not use when

• A direct link to the file is a viable alternative.

Implementation

• Where needed, specify what file type is acceptable to upload using inline message styling.

• Always define the maximum file size for upload.

• Always display the error message for corrupt or defected files using inline alert component error styling underneath the upload component.

Editorial

• Try to use the default label where possible.
• If it is determined that an Upload label needs to be changed it should have a short description of the requested upload (1-3 words max).
• Use import when users need to convert data into a different format before they can access it. See Import vs. Upload.
• Use upload when users need to copy data in the same format to access it. See Import vs. Upload..
• Always write the label in sentence case.
• Always use the verb + noun format unless the action is clear with a single verb.
• Avoid commas, punctuation, and articles ( the , an , a).

Examples

Upload button

Open in Storybook

Use when

• One or more files need to be uploaded one at a time.

Do not use when

• Multiple files need to be uploaded at the same time.

Behaviour

• File selection dialog pops up when upload button is clicked.
• List of files is displayed and allows user to delete unwanted or corrupt files.
• Preserves what has been uploaded already if user leaves page and returns.

Visual Style

• Keep label text short (1-3 words).
• Never wrap upload label text.

Upload drag and drop

Open in Storybook

Use when

• Multiple files need to be uploaded at the same time.

Do not use when

• One or more files need to be uploaded one at a time.

Behaviour

• User can drag files to a specific area, to upload. Alternatively, the user can also upload by selecting.
• User can upload multiple files at once.
• List of files is displayed and allows user to delete unwanted or corrupt files.
• Preserves what has been uploaded already if user leaves page and returns.

Related links

Creating Error and Warning Messages