Components

File Uploader

The file uploader component allows users to select one or more files to upload to a specific location.

Overview

A file uploader allows users to upload and attach one or more files. It displays the upload progress and status for each file. 

Formatting

Anatomy

Accordion anatomy diagram
  1. Title
  2. Helper text
  3. Button: The Remix icon name is ri-upload-line
  4. File container
  5. File name
  6. Close icon: Deletes the uploaded file

Behavior

Loading states

A file that is being uploaded has three distinct states—loading, success, and uploaded.

Accordion anatomy diagram

Interactions

Mouse

To remove an uploaded file, click the “x” (or delete) icon.

Accordion anatomy diagram

Keyboard

Upload button:
  • The file uploader button or drop zone can be activated by pressing Space or Enter.
  • After the file selection dialog closes, focus should retain the user’s point of regard and return to the element that invoked it.
Uploaded file:
  • Pressing Tab shifts focus to the “x” icon.
  • Pressing Space or Enter while the “x” icon is in focus will delete the file.

Validation

When a file cannot be uploaded successfully, it will show an error state. You can choose a single-line or multi-line error state depending on how descriptive the message needs to be. Error messages should provide clear guidance to help the user resolve the error.

Accordion anatomy diagram