File Dropzone
A drag-and-drop file upload component with image preview, validation, and error handling.
Drop your files here
application/pdf, image/* (max. 10MB) · Up to 20 files
'use client'
import { FileDropzone } from '@/components/file-dropzone'
function FileForm() {
const handleUpload = (file: File) => {
console.log('File uploaded:', file.name, file.type)
}
return (
<div className="flex flex-col gap-4 p-10">
<FileDropzone
accept="application/pdf,image/*"
maxSizeMB={10}
maxFiles={20}
multiple={true}
onUpload={handleUpload}
/>
</div>
)
}
export default FileForm
Installation
Usage
import { FileDropzone } from '@/components/file-dropzone'
<FileDropzone
accept="image/png,image/jpeg"
maxSizeMB={5}
onUpload={handleUpload}
/>