@eduvidu/react-drag-and-drop

A lightweight, fully unrestricted React drag-and-drop file upload component.
Supports any file format, folder upload, nested folder traversal, file list with remove, and complete prop-driven customisation — no hardcoded limits.

Installation

npm install @eduvidu/react-drag-and-drop

Usage

import { DragDrop } from "@eduvidu/react-drag-and-drop";
import "@eduvidu/react-drag-and-drop/dist/DragDrop.css";

// Fully open — accepts everything, no limits
<DragDrop onFileSelect={(files) => console.log(files)} />

// With optional restrictions via props
<DragDrop
  acceptedFormats={["pdf", "png", "docx"]}
  maxFileSizeMB={10}
  maxFiles={5}
  allowFolders
  onFileSelect={(files) => console.log(files)}
  onValidationError={(errors) => console.error(errors)}
/>

Props

| Prop | Type | Default | Description | |---|---|---|---| | onFileSelect | (files: File[]) => void | — | Fires with the full cumulative list of valid files | | onValidationError | (errors: string[]) => void | — | Fires with all validation error messages | | acceptedFormats | string[] | [] | Allowed extensions e.g. ["pdf","png"]. Empty = all formats accepted | | maxFileSizeMB | number | 0 | Max size per file in MB. 0 = no limit | | maxFiles | number | 0 | Max total files. 0 = no limit | | allowFolders | boolean | false | Enables folder selection via browse button; drag-drop always supports nested folders | | showFileList | boolean | true | Show the selected file list below the drop zone | | allowRemove | boolean | true | Show a remove (✕) button on each file | | dragText | string | "Drag & Drop files or folders here, or click to browse" | Idle placeholder text | | dragActiveText | string | "Release to add files" | Text shown while dragging over the zone | | width | CSSProperties["width"] | "100%" | Drop zone width | | height | CSSProperties["height"] | "auto" | Drop zone height | | ...rest | HTMLAttributes<HTMLDivElement> | — | Any valid <div> prop (className, style, data-*, …) |

Folder & Nested Folder Support

• Drag & drop a folder → all files inside (including sub-folders at any depth) are collected automatically using the FileSystem API.
• Click to browse → set allowFolders to also open a directory picker.

License

MIT © Eduvidu