Attachment Tray | Tuff Docs

Usage

Loading demo...

Set removable in a composer and drop the id on remove and cancel; keep sent messages read-only.
Give an in-flight attachment both uploading: true and progress (0–1); without progress, no progress shows.
Handle open; otherwise clicking a file chip does nothing.
On non-English surfaces, override every text prop and sizeFormatter; previousText and nextText are visible text.
Resize thumbnails with --tx-attachment-tray-thumb-size rather than overriding the component's internal classes.

Name	Type	Default	Description
`attachments`	`AiAttachment[]`	—	Images and files in one list. Required.
`removable`	`boolean`	`false`	Shows remove buttons; cancel-upload buttons don't depend on it.
`previewTitle`	`string`	`'Preview'`	Viewer title when the image has no `name`.
`previousLabel`	`string`	`'Previous image'`	Accessible name of the previous button.
`nextLabel`	`string`	`'Next image'`	Accessible name of the next button.
`previousText`	`string`	`'Prev'`	Visible text of the previous button.
`nextText`	`string`	`'Next'`	Visible text of the next button.
`closeLabel`	`string`	`'Close'`	Accessible name of the preview's close button.
`removeLabel`	`string`	`'Remove attachment'`	Accessible name of remove buttons.
`cancelLabel`	`string`	`'Cancel upload'`	Accessible name of cancel-upload buttons.
`sizeFormatter`	`(bytes: number) => string`	—	Formats file sizes; defaults to whole bytes under 1 KB, then KB/MB/GB with one decimal.

Name	Payload	Description
`remove`	`(id: string)`	Fires when remove is clicked.
`cancel`	`(id: string)`	Fires when cancel-upload is clicked.
`open`	`(attachment: AiAttachmentFile)`	Fires when a file chip is clicked; images open the built-in viewer.

Name	Type	Default	Description
`attachment`	`AiAttachment & { kind: 'file' }`	—	The file attachment to show. Required.
`removable`	`boolean`	`false`	Shows the remove button; the cancel-upload button doesn't depend on it.
`removeLabel`	`string`	`'Remove attachment'`	Accessible name of the remove button.
`cancelLabel`	`string`	`'Cancel upload'`	Accessible name of the cancel-upload button.
`sizeFormatter`	`(bytes: number) => string`	—	Formats the file size; defaults to the same format as `TxAttachmentTray`.

Name	Payload	Description
`remove`	`(id: string)`	Fires when remove is clicked.
`cancel`	`(id: string)`	Fires when cancel-upload is clicked.
`open`	`(attachment: AiAttachment & { kind: 'file' })`	Fires when the chip body is clicked.

Variable	Default	Description
`--tx-attachment-tray-thumb-size`	`72px`	Side length of an image thumbnail.

The variable is not declared on the root, so setting it on the component or any ancestor takes effect.

kind: 'image' items go to the image grid and kind: 'file' items to file chips; pass both in one attachments array.
Each file renders as a TxAttachmentChip; the tray forwards removable, removeLabel, cancelLabel, and sizeFormatter to it.
An uploading attachment always has a cancel button: images draw a progress ring, file chips show a percentage and a thin progress bar.
An image's remove or cancel button sits inside the thumbnail's top-right corner; it appears on hover or keyboard focus and stays visible on touch screens.
Clicking an image opens the built-in viewer, which emits nothing; with focus in the viewer, ← / → page through images, and focus moves to the opposite button at either end.
Until an image arrives, the viewer holds its place, shaped by the attachment's width / height when given and otherwise like the last image that loaded, and shows a shimmering placeholder there once 150 ms have passed.
An image that fails to load shows a placeholder icon in both the thumbnail and the viewer; the same URL is not retried, and a new url loads again.

Thumbnails pin their own img margin and size, so an article's typography cannot shift them; the viewer is mounted on <body>, outside the article's styles.
The viewer is the same internal component as TxImageGallery's lightbox, shown here as a centered TxModal panel, and its styles live in the image-gallery sheet. The on-demand style plugin loads it; when importing styles by hand, add @talex-touch/tuffex/image-gallery/style.css and @talex-touch/tuffex/modal/style.css.
Source: packages/tuffex/packages/components/src/attachment-tray/.

packages/tuffex/packages/components/src/attachment-tray/index.ts