# Attachment

A file on its way up or already there, with a drop zone and an upload queue.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/attachment
```

## Usage

```tsx
import { FileUpload } from '@/components/fetaui/attachment'

export function Example() {
  return <FileUpload items={items} onFiles={upload} />
}
```

## API

| Prop | Type | Default |
|---|---|---|
| name | string | required |
| meta | string |  |
| type | file, image, pdf, archive, sheet, code, video, audio | file |
| status | ready, uploading, processing, error, uploaded | ready |
| progress | 0 to 100 | 0 |
| size | default, small, xsmall | default |
| onRemove, onRetry, onMore | () => void |  |
| FileUpload items | UploadItem[] |  |
| FileUpload onFiles | (files) => void |  |
| animated | boolean | true |
| orientation | horizontal, vertical | horizontal |

## When to use

- For files in a composer, a form or an upload queue.

## When not to use

- For a single image picker with a preview: build it from Input.
- As your only file check: `accept` and `multiple` only filter in the browser, and types and names can be faked. The server must still validate every file.

## Accessibility

- Actions name the file they act on.
- Status is live, and the bar is a progressbar.
- Browse is the keyboard path to the drop zone.

## Motion

- Rows grow in on a spring and fold away when removed.
- The tick badge pops on Uploaded, and Error shakes once.
- Processing sweeps a bar on a 1200 ms loop.
- With reduced motion, rows appear and the bar holds still.