# Upload button (goodtabs UI)

Opens the file picker from a button and shows the chosen file name and size.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/upload-button.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/upload-button`

## Usage

```tsx
import { UploadButton } from "@/components/ui/upload-button"

<UploadButton accept="image/*" label="Choose image" onFiles={(files) => setAvatar(files[0])} />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| accept | `string` |  | Accepted types, as the input's accept attribute, for example "image/*". |
| multiple | `boolean` | `false` | Allow more than one file. |
| onFiles | `(files: File[]) => void` |  | Called with the chosen files, and with an empty array on clear. |
| label | `string` | `"Choose file"` | Button label. |
| clearLabel | `string` | `"Clear file"` | Accessible name of the clear button. |
| variant | `Button variant` | `"outline"` | Any shadcn button variant. |
| size | `Button size` | `"default"` | Any shadcn button size. |

## When to use

- Settings rows and forms where one file is attached from a button
- When a drop zone would be too much and a plain file input too raw
- Picking several files at once with multiple, then listing them yourself

## When not to use

- Drag and drop uploads with previews and progress: build a drop zone
- Inside a form that submits the input natively; this one keeps files in state for you to send
- Camera capture on mobile, which needs the capture attribute on a visible input

## Notes for agents

- It takes an onFiles function, so the component that renders it must be a client component ("use client")
- The file input is visually hidden and out of the tab order; the button opens it and holds focus, the chosen name is announced through aria-live
- Picking again replaces the files, it does not add; clear calls onFiles with an empty array
- It extends shadcn's Button, so variant, size and disabled apply to the trigger; formatFileSize is exported for your own lists

Docs: https://ui.goodtabs.co/components/upload-button