Skip to main content

Uploader

An uploader is an interactive element that allows users to select and upload files from their local devices to a platform.

Dos and Don'ts

Do
  • Use Assistive Text and Label Details for additional info like file size and file format .

Anatomy

Annotated diagram of an uploader component showing its main parts: label, string, assistive text, button/icon button, assistive text, and string.
  1. Form label: The Form Label provides necessary content / information to a field.
  2. String: Informational content like file name.
  3. Assistive Text (Optional): Assistive text to provide additional instructional information like file format.
  4. Button / Icon button: Opens OS file browser.
  5. Assistive Text: The Assistive Text provides additional instructional information like maximum file size.
  6. String: Text label informing the user about option/action like file size.

Variants

Default

An uploader component in its default state, showing a label and a browse button.

Modifiers

Label

Label is optional for "Uploading", "Success" and "Error" states.

Uploader component without the optional label modifier across uploading, success, and error states.

Preview

An optional preview is displayed once the file has been successfully uploaded. This may appear either within a preview container or as a thumbnail.

Each uploader is only allowed to have one preview.
Uploader component showing a file preview after a successful upload.

Preview error

If an image fails to upload, a thumbnail with a placeholder (fallback image) may be displayed in the error state.

Uploader component showing a placeholder thumbnail in the error state when an image fails to upload.

Actions

Uploader actions can be presented as buttons or icon buttons. The chosen style should remain consistent throughout the design.

Uploader component showing action buttons and icon buttons side by side.

Content

Label

Strings in uploader: All uploader text is predefined and not customisable.

Action label: Update action labels to suit the context if the default text does not meet your needs.

Overrides

Uploader component showing button size override options from medium to small.
  1. Button: The Button / Icon button sizes can be decreased from Size medium to Size small.

Behaviour

Single Upload

Default

The "Browse" Button opens the OS browser for user to select a file.

Single upload uploader in the default state, showing the browse button.

Uploading

Once a file is selected, the uploader changes to the "Uploading" state. If you click the "Cancel" Button, the uploading stops and the Uploader changes back to the "Default" state.

Single upload uploader in the uploading state, showing a progress indicator and cancel button.

Success

Once a file is successfully uploaded, if you click the "Remove" Button, the upload is removed and the Uploader changes back to the "Default" state.

Single upload uploader in the success state, showing the uploaded file name and a remove button.

Error

If a file can't be uploaded, the Uploader changes to the "Error" state. If you click the "Retry" Button, the uploading restarts and the uploader changes to the "Uploading" state.

Single upload uploader in the error state, showing an error message and a retry button.

Multi Upload

Uploading

Once a file is selected, an "Uploading" state of the Uploader appears underneath the uploader. If you click the "Cancel" Button, the uploading stops and the second Uploader disappears.

Multi upload uploader showing a second uploader in the uploading state beneath the first.

Success

Once a file is successfully uploaded, if you click the "Remove" Button, the upload is removed and the second uploader disappears.

Multi upload uploader showing the second uploader in the success state with a remove button.

Error

If the file can't be uploaded, the second uploader changes to the "Error" state. If you click the "Retry" Button, the uploading restarts and the second uploader changes to the "Uploading" state.

Multi upload uploader showing the second uploader in the error state with a retry button.

Interactive states

Outlines the atomic level interactive elements for the component.

Default

Uploader component showing the default interactive state.

Uploading

Uploader component showing the uploading interactive state.

Success

Uploader component showing the success interactive state.

Error

Uploader component showing the error interactive state.

LTR examples

Here are some examples of Uploader in LTR context.

Example of an uploader component used in a left-to-right apps context.

RTL examples

Here are some examples of Uploader in RTL context.

Example of an uploader component in a right-to-left layout, with controls mirrored accordingly.
Back to top