File uploader

The file uploader allows users to upload their own content onto relevant fields. It can mostly appear on form or process pages, either alongside form input items or standalone in modals or cards.

Status

Status

Healthy

Figma component

Includes a link to a Figma component that has been imported to Supernova

Principles

Use when

  1. users need to upload data sets from their own systems when it’s necessary,
  2. users import their financial tracks like expenses, invoices,

Don't use when

  1. it need to upload multiple files at the same time. (Not supported yet)

Structure

file-uploader (above), file input uploader (below)

file-uploader (above), file input uploader (below)

  1. Draggable area
  2. Upload button
  3. Input label
  4. 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. Due to its nature, 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 and take 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 performed 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

The file preview after the file is uploaded is associated with the type of component used.

In areas where the file-uploader is used since specific file uploads will take place, 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.

However, 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 shown in modals.

file-uploder

file-input-uploader

 

file-uploader / state=enabled, filled=true

 

null

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 shown.