react-dropzone/react-dropzone

Features

• Hook-Based Logic Encapsulations - Encapsulates drop zone state and event logic into a reusable React hook for efficient lifecycle management.
• Drag and Drop Utilities - Provides a comprehensive wrapper for managing HTML5 drag-and-drop events and file input state.
• MIME Type and Extension Filters - Filters accepted files based on MIME types and file extensions during the upload process.
• File Type Validators - Restricts uploads to specific MIME types and file extensions to ensure format compliance.
• Upload Request Validation - Runs user-defined predicate filters to accept or reject files based on custom criteria.
• Client-Side File Validators - Restricts uploads by MIME type, file extension, and maximum quantity before server transmission.
• Drag and Drop Libraries - Provides a comprehensive library for implementing HTML5 drag-and-drop file upload zones.
• Programmatic Triggers - Uses a hidden input bridge to programmatically trigger the native system file selection dialog.
• File Uploaders - Offers specialized React components for facilitating file selection and transfer via drag-and-drop.
• Upload Constraints - Caps the total number of files a user can upload during a single interaction.
• Drop Zone UI Components - Provides UI components specifically designed to act as targets for files dragged from the local system.
• Web File System Interfaces - Bridges web interfaces and the native operating system file selection process using browser APIs.
• Client-Side File Validations - Performs client-side validation of file types and quantities before they are uploaded.
• Programmatic File Upload Control - Provides the list of accepted files via a callback for immediate programmatic processing.
• File Upload Hooks - Implements a React hook for creating interactive areas that accept files via drag-and-drop or pickers.
• Web-Native Integration Bridges - Bridges web interfaces with the native OS file selection process using browser APIs and hidden inputs.
• Pre-Upload File Previews - Generates temporary object URLs to display thumbnails of files before they are submitted.
• File System Access - Integrates with the native browser File System Access API to pick files in secure contexts.
• DOM Event Propagation Control - Manages DOM event propagation to prevent unintended interactions in nested containers.
• Event Propagation Halting - Implements event propagation halting to prevent default browser behaviors and isolate drop zone interactions.
• Drag State Monitors - Provides monitors to track global drag state across the document for coordinated visual feedback.
• Nested Drop Zone Isolation - Stops drag events from bubbling from child drop zones to parents to isolate interaction behavior.
• Headless UI Property Bindings - Returns root and input property objects that can be spread onto any container to define the upload area.
• Browser File System API Integrations - Utilizes the modern browser File System Access API as an alternative to traditional hidden input elements.
• Client-Side File Reading - Reads the binary content of dropped files using the browser FileReader API for processing.

Star history