Design
Web component
Is documented
Status
Healthy
Figma component
Principles
Use when
- users need to upload data sets from their own systems when it’s necessary,
- users import their financial tracks like expenses, invoices, etc.
Don't use when
- it need to upload multiple files at the same time. (Not supported yet)
Structure
- Draggable area
- Upload button
- Input label
- Helper text (optional)
Properties
Types
file-uploader
It should be used when the user needs to import bulk data or when the user needs to upload a file within a process, and additionally, when these processes need to be displayed in modals or larger screens.
file-input-uploader
It is used to add data related to a record that is already registered in the system or to support the record by uploading a file.
For example, uploading an image for a product in inventory or attaching a receipt image to a basic purchase bill. It is recommended to be primarily used on form (or edit) pages.
States
|
Enabled |
By default, this state indicates that the input is ready for uploading. Depending on the type, the file can be dragged and dropped or uploaded through a button. |
|---|---|
|
Hover |
When file upload is done through the button, the button changes its background on the hover state. |
|
Drag |
This state indicates that the user will drag the file they want to upload. It is considered a type of hover, but is only valid for dragging. |
|
Focus |
The focus state is only valid when the user wants to upload a file through a button. The default button's focus state style will be enabled. |
|
Busy |
During file upload, the inputs are in a busy state and act as if they are disabled. |
|
Disabled |
In certain cases where file upload is not allowed, meanwhile, both file dragging and button-based file upload will be disabled for the inputs. |
|
Destructive |
Indicating the error message when the file cannot be uploaded. |
Properties
|
Filled |
The filled state is for when neither a file is uploaded nor not uploaded. |
|---|
Positioning
The file upload process can vary depending on the current step or action the user is taking. For example, when uploading large files or entering existing data into the application, these uploads should be handled with specific flows on large pages. In this kind of flow, the file-uploader can appear on a modal or window fit the width of its container.
The file-input-uploader, on the other hand, should be used when there is a need to upload files related to a record or to identify the record. It should always be grouped with other form-input components on form pages.
Behavior
Interaction
The file upload process can be either through the button located on the input or by dragging the file from an internal source. The files can be .pdf, .xlsx, .jpeg, .png and .gif.
During the dragging action, the cursor takes the .grabbing syntax, and the file uploader will transition to the drag (active) state only within its own container.
Users only can upload a single file at the same time for a single action or a record.
After the file is uploaded, the user can remove the file using the remove button in the file-uploader component and trash icon in the file-input-uploader.
File preview after the upload
Do
where the file-uploader is used since specific file uploads, the preview of these file types is done through the interface, meaning it is done in the next step of the file upload. Therefore, there is no thumbnail preview available.
Do
in the file-input-uploader type, files that are .jpeg, .png, or .gif can be previewed using the magnifier icon. The file preview must be previewed in modals.
Content
Preview of file name, and its size (optional)
The file name is located within the input, along with the button group it is next to. If the file name is long, it will be truncated. The actual file name can be previewed by using the browser's tooltip.
The file size showing depends on the context. If there is a limit for the upload, the file size should be displayed, and an error message related to it should be displayed.