"use client" import * as React from "react" import { UploadCloud } from "lucide-react" import { Button } from "@/components/ui/button" import { cn } from "@/lib/utils" type FileUploadProps = { title?: string description?: string accept?: string className?: string } export default function FileUpload({ title = "Drag & drop upload", description = "Drop your files here or click to upload. Max 25MB.", accept = ".png,.jpg,.pdf", className, }: FileUploadProps) { const [files, setFiles] = React.useState([]) const [isDragging, setIsDragging] = React.useState(false) const inputId = React.useId() const handleFiles = (list: FileList | null) => { if (!list) return setFiles(Array.from(list)) } const handleDrop = (event: React.DragEvent) => { event.preventDefault() setIsDragging(false) handleFiles(event.dataTransfer.files) } return (

{title}

{description}

{ event.preventDefault() setIsDragging(true) }} onDragLeave={() => setIsDragging(false)} onDrop={handleDrop} className={cn( "group flex cursor-pointer flex-col items-center justify-center gap-4 rounded-base border-2 border-dashed border-border bg-background p-10 text-center shadow-shadow transition-colors hover:bg-muted/40", isDragging && "bg-muted/60", )} >

Drop files here

or click to browse ({accept})

handleFiles(event.target.files)} /> {files.length > 0 && (

Files

{file.name} {Math.ceil(file.size / 1024)}kb

)}

) }

File Upload

Installation

Usage