"use client"; import { FileText, UploadCloud, X } from "lucide-react"; import { useEffect, useId, useRef, useState } from "react"; import type { DragEvent, HTMLAttributes, ReactNode } from "react"; export type DropzoneFile = { id: string; name: string; size: number; type: string; /** The native File, when the entry came from the picker or a drop. */ file?: File; /** Upload progress from 0 to 100. Leave undefined when not uploading. */ progress?: number; /** Per-file error, for example a failed upload. */ error?: string; }; export type DropzoneRejection = { name: string; reason: string }; export type FileDropzoneProps = Omit, "onChange" | "defaultValue"> & { label: string; description?: string; files?: DropzoneFile[]; defaultFiles?: DropzoneFile[]; onFilesChange?: (files: DropzoneFile[]) => void; /** Called with newly accepted files so you can start uploads. */ onFilesAdded?: (files: DropzoneFile[]) => void; onReject?: (rejections: DropzoneRejection[]) => void; /** Same syntax as the native accept attribute, such as ".pdf,image/*". */ accept?: string; /** Maximum size per file in bytes. */ maxSize?: number; maxFiles?: number; multiple?: boolean; /** Name of the native file input for form submission. */ name?: string; error?: string; disabled?: boolean; locale?: string; /** Replace the default progress and error line for a file. */ renderFileStatus?: (file: DropzoneFile) => ReactNode; reducedMotion?: boolean; }; function cx(...values: Array) { return values.filter(Boolean).join(" "); } export function formatBytes(bytes: number, locale?: string) { const unit = bytes >= 1_000_000 ? "megabyte" : bytes >= 1000 ? "kilobyte" : "byte"; const amount = unit === "megabyte" ? bytes / 1_000_000 : unit === "kilobyte" ? bytes / 1000 : bytes; return new Intl.NumberFormat(locale, { style: "unit", unit, unitDisplay: "short", maximumFractionDigits: unit === "byte" ? 0 : 1 }).format(amount); } function matchesAccept(file: { name: string; type: string }, accept?: string) { if (!accept) return true; const fileName = file.name.toLowerCase(); const mime = (file.type || "").toLowerCase(); return accept .split(",") .map((token) => token.trim().toLowerCase()) .filter(Boolean) .some((token) => { if (token.startsWith(".")) return fileName.endsWith(token); if (token.endsWith("/*")) return mime.startsWith(token.slice(0, -1)); return mime === token; }); } export function FileDropzone({ label, description, files, defaultFiles = [], onFilesChange, onFilesAdded, onReject, accept, maxSize, maxFiles, multiple = true, name, error, disabled, locale, renderFileStatus, reducedMotion = false, className, ...props }: FileDropzoneProps) { const id = useId(); const labelId = id + "-label"; const descriptionId = id + "-description"; const errorId = id + "-error"; const [inner, setInner] = useState(defaultFiles); const list = files !== undefined ? files : inner; const [dragging, setDragging] = useState(false); const [rejections, setRejections] = useState([]); const inputRef = useRef(null); const dragDepth = useRef(0); const counter = useRef(0); const commit = (next: DropzoneFile[]) => { if (files === undefined) setInner(next); onFilesChange?.(next); }; // Mirror accepted files into the native input so a regular form post includes dropped files. useEffect(() => { const input = inputRef.current; if (!input || typeof DataTransfer === "undefined") return; try { const transfer = new DataTransfer(); list.forEach((entry) => { if (entry.file) transfer.items.add(entry.file); }); input.files = transfer.files; } catch { // Older browsers cannot assign FileList; the onFilesChange callback still has every file. } }, [list]); const addFiles = (incoming: File[]) => { if (disabled || !incoming.length) return; const accepted: DropzoneFile[] = []; const rejected: DropzoneRejection[] = []; const limit = multiple ? maxFiles ?? Infinity : 1; const base = multiple ? list : []; for (const file of incoming) { if (!matchesAccept(file, accept)) { rejected.push({ name: file.name, reason: file.name + " isn’t an accepted file type." }); } else if (maxSize !== undefined && file.size > maxSize) { rejected.push({ name: file.name, reason: file.name + " is larger than " + formatBytes(maxSize, locale) + "." }); } else if (base.length + accepted.length >= limit) { rejected.push({ name: file.name, reason: file.name + " wasn’t added. The limit is " + limit + (limit === 1 ? " file." : " files.") }); } else { counter.current += 1; accepted.push({ id: id + "-" + counter.current, name: file.name, size: file.size, type: file.type, file }); } } setRejections(rejected); if (rejected.length) onReject?.(rejected); if (accepted.length) { commit(base.concat(accepted)); onFilesAdded?.(accepted); } }; const onDragEnter = (event: DragEvent) => { event.preventDefault(); if (disabled) return; dragDepth.current += 1; setDragging(true); }; const onDragLeave = (event: DragEvent) => { event.preventDefault(); dragDepth.current = Math.max(0, dragDepth.current - 1); if (dragDepth.current === 0) setDragging(false); }; const onDrop = (event: DragEvent) => { event.preventDefault(); dragDepth.current = 0; setDragging(false); addFiles(Array.from(event.dataTransfer?.files ?? [])); }; const describedBy = cx(description && descriptionId, (error || rejections.length > 0) && errorId) || undefined; return (

{label} {description ? (

{description}

) : null}

event.preventDefault()} onDragLeave={onDragLeave} onDrop={onDrop} className={cx( "grid justify-items-center gap-3 rounded-lg border border-dashed px-5 py-8 text-center", !reducedMotion && "transition-colors duration-150 motion-reduce:transition-none", dragging ? "border-[#1E6B64] bg-[#DDEBE8] dark:border-[#7FC4BA] dark:bg-[#1F3533]" : "border-[#858B83] bg-[#FBFBF8] dark:border-[#6E7976] dark:bg-[#1F2524]", disabled && "opacity-60", )} >

{dragging ? "Release to add files" : "Drag files here, or"}

{ addFiles(Array.from(event.target.files ?? [])); }} />

{error ?

{error}

: null} {rejections.map((rejection, index) => (

{rejection.reason}

))}

{list.length ? (

{entry.error}

{entry.progress >= 100 ? "Done" : Math.round(entry.progress) + "%"}

{entry.name} {formatBytes(entry.size, locale)}
{status}

) : null}

); }