File upload

When to use

• Uploading one or more files.
• Uploading files by dragging and dropping.
• Showing the process of uploading.
• Do not use upload in a modal when multiple files are uploaded, as uploaded files stack vertically.

Anatomy

1. Leading Icon: For showing the file type, or any supporting icon.
2. File Details and Progress Bar: Shows the file name, size and an optional progress bar.
3. Cancel Icon: Optionally add a cancel file upload icon to dismiss the process.

Best Practices

• Labels inform users what needs to be uploaded. Keep the label short and concise by limiting it to a single line of text.
• Descriptions help communicate to the user what file size or format limitations there are.
• Drop zone area text should describe that you can either drag and drop a file into the drop zone or click on the text to upload a file.
• Include the name, type and size of the file uploaded along with a progress bar when the file is being uploaded.
• Use an ellipsis (…) if the filename extends beyond the width of its parent element.