File Upload Component Design

The file upload component allows the user to select file(s) from a user’s file system. Either natively using a file input or drag and drop.

Anatomy

The file upload component has many different elements. It displays upload progress, the ability to cancel current upload, as well as a delete function. If the upload fails the user can attempt the upload again with the retry button.

UI Adaptation

The file upload component can be placed within the UI of any document viewing software.

Viewing Multiple Uploading Files

When uploading multiple files the user can click on the view button to open a modal. Within the modal the user can see upload progress of individual files as well as cancel any upload.

Spacing

Although the component is built to specific dimensions within the Figma library, it's important that the designer using it is aware of the spacing applied. If they need to detach the component for custom modifications they should follow the same grid system.

File Upload Component Design

The file upload component allows the user to select file(s) from a user’s file system. Either natively using a file input or drag and drop.

Role
Design System Designer
For
Hyland
Date
2021