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

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.

Upload File
You can upload 1 file. File can be up to 50 MB.
Browse or drag a file here

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.

Upload 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

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

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.

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

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

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

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.

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

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.

Refer to these guidelines when using the File Uploader component.

• 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.

• 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:

• 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.

• 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.”

• 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).

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:

An example of file size limit and file type errors:

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.