Upload
#
OverviewUpload 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#
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#
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.