Upload Dropzone

Demo

Drag and drop files here

You can upload 4 files. Each up to 2MB. Accepted JPEG, PNG, GIF.

Installation

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

Usage

The <UploadDropzone /> should be used inside a client component.

'use client';
 
import { UploadDropzone } from '@/components/ui/upload-dropzone';

<UploadDropzone
  route="demo"
  accept="image/*"
  onBeforeUpload={({ files }) => {
    // rename all files
    return files.map(
      (file) => new File([file], 'renamed-' + file.name, { type: file.type })
    );
  }}
  onUploadBegin={({ files, metadata }) => {
    console.log('Upload begin');
  }}
  onUploadProgress={({ file, progress }) => {
    console.log(`Progress of ${file.name}: ${progress * 100}%`);
  }}
  onUploadComplete={({ files, metadata }) => {
    console.log(`Uploaded ${files.length} files`);
  }}
  onUploadError={(error) => {
    console.log(error.message);
  }}
  onUploadSettled={() => {
    console.log('Upload settled');
  }}
/>

If your upload route handler is not located at /api/upload, modify the api prop to match your path.

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
  route="demo"
  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

Prop	Type	Default
`api`	`string`	`/api/upload`
`route`	`string`	-
`sequential`	`boolean`	`false`
`accept`	`string \| undefined`	-
`metadata`	`Record<string, unknown> \| undefined`	-
`description`	`string \| object \| undefined`	-
`onBeforeUpload`	`function \| undefined`	-
`onUploadBegin`	`function \| undefined`	-
`onUploadProgress`	`function \| undefined`	-
`onUploadComplete`	`function \| undefined`	-
`onUploadError`	`function \| undefined`	-
`onUploadSettled`	`function \| undefined`	-

Demo

Installation

Usage

Description

Props

On this page