# Dropzone (File Upload)

Displays a control for easier uploading of files directly to Supabase Storage

A file upload dropzone that accepts dragged or selected files, previews images, shows validation errors, and uploads to Supabase Storage.

## Files

- `components/`
  - `dropzone.tsx`
- `hooks/`
  - `use-supabase-upload.ts`
- `lib/`
  - `supabase/`
    - `client.ts`
    - `middleware.ts`
    - `server.ts`

External registry dependencies: button.

Full source: /library/r/dropzone-nextjs.json

## Installation

Install this block:

```bash
npx shadcn@latest add @supabase/dropzone-nextjs
```

## Introduction

Uploading files should be easy—this component handles the tricky parts for you.

The File Upload component makes it easy to add file uploads to your app, with built-in support for drag-and-drop, file type restrictions, image previews, and configurable limits on file size and number of files. All the essentials, ready to go.

**Features**

- Drag-and-drop support
- Multiple file uploads
- File size and count limits
- Image previews for supported file types
- MIME type restrictions
- Invalid file handling
- Success and error states with clear feedback

## Usage

- Simply add this `<Dropzone />` component to your page and it will handle the rest.
- For control over file upload, you can pass in a `props` object to the component.

```tsx
'use client'

import { Dropzone, DropzoneContent, DropzoneEmptyState } from '@/components/dropzone'
import { useSupabaseUpload } from '@/hooks/use-supabase-upload'

const FileUploadDemo = () => {
  const props = useSupabaseUpload({
    bucketName: 'test',
    path: 'test',
    allowedMimeTypes: ['image/*'],
    maxFiles: 2,
    maxFileSize: 1000 * 1000 * 10, // 10MB,
  })

  return (
    <div className="w-[500px]">
      <Dropzone {...props}>
        <DropzoneEmptyState />
        <DropzoneContent />
      </Dropzone>
    </div>
  )
}

export { FileUploadDemo }
```

## Props

| Prop               | Type       | Default | Description                                          |
| ------------------ | ---------- | ------- | ---------------------------------------------------- |
| `bucketName`       | `string`   | `null`  | The name of the Supabase Storage bucket to upload to |
| `path`             | `string`   | `null`  | The path or subfolder to upload the file to          |
| `allowedMimeTypes` | `string[]` | `[]`    | The MIME types to allow for upload                   |
| `maxFiles`         | `number`   | `1`     | Maximum number of files to upload                    |
| `maxFileSize`      | `number`   | `1000`  | Maximum file size in bytes                           |

## Further reading

- [Creating buckets](/docs/guides/storage/buckets/creating-buckets)
- [Access control](/docs/guides/storage/security/access-control)
- [Standard uploads](/docs/guides/storage/uploads/standard-uploads)