File uploaders allow users to select one or more files to upload to a specific location.
A file uploader is commonly found in forms, but can also live as a standalone element. There are two variants of file uploaders — a default file uploader and a drag and drop file uploader.
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.
- Leading Icon: For showing the file type, or any supporting icon.
- File Details and Progress Bar: Shows the file name, size and an optional progress bar.
- Cancel Icon: Optionally add a cancel file upload icon to dismiss the process.
- 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.
Get instant access to over 6,000 Figma Components with Shipfaster UI. A Figma UI Kit & Design system used by over 2,000 designers.