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

Uploader

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.

Uploader - Drag and drop

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.

Variants

Uploader

Default

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

Uploader - Drag and drop

Default

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

Modifiers

Uploader

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.

Uploader - Drag and drop

Label

Optional label can be applied to the drag and drop.

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

Content

Uploader

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

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

Uploader

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.

Uploader - Drag and drop

Default

Users can either drag and drop file or click on “Browse” button that opens the OS browser for user to select a file.

Uploader in the drag and drop type in the default state, showing the browse button.

Uploading

Once a file is selected, an “Uploading” state of the Uploader appears underneath the Drag and Drop. If you click the “Cancel” Button, the uploading is cancelled and the Uploader element disappears.

Uploader in the drag and drop type in the uploading state, showing a progress indicator and cancel button.

Success

Once a file is selected, an “Uploading” state of the Uploader appears underneath the Drag and Drop. Once uploaded, if you click on “Remove” Button, the upload is removed and the Uploader element disappears.

Uploader in the drag and drop type 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.

Uploader in the drag and drop type in the error state, showing an error message and a retry button.

Interactive states

Outlines the atomic level interactive elements for the component.

Uploader

Default

Uploader component showing the default interactive state.

Hover

Uploader component showing the hover interactive state.

Focus

Uploader component showing the focus 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.

Uploader - Drag and drop

Default

Uploader component in the drag and drop type showing the default interactive state.

Hover

Uploader component in the drag and drop type showing the hover interactive state.

Focus

Uploader component in the drag and drop type showing the focus interactive state.

LTR examples

Here are some examples of Uploader in LTR context.

Uploader

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

Uploader - Drag and drop

Example of an uploader component in the drag and drop type used in a left-to-right web context.

RTL examples

Here are some examples of Uploader in RTL context.

Uploader

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

Uploader - Drag and drop

Example of an uploader component in the drag and drop type used in a right-to-left web context.
Back to top