File uploader

File uploader lets users upload files from a computer or device to a specific location.

Overview

Users can upload files of their own by dragging and dropping the files into an area on a page, or activating a button. A file uploader can be used in forms or as a standalone component.

Anatomy

null
  1. Title: Explains the purpose of the file uploader
  2. Description: Provides additional context about the types of files that can be uploaded.
  3. Container: Contains the drop zone where files can be uploaded. Explain by an icon and default text.
  4. Button: Triggers the action to add a file.
  5. Uploaded file: A file that has been successfully added.
  6. Delete: An affordance can be included to delete a file after it was added.

Demo

 

Open the component in Figma.

When to use

Use a file uploader for this scenario:

  • To upload one or more files.

Variants

Default

The default file uploader allows uploading by either drag-and-drop or a button. Users can drag and drop selected files directly into a drop zone area to add them. Or, they can add one or more files by clicking an action button that triggers a file selection dialog.

null

Button-only

The button-only file uploader allows users to add one or more files by clicking an action button that prompts a file selection dialog.

null

Icon

If space allows, an illustrative icon can be included.

null

Behaviors

States

Default

The default state lets users know the file uploader is active.

null

Preview

After files are added, they are visible, and can be previewed, in the component.

null

 

Hover

The hover state is initiated when a user pauses over an interactive element with a cursor.

null

Focus

The focus state displays the hover state with an additional highlight ring to visualize the interaction more easily when navigating with a keyboard.

null

Disabled

The disabled state prevents a user from initiating an action. The context of the page or component should make it clear why the element is disabled and what needs to change in order to be able to use it.

null

Error

The error state is displayed when an file fails or doesn’t meet the acceptable criteria.

null

Overflow

If an uploaded file’s name is too long to fully display, an ellipsis will display automatically to shorten the end of the file name and indicate that the filename extends beyond the width of the file element.

null

Interactions

File upload

When the user drags a file anywhere in the drop zone with their mouse, they can drop it inside of the area and it begins to be added to the uploader. If multiple files are dropped, they will stack vertically.

null

File removal

After a file has been added, it can be removed by clicking the delete button after each file name.

null

Accessibility

Odyssey components are designed and built to meet accessibility requirements out of the box. So, designers and engineers can focus on any accessibility concerns unique to their problem areas.

Our components meet WCAG 2.2 AA criteria and WAI-ARIA guidelines to provide a usable and accessible experience to everyone.

Content guidelines

Title

  • Describe the files being requested.
  • For example, Profile photo.
  • Use three to five words maximum.
  • Be concise and descriptive, not instructional.
  • Don’t include articles (a, the).
  • Don’t use punctuation.

Description

  • Explain to the user what file size or format limitations there are.
  • Make each limitation its own sentence. Use positive framing to clearly communicate limitations to the user.
  • Examples include:
  • File type: Upload an image in the form of a jpeg or png.
  • File size: Files can be up to [size limit].
  • Number of files: Up to [maximum number] files can be added.

Container default text

  • The container label should describe that you can either drag and drop a file into the drop zone or click on the button to add a file.
  • The default text is: Drag and drop file here or click Add file

Button default label

  • Button labels should be concise and describe the action that will be taken upon click.
  • The default label is Add file

Error messages

  • Help users understand why their file can’t be uploaded and what they should change to successfully add their file.
  • Use sentence case.
  • Use simple, clear language that can be easily understood.
  • When possible, work with your Eng partners to build validation appopriate for your use case. For example, file type and file size. Then, create validation errors as needed.

 

Default error messages

 

Validation

Files need to be less than {size} to be uploaded.

<Filename.png> needs to be less than {size} to be uploaded.

Files must be gif, jpg, png, or svg to be uploaded.

 

Time out error

<filename.jpg> didn’t upload completely. Please try again.

 

Network error

If the error relates to the file uploader as a whole instead of an individual file, you can use an inline error notification:

Something went wrong with the network. Check your internet connection and try again.

 

Generic error

If the error relates to the file uploader as a whole instead of an individual file, you can use an inline error notification:

Something went wrong. Please upload your file again.

Content accessibility

No additional content is needed for file uploader content accessibility.

Figma: File uploader