# Upload Button (https://v1.s3.dimah.dev/docs/react/ui/components/upload-button)

`UploadButton` connects directly to a `useUpload` hook and triggers the native OS file picker.

## Preview [#preview]

<DemoPreview name="upload-button-demo.tsx">
  <UploadButtonDemo />
</DemoPreview>

## Install [#install]

Complete [UI Setup](https://v1.s3.dimah.dev/docs/react/ui) first — stylesheet and toaster. Then
add this component:

<Tabs items={["npm package", "shadcn registry"]}>

<Tab value="npm package">

```tsx
import { UploadButton } from "@dimah-s3/ui";
```

</Tab>

<Tab value="shadcn registry">

```npm
npx shadcn@latest add @dimah-s3/upload-button
```

</Tab>

</Tabs>

---

## Usage [#usage]

```tsx
"use client";

import { useUpload } from "@dimah-s3/react";
import { UploadButton } from "@dimah-s3/ui";

export function FileUploader() {
  const upload = useUpload({
    route: "avatar",
  });

  return <UploadButton upload={upload} />;
}
```

---

## Props [#props]

```ts
import type { UploadButtonProps } from "@dimah-s3/ui";
```

<AutoTypeTable
  path="packages/ui/src/components/dimah-s3/upload/upload-button.tsx"
  name="UploadButtonProps"
/>

## Frequently asked questions [#frequently-asked-questions]

<Accordions>

<Accordion title="How do I dismiss the status row after an upload?">

Use the dismiss control on a completed or failed attachment, or call
`upload.reset()` yourself. Both clear the status row.

</Accordion>

<Accordion title="How do I disable the inline attachment status list?">

Pass `status={false}`:

```tsx
<UploadButton upload={upload} status={false} /> // [!code ++]
```

</Accordion>

<Accordion title="How do I enable toast notifications on completion?">

Pass `toast={true}` and mount `<Toaster />` near your app root:

```tsx
<UploadButton upload={upload} toast={true} /> // [!code ++]
```

</Accordion>

</Accordions>