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

`UploadDropzone` provides an accessible drag-and-drop file target bound to `useUpload`.

## Preview [#preview]

<DemoPreview name="upload-dropzone-demo.tsx">
  <UploadDropzoneDemo />
</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 { UploadDropzone } from "@dimah-s3/ui";
```

</Tab>

<Tab value="shadcn registry">

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

</Tab>

</Tabs>

---

## Usage [#usage]

```tsx
"use client";

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

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

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

---

## Props [#props]

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

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

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

<Accordions>

<Accordion title="How do I render upload status outside the dropzone?">

Set `status={false}` on `UploadDropzone`, then render `UploadStatus`
separately:

```tsx
import { UploadDropzone, UploadStatus } from "@dimah-s3/ui";

export function CustomDropzone() {
  const upload = useUpload({ route: "gallery", maxFiles: 5 });

  return (
    <div className="space-y-4">
      {/* [!code ++] */}
      <UploadDropzone upload={upload} status={false} />
      {/* [!code ++] */}
      <UploadStatus upload={upload} />
    </div>
  );
}
```

</Accordion>

<Accordion title="How do I customize the dropzone placeholder?">

Pass React children to `UploadDropzone`:

```tsx
<UploadDropzone upload={upload}>
  <div className="text-muted-foreground flex flex-col items-center justify-center p-6">
    {" "}
    {/* [!code ++] */}
    <p className="text-sm font-medium">Drop files here</p> {/* [!code ++] */}
    <p className="text-xs">Images, PDF, or video</p> {/* [!code ++] */}
  </div>{" "}
  {/* [!code ++] */}
</UploadDropzone>
```

</Accordion>

</Accordions>