FileCard (Upload) component

[kati-ux]

Additional Documentation for FileCard

Description

The FileCard provides users with feedback on their uploaded files and allows them to remove files if needed. Additionally, a FileCard can indicate if an error occurred during the upload.

Design

A FileCard displays either a file or image icon or a preview of the uploaded image at the front. Next to it, the file name and file size are shown. If the name is too long for the available space, it is truncated with an ellipsis. This is not an issue, as the file name is only meant to serve as a hint about the file.

FileCards are typically displayed below a Dropzone and arranged in a two ColumnLayout. They belong to the "Uploads" category. If a FileCard is not used within a ColumnLayout, it adapts to fit the inner content.

FileCards can also optionally be made fully clickable, with hover and pressed states. This is useful, for instance, when a FileCard is displayed in a chat. In this case, users can click the FileCard to open a preview.

Token

--filecard-corner-radius: var(--size-corner-radius-default);
--filecard-border-width: var(--size-border-width-100);
--filecard-padding-x: var(--size-s);
--filecard-padding-y: var(--size-xs);
--filecard-spacing-fielderror-to-filecard: var(--size-xs);
--filecard-background-color-default: var(--color-neutral-color-100);
--filecard-background-color-hover: var(--neutral-outline-background-color-hover);
--filecard-background-color-pressed: var(--neutral-outline-background-color-pressed);
--filecard-background-color-invalid: var(--color-danger-color-100);
--filecard-border-color-default: var(--neutral-outline-border-color);
--filecard-border-color-invalid: var(--danger-outline-border-color);
--filecard-spacing: var(--size-s);