Shipfaster: UI Components

File upload

File uploaders allow users to select one or more files to upload to a specific location.


Breadcrumbs are used when you have a large amount of content organised in hierarchical structure with defined categories (multiple sections that can be divided into more sub-sections). An excellent example is e-commerce site, in which a large variety of products is grouped into logical categories. They inform visitors of their current location in relation to the entire site hierarchy. Whereas they also improve the find-ability of site pages. The structure of the site is more easily understood because it is laid out in a breadcrumb.

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.

All Products

Shipfaster UI: Figma UI Kit & Design System

Access 8,000+ Customizable components to supercharge your design workflow.

Pricing Icon
3,200+ of Downloads
Review Stars
3,200+ downloads
Learn More
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.