File Upload Design Component from Outline: Figma Wireframe Kit

Shipfaster: UI Components

Outline Wireframe: UI Components

File upload

Overview

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

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.

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.