All components (204)

Attachment

AI · Attachment · .amset-attachment

What it is and when to use it

A file attached to a message: its thumbnail or icon, the name, the size and, while uploading, a real progress bar.

When to use it

Above the box of a chat, for what is going to be sent with the message.
Inside an already sent message, for the files it carried.

When not to

For a list of a project's files with download and dates: that is a FileList.
For choosing files: that is a FileUpload.

Keyboard: removing it is a button and Tab reaches it.

Accessibility: the status -uploading, uploaded, failed- is said in text, not just with colour; the upload is a <progress> with its name and value, and a failure is announced as an alert. The remove button carries the file name in its label ("Remove report.pdf"). The thumbnail is decorative; with onPreview it is a button named after the file ("View report.png"). When an upload finishes, "Uploaded" is announced. The size is written in the language ("1.5 MB").

Fine-tuning: CSS variables --amset-attachment-max (maximum width) and --amset-attachment-thumb (side of the thumbnail).

What it looks like

report-q3.pdf1.5 MBUploaded 2 min ago

october-statement.csv18.4 kBUploading, 62%Uploading

delivery-note-1047.pdf1.5 MBCould not upload: the file is too large.

<Attachment name="report-q3.pdf" size={1500000} status="done" detail="Uploaded 2 min ago" />
<Attachment name="october-statement.csv" size={18400} status="uploading" progress={62} />
<Attachment
  name="delivery-note-1047.pdf"
  size={1500000}
  status="error"
  errorText="Could not upload: the file is too large."
  onRemove={quitar}
/>

Props

Import it with import { Attachment } from '@amset/ui'. Required props are marked.

Prop	Type	What it does
`name`required	`string`	—
`className`	`string`	Merged with the library classes; it does not replace them.
`compact`	`boolean`	Smaller, for a narrow bar: a 1.75 rem thumbnail and the text on a single line.
`detail`	`ReactNode`	One more line next to the size: "Ends in ••4f2a", "3 pages".
`errorText`	`string`	What happened, if it failed: "Larger than 10 MB". Defaults to "Upload failed".
`icon`	`ReactNode`	An icon of your own instead of the file one: a key for a variable, a link. Without `previewUrl`.
`onPreview`	`() => void`	With this the thumbnail is a button -"View report.png"- that opens the viewer, the zoom or whatever fits.
`onRemove`	`() => void`	With this the remove button appears.
`previewUrl`	`string`	A thumbnail, if it is an image. Without it the file icon shows.
`progress`	`number`	From 0 to 100, while uploading. Without this the bar has no count.
`size`	`number`	In bytes. It is written in the language: "1.5 MB".
`status`	`AttachmentStatus`	—

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

CSS variables

These CSS variables are how you adapt it. Declare them on the component's selector, not on :root: the stylesheet redeclares them in the rule itself, and a declaration on the same element always wins.

Variable	Default
`--amset-attachment-max`	`16rem`
`--amset-attachment-thumb`	`2.5rem`

How to change it

.amset-attachment {
  --amset-attachment-max: ...;
  --amset-attachment-thumb: ...;
}

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: