File Dropzone

New

Drop or browse for files. Each one gets a row with a live progress bar and a remove button.

motionlucide-reactutils@soultel/use-reduced-motion-safe

Drop files here or browsePNG, JPG or PDF, up to 10 MB each

Installation

$ pnpm dlx shadcn@latest add @soultel/file-dropzone

No namespace set up? npx shadcn@latest add https://asafefe.dev/r/file-dropzone.json works too.

Manual installation

1. Install the dependencies.
terminal1 lines
```
npm install motion lucide-react
```
2. Copy the source from the Code tab into components/file-dropzone.tsx.

Usage

example.tsx14 lines

import { FileDropzone } from "@/components/file-dropzone"

export function Attachments() {
  return (
    <FileDropzone
      accept="image/*,.pdf"
      maxSize={10 * 1024 * 1024}
      hint="PNG, JPG or PDF up to 10 MB"
      upload={async (file, onProgress, signal) => {
        await uploadWithProgress("/api/upload", file, { onProgress, signal })
      }}
    />
  )
}

Props

Prop	Type	Default	Description
upload	(file, onProgress, signal) => Promise<void>	-	Uploads one file. Report 0 to 100 and honor the abort signal.
accept	string	-	Like the input attribute, e.g. "image/*,.pdf".
maxSize	number	-	Largest file in bytes.
maxFiles	number	-	Most files in the list.
multiple	boolean	true	Allow more than one file.
onFilesChange	(files: DropzoneFile[]) => void	-	Called with the list whenever it changes.
label / hint	ReactNode	-	Main line and the small line under it.
ref	Ref<FileDropzoneHandle>	-	addFiles, openFileDialog and clear.