File Uploader

The File Uploader component allows users to drag and drop files into a dropzone area (or click to select files from the browser file picker) to upload files.

DetailsProperties

Usage

The File Uploader component is used when users need the ability to upload a file or multiple files.

Single file upload

Provides the ability to upload one file at a time. This should allow the user to see the name and size of the file they’ve uploaded, as well as remove and/or replace it.

You can upload 1 file. File can be up to 50 MB.

Browse or drag a file here

Multiple file upload

Provides the ability to upload multiple files at once. This should allow the user to see the names and sizes of all of the files they’ve uploaded, remove a file that they’ve uploaded, or add more files.

You can upload up to 5 files. Files can be up to 50MB. You can upload .jpg and .pdf file formats.

Browse or drag files here


Anatomy

The file uploader component is composed of: (1) Label, (2) Description, (3) Dropzone, (4) File Preview.

file-uploader-anatomy
  1. Label. Use to set context on what the user can do (ie. Upload Files)
  2. Description. Use to specify file limitations.
  3. Dropzone. Designated area for users to either “browse” or drop files
  4. File card. Use to provide feedback to users on status of file uploads, file size, file format, and the ability to remove an uploaded file.

Enabled

By default, the entire dropzone is active to drop files into. Click anywhere in the dropzone to trigger the “Browse” functionality.

file-uploader-enabled

Hover With File(s)

When a user hovers over the dropzone with files, it becomes active to indicate it’s ready to receive the files.

file-uploader-hover-with-files

Files Uploading - Multiple Files

When uploading multiple files, a file card is shown beneath the dropzone with a spinning icon to indicate upload in progress.

file-uploader-files-uploading-multiple-files

File Uploads Successful - Multiple Files

When a file is successfully uploaded, a thumbnail image or icon is shown alongside the file name and file size. Use the trash icon to remove the file.

file-uploader-file-uploads-successful-multiple-files

File Uploading - Single File

When uploading a single file, a file card is shown without the dropzone with a spinning icon to indicate upload in progress.

file-uploader-file-uploading-single-file

File Upload Successful - Single File

When a file is successfully uploaded, a thumbnail image or icon is shown alongside the file name and file size. Use the trash icon to remove the file. The dropzone is hidden in this use case until the file is removed.

file-uploader-file-upload-successful-single-file

Best Practices

Refer to these guidelines when using the File Uploader component.

Label

  • Ensure that you’re using “Upload” as the verb in the component label. For example, use “Upload Files” or “Upload Attachments” to communicate what the user can do, depending on context.

Description

  • File limitations should be communicated to the user up front. Provide users with this information to help avoid errors, like uploading an incompatible file type or one that’s too large.
  • Make each limitation its own sentence. Use positive framing to clearly communicate limitations to the user:
Status
Recommended Phrasing
File type
You can upload [x], [x] and [x] file formats.
File size
Files can be up to [file limit].
Number of files
You can upload up to [max #] files.

Dropzone

  • Always process immediately when something is dropped into the dropzone to reflect user expectation.
  • Don’t store files until the final action is performed. For example, if a user is uploading files to add to their support form request ticket, the files should only be uploaded once the ticket is submitted.
  • If the user uploads the maximum number of files, disable the dropzone.

Dropzone errors

  • If the user drops more files in the dropzone than is allowed, surface an alert above the files and disable the dropzone.
  • Recommended phrasing for once files are dropped: “You can upload up to [max #] files. Remove [#] files.”
file-uploader-dropzone-errors

File Card

  • Truncate the file name in the middle if it’s too long
  • We recommend building the file uploader component with the accompanying card file components so that users receive instant feedback on progress of the file upload. Include text that communicates when it’s uploading, when it’s successful, or when it fails (and why).
Status
Recommended Phrasing
File uploading
Uploading...
File upload successful
Display the file size
File upload failed
Upload failed

File Card Errors

The card displaying the file that didn’t upload should have an error message beneath it that clearly communicates why it wasn’t uploaded. These error types may include invalid file type or file over the file size limit. We recommend the following phrasing:

Scenario
Recommended Phrasing
Invalid file type
This file is not an accepted format. You can upload [x], [x] and [x] file formats.
Exceeds file size limit
This file is too big. You can upload files up to [file limit].
Network errors (internet connection dropped while uploading, request timeout, service is down)
Something went wrong with the network. Check your internet connection, then try again.
Too many uploads in a certain amount of time
We couldn’t upload so many files so quickly. Try uploading files more slowly, or try again later.
Generic (encountered an internal error)
Something went wrong. Try uploading your files again.

An example of file size limit and file type errors:

file-uploader-example-file-size-and-file-type-errors

Accessibility

File uploader should be accessible via keyboard support. Tabbing over the dropzone should activate the ‘Browse’ link, and users should be able to hit ‘Enter’ in order to open the file browser.