Role: Design System Team Designer
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.
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.
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.
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.