FileDropzone
Drag-and-drop file upload area with file list and size validation
Preview
Drop files here or click to browse
Any file type
Usage
import { FileDropzone, type FileWithTitle } from "@/components/ui/file-dropzone"
import { useState } from "react"
function UploadDemo() {
const [files, setFiles] = useState<FileWithTitle[]>([])
return (
<FileDropzone
files={files}
onFilesChange={setFiles}
accept=".pdf,.docx"
maxSize={10 * 1024 * 1024}
multiple
/>
)
}Each file in the list is a FileWithTitle object containing file, title (filename without extension), and optionally relativePath. Files exceeding maxSize are automatically filtered out. Set allowFolders to show a folder icon instead of the upload icon.
Install
npx shadcn add @bonsai/file-dropzone