File uploaders
File uploaders allow users to upload content of their own. A file uploader is commonly found in forms, but can also live as a standalone element.
When to use
Use a file uploader when:
- Uploading one or more files.
- Uploading files by dragging and dropping.
- Showing the process of uploading.
Types
| Variant | Observations |
|---|---|
File input uploader |
Upload one file by clicking the input to prompt a file selection dialog. |
Drag & drop file uploader |
Drag & drop selected files directly into the box area to upload. This variant allows you to upload multiple files. |
File input uploader
A file uploader traditionally uploads one file. Once you have selected one file from the dialog, the selected file will be shown inside the input text. Your file may temporarily display a loading state before uploading has been successfully completed. To remove an uploaded file, click the “x” (or delete) icon.
Drag & drop file uploader
Drag and drop file uploaders are used to directly upload files by dragging and dropping them into a drop zone area. Alternatively, you can also traditionally open files through a file selection dialog by clicking the text link description inside the drop zone.
When dragging files into the drop zone area, the drop zone border changes in status to indicate the area has been activated and is ready for files.
Design guidelines
Anatomy
- Dropzone area
- Description
- Uploaded file
- Delete icon
Dropzone area
The drop zone area lets users upload files by dragging and dropping the files, or activating the text button.
Description
Help to inform the user about file upload restrictions.
Uploaded file
The file that has successfully been uploaded.
Delete icon
The x icon that will remove the uploaded file.
Placement
For a better approach, left align the input or drop zone area.
When using the drag & drop file uploader, the uploaded files will be shown below the file uploader on the page.
Drag & drop with single file
Drag & drop with multiple files
Sizing
When the file input uploader is present in a form, use the same width and height for the form inputs for consistency.
For the drag & drop file uploader, when it is placed inside a small container use the same width. For larger containers use a reasonable width.
Be cautious with file uploader width in large containers.
Best practices
- A file being uploaded should show three different states—loading, success, and uploaded.
- To remove an uploaded file, show to the user the “x” icon.
- When a specific file cannot be uploaded successfully it will show an error state.
- Use the description to help communicate to the user what file size or format limitations there are.