# react-dropzone/react-dropzone

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/react-dropzone-react-dropzone).**

10,985 stars · 800 forks · JavaScript · MIT

## Links

- GitHub: https://github.com/react-dropzone/react-dropzone
- Homepage: https://react-dropzone.js.org/
- awesome-repositories: https://awesome-repositories.com/repository/react-dropzone-react-dropzone.md

## Topics

`drag-and-drop` `file` `file-upload` `react`

## Description

react-dropzone is a React hook and HTML5 drag-and-drop wrapper used to create interactive areas that accept files via drag-and-drop or a native system file picker. It serves as a web file system interface, bridging browser interfaces with the operating system's file selection process.

The project distinguishes itself by managing complex event propagation to isolate drop zones and providing global drag-state detection for document-wide visual feedback. It supports both traditional hidden input triggers and the modern browser File System Access API for secure context integration, and it can detect when a user cancels a file selection dialog.

Broadly, the library covers client-side file validation through MIME type filtering, extension restrictions, and upload quantity limits. It provides utilities for processing file content, including the generation of image previews via object URLs and the ability to integrate with external image editors.

The project includes mechanisms for simulating drag-and-drop interactions within unit tests to verify callback behavior.

## Tags

### Software Engineering & Architecture

- [Hook-Based Logic Encapsulations](https://awesome-repositories.com/f/software-engineering-architecture/hook-based-logic-encapsulations.md) — Encapsulates drop zone state and event logic into a reusable React hook for efficient lifecycle management.
- [DOM Event Propagation Control](https://awesome-repositories.com/f/software-engineering-architecture/event-flow-control/dom-event-propagation-control.md) — Manages DOM event propagation to prevent unintended interactions in nested containers. ([source](https://react-dropzone.js.org/))

### User Interface & Experience

- [Drag and Drop Utilities](https://awesome-repositories.com/f/user-interface-experience/drag-and-drop-utilities.md) — Provides a comprehensive wrapper for managing HTML5 drag-and-drop events and file input state.
- [Client-Side File Validators](https://awesome-repositories.com/f/user-interface-experience/client-side-file-validators.md) — Restricts uploads by MIME type, file extension, and maximum quantity before server transmission.
- [Drag and Drop Libraries](https://awesome-repositories.com/f/user-interface-experience/drag-and-drop-libraries.md) — Provides a comprehensive library for implementing HTML5 drag-and-drop file upload zones.
- [Programmatic Triggers](https://awesome-repositories.com/f/user-interface-experience/file-inputs/programmatic-triggers.md) — Uses a hidden input bridge to programmatically trigger the native system file selection dialog.
- [File Uploaders](https://awesome-repositories.com/f/user-interface-experience/file-uploaders.md) — Offers specialized React components for facilitating file selection and transfer via drag-and-drop.
- [Upload Constraints](https://awesome-repositories.com/f/user-interface-experience/file-uploaders/asynchronous-uploaders/upload-constraints.md) — Caps the total number of files a user can upload during a single interaction. ([source](https://react-dropzone.js.org/))
- [Drop Zone UI Components](https://awesome-repositories.com/f/user-interface-experience/form-and-input-management/interaction-and-event-handling/interaction-logic-hooks/interaction-handlers/drag-and-drop-event-callbacks/system-file-drop-handlers/drop-zone-ui-components.md) — Provides UI components specifically designed to act as targets for files dragged from the local system. ([source](https://cdn.jsdelivr.net/gh/react-dropzone/react-dropzone@master/README.md))
- [Web File System Interfaces](https://awesome-repositories.com/f/user-interface-experience/web-file-system-interfaces.md) — Bridges web interfaces and the native operating system file selection process using browser APIs.
- [Event Propagation Halting](https://awesome-repositories.com/f/user-interface-experience/event-propagation-systems/event-propagation-halting.md) — Implements event propagation halting to prevent default browser behaviors and isolate drop zone interactions.
- [Drag State Monitors](https://awesome-repositories.com/f/user-interface-experience/form-and-input-management/interaction-and-event-handling/drag-operation-controls/drag-state-monitors.md) — Provides monitors to track global drag state across the document for coordinated visual feedback.
- [Nested Drop Zone Isolation](https://awesome-repositories.com/f/user-interface-experience/form-and-input-management/interaction-and-event-handling/interaction-logic-hooks/interaction-handlers/drag-and-drop-event-callbacks/nested-drop-zone-isolation.md) — Stops drag events from bubbling from child drop zones to parents to isolate interaction behavior. ([source](https://react-dropzone.js.org/))
- [Headless UI Property Bindings](https://awesome-repositories.com/f/user-interface-experience/headless-ui-property-bindings.md) — Returns root and input property objects that can be spread onto any container to define the upload area. ([source](https://cdn.jsdelivr.net/gh/react-dropzone/react-dropzone@master/README.md))

### Development Tools & Productivity

- [MIME Type and Extension Filters](https://awesome-repositories.com/f/development-tools-productivity/local-file-syncing/large-file-scanners/size-based-file-filtering/mime-type-and-extension-filters.md) — Filters accepted files based on MIME types and file extensions during the upload process.

### Security & Cryptography

- [File Type Validators](https://awesome-repositories.com/f/security-cryptography/file-upload-security/file-type-validators.md) — Restricts uploads to specific MIME types and file extensions to ensure format compliance. ([source](https://react-dropzone.js.org/))
- [Upload Request Validation](https://awesome-repositories.com/f/security-cryptography/file-upload-security/upload-request-validation.md) — Runs user-defined predicate filters to accept or reject files based on custom criteria. ([source](https://react-dropzone.js.org/))

### Web Development

- [Client-Side File Validations](https://awesome-repositories.com/f/web-development/client-side-file-validations.md) — Performs client-side validation of file types and quantities before they are uploaded.
- [Programmatic File Upload Control](https://awesome-repositories.com/f/web-development/file-upload-management/programmatic-file-upload-control.md) — Provides the list of accepted files via a callback for immediate programmatic processing. ([source](https://cdn.jsdelivr.net/gh/react-dropzone/react-dropzone@master/README.md))
- [File Upload Hooks](https://awesome-repositories.com/f/web-development/frontend-development-tools/frontend-frameworks/component-authoring/react-ecosystem/react-hooks/file-upload-hooks.md) — Implements a React hook for creating interactive areas that accept files via drag-and-drop or pickers.
- [Web-Native Integration Bridges](https://awesome-repositories.com/f/web-development/web-native-integration-bridges.md) — Bridges web interfaces with the native OS file selection process using browser APIs and hidden inputs.
- [Browser File System API Integrations](https://awesome-repositories.com/f/web-development/browser-file-system-api-integrations.md) — Utilizes the modern browser File System Access API as an alternative to traditional hidden input elements.
- [Client-Side File Reading](https://awesome-repositories.com/f/web-development/client-side-file-reading.md) — Reads the binary content of dropped files using the browser FileReader API for processing. ([source](https://cdn.jsdelivr.net/gh/react-dropzone/react-dropzone@master/README.md))

### Part of an Awesome List

- [Pre-Upload File Previews](https://awesome-repositories.com/f/awesome-lists/devtools/file-upload/pre-upload-file-previews.md) — Generates temporary object URLs to display thumbnails of files before they are submitted. ([source](https://react-dropzone.js.org/))

### Data & Databases

- [File System Access](https://awesome-repositories.com/f/data-databases/file-system-access.md) — Integrates with the native browser File System Access API to pick files in secure contexts. ([source](https://cdn.jsdelivr.net/gh/react-dropzone/react-dropzone@master/README.md))