Upload Dropzone

Demo

Installation

npx shadcn@latest add "https://better-upload.js.org/r/upload-dropzone.json"

Usage

The <UploadDropzone /> should be used with the useUploadFiles hook.

'use client';
 
import { useUploadFiles } from 'better-upload/client';
import { UploadDropzone } from '@/components/ui/upload-dropzone';
 
export function Uploader() {
  const { control } = useUploadFiles({
    route: 'demo',
  });
 
  return <UploadDropzone control={control} accept="image/*" />;
}

When clicked, the dropzone will open a file picker dialog. When selected or dropped, the files will be uploaded to the desired route.

Description

You can customize the description shown in the dropzone. You can pass a string, or an object with the following properties:

• maxFiles: The maximum number of files that can be uploaded.
• maxFileSize: The maximum size of the files that can be uploaded, use a formatted string (e.g. 10MB).
• fileTypes: The file types that can be uploaded.

<UploadDropzone
  control={control}
  accept="image/*"
  description={{
    maxFiles: 4,
    maxFileSize: '2MB',
    fileTypes: 'JPEG, PNG, GIF',
  }}
/>

Note that this is only cosmetic and does not enforce any restrictions client-side.

Props