Attachment tray
Drop files for the agent and watch each one upload.
A drop zone, then the files as plain rows. Each file wears its type's hue — its badge, its
progress ring and the wash that fills its row from the left as it uploads. Once a file is up the
agent reads it: the line shimmers, then says what it found, like 12 pages. Pass files with each
one's progress, reading and detail; onFiles hands back what the person dropped or picked.
Usage
<!-- include core.css + attachment-tray.css -->
<div class="atx">
<label class="atx-drop">
<input type="file" multiple class="atx-file" aria-label="Choose files" />
<svg class="atx-ants" aria-hidden="true"><rect /></svg>
<span class="atx-ic"><!-- upload icon --></span>
<b>Drop files here</b>
<span class="muted">or <span class="atx-sample">add sample files</span></span>
</label>
<div class="atx-list"><!-- file rows --></div>
<div class="atx-sum muted"></div>
</div>Properties
| Name | Type | Description |
|---|---|---|
files | Attachment[] | The files in the tray, each uploading then read in place. |
onFiles | (files: File[]) => void | Files the person dropped on the tray or picked with the file dialog. |
onRemove | (id) => void | Adds a remove button to each file. Called once the file has animated out. |
title | ReactNode | The drop zone's heading. Defaults to "Drop files here". |
action | { label; onClick } | A link after "or" in the drop zone, like "add sample files". |
accept | string | Passed to the file input, like image/*,.pdf. |
summary | string | The line under the list. Defaults to how many files the agent can read. |
dragging | boolean | Shows the drop zone as if a file were being dragged over it, for a scripted demo. |
file.progress | number | 0 to 100. The ring closes and the row fills with the file type's colour. |
file.reading | boolean | While the agent reads the file: a spinner, and "Reading" shimmering after the size. |
file.detail | string | What the agent found once it has read the file, like "12 pages". |
Theming
Works in light and dark (data-theme="dark") and in the Soft style (data-style="soft"). Each file
takes its hue from its type — PDF, image, CSV and the rest — drawn from the palette tokens, so the
badge, the ring and the row wash stay in step across the themes; in Soft the drop zone and badges are
rounder. The dashed drop-zone edge, the uploading rings and the reading shimmer all respect
prefers-reduced-motion.