File upload

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.


Anatomy of file upload
  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.

Recommended resources

Get instant access to over 6,000 Figma Components with Shipfaster UI. A Figma UI Kit & Design system used by over 2,000 designers.

Shipfaster UI - Figma Design System
Star IconStar IconStar IconStar IconStar Icon
180+ ratings
Figma's most powerful and comprehensive UI kit and design system. Get instant access to over 6,000 components.