Attachment Tray | Tuff Docs

Usage

Loading demo...

Set removable in a composer; leave it off on sent messages so they stay read-only.
Handle remove and cancel by dropping that id from your list; the component never mutates attachments.
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.

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.
`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 B/KB/MB 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.

kind: 'image' items go to the image grid and kind: 'file' items to file chips; pass both in one attachments array.
Clicking an image opens the built-in viewer (on TxModal), which pages through images only and emits nothing.
An uploading attachment always shows a cancel button: images draw a progress ring, file chips show a percentage.
A thumbnail that fails to load becomes a placeholder and is not retried.