# Upload Dropzone (https://dimah-s3.vercel.app/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://dimah-s3.vercel.app/docs/react/ui) first — stylesheet and toaster. Then
add this component:

<Tabs items="[&#x22;npm package&#x22;, &#x22;shadcn registry&#x22;]">
  <Tab value="npm package">
    ```tsx
    import { UploadDropzone } from "@dimah-s3/ui";
    ```
  </Tab>

  <Tab value="shadcn registry">
    <CodeBlockTabs defaultValue="npm">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="npm">
          npm
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="pnpm">
          pnpm
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="yarn">
          yarn
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="bun">
          bun
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="npm">
        ```bash
        npx shadcn@latest add @dimah-s3/upload-dropzone
        ```
      </CodeBlockTab>

      <CodeBlockTab value="pnpm">
        ```bash
        pnpm dlx shadcn@latest add @dimah-s3/upload-dropzone
        ```
      </CodeBlockTab>

      <CodeBlockTab value="yarn">
        ```bash
        yarn dlx shadcn@latest add @dimah-s3/upload-dropzone
        ```
      </CodeBlockTab>

      <CodeBlockTab value="bun">
        ```bash
        bun x shadcn@latest add @dimah-s3/upload-dropzone
        ```
      </CodeBlockTab>
    </CodeBlockTabs>
  </Tab>
</Tabs>

***

## Usage [#usage]

```tsx
"use client";

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

export function AvatarDropzone() {
  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 separate the dropzone area from the uploaded files status list?">
    Pass `status={false}` to `UploadDropzone` and 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">
          <UploadDropzone upload={upload} status={false} />
          <UploadStatus upload={upload} />
        </div>
      );
    }
    ```
  </Accordion>

  <Accordion title="How do I provide custom interior placeholder content?">
    Pass React children to `UploadDropzone`:

    ```tsx
    <UploadDropzone upload={upload}>
      <div className="flex flex-col items-center justify-center p-6 text-muted-foreground">
        <p className="text-sm font-medium">Drag avatar image here</p>
        <p className="text-xs">PNG, JPG or WebP up to 2MB</p>
      </div>
    </UploadDropzone>
    ```
  </Accordion>
</Accordions>