File dropzone
A native file picker with optional drag and drop, visible selection feedback and file count or size limits.
Attach reference material
Choose up to three PDF or image files, at most 2 MiB each.Up to 3 files, each 2 MiB.
0 files selected for this local preview.
Implementation
1"use client";2 3import {4 useEffect,5 useId,6 useRef,7 useState,8 type InputHTMLAttributes,9} from "react";10import { FolderOpen, X } from "lucide-react";11 12export type FileDropzoneProps = Omit<13 InputHTMLAttributes<HTMLInputElement>,14 "type" | "value" | "defaultValue" | "onChange" | "onError" | "children"15> & {16 label: string;17 description?: string;18 value?: File[];19 defaultValue?: File[];20 onChange?: (files: File[]) => void;21 onError?: (errors: string[]) => void;22 maxFiles?: number;23 maxBytes?: number;24};25 26type FileLimits = Pick<27 FileDropzoneProps,28 "accept" | "multiple" | "maxFiles" | "maxBytes"