File Dropzone

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


pnpm dlx shadcn@latest add https://r.joyco.studio/file-dropzone.json

Usage

import { FileDropzone } from '@/components/file-dropzone'
 
<FileDropzone
  accept="image/png,image/jpeg"
  maxSizeMB={5}
  onUpload={handleUpload}
/>

Installation

Usage

On this page