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
The file uploader component is composed of: (1) Label, (2) Description, (3) Dropzone, (4) File Preview.
Label. Use to set context on what the user can do (ie. Upload Files)
Description. Use to specify file limitations.
Dropzone. Designated area for users to either “browse” or drop files
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.
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.
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 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 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 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.
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:
You can upload [x], [x] and [x] file formats.
Files can be up to [file limit].
Number of files
You can upload up to [max #] files.
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).
File upload successful
Display the file size
File 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:
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 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.