awesome-repositories.com
Blog
awesome-repositories.com

Découvrez les meilleurs dépôts open-source grâce à notre recherche par IA.

ExplorerRecherches sélectionnéesAlternatives open sourceLogiciels auto-hébergésBlogPlan du site
ProjetÀ proposNotre méthodologiePresseServeur MCP
Mentions légalesConfidentialitéConditions d'utilisation
© 2026 Bringes Technology SRL·VAT RO45896025·hello@awesome-repositories.com
·
react-dropzone avatar

react-dropzone/react-dropzone

0
View on GitHub↗

React Dropzone

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.

Recherche par IA

Explorez plus de dépôts awesome

Décrivez vos besoins en langage naturel — l'IA classe des milliers de projets open source sélectionnés par pertinence.

Start searching with AI
react-dropzone.js.org
↗

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.
10,985 stars·800 forks·JavaScript·MIT·3 vues

Historique des stars

Graphique de l'historique des stars pour react-dropzone/react-dropzoneGraphique de l'historique des stars pour react-dropzone/react-dropzone

Questions fréquentes

Que fait react-dropzone/react-dropzone ?

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.

Quelles sont les fonctionnalités principales de react-dropzone/react-dropzone ?

Les fonctionnalités principales de react-dropzone/react-dropzone sont : Hook-Based Logic Encapsulations, Drag and Drop Utilities, MIME Type and Extension Filters, File Type Validators, Upload Request Validation, Client-Side File Validators, Drag and Drop Libraries, Programmatic Triggers.

Quelles sont les alternatives open-source à react-dropzone/react-dropzone ?

Les alternatives open-source à react-dropzone/react-dropzone incluent : okonet/react-dropzone — react-dropzone is a reusable React UI component for implementing HTML5 drag-and-drop file transfers. It provides a… blueimp/jquery-file-upload — This project is a jQuery-based file upload widget that provides a browser interface for selecting and transferring… dropzone/dropzone — Dropzone is a JavaScript file upload library that provides a browser-based interface for capturing dropped files and… kartik-v/bootstrap-fileinput — bootstrap-fileinput is a Bootstrap-compatible HTML5 file upload widget and plugin. It provides a customizable… chakra-ui/ark — Ark is a headless UI component library that delivers accessible, cross-framework primitives with behavior governed by… enyo/dropzone — Dropzone is a JavaScript library used to create interactive file upload zones with drag-and-drop support. It functions…

Alternatives open source à React Dropzone

Projets open source similaires, classés selon le nombre de fonctionnalités partagées avec React Dropzone.
  • okonet/react-dropzoneAvatar de okonet

    okonet/react-dropzone

    10,985Voir sur GitHub↗

    react-dropzone is a reusable React UI component for implementing HTML5 drag-and-drop file transfers. It provides a React file upload component that manages file selection and drop zone states within a web application. The project enables the creation of interactive file upload interfaces where users can drag files from their local system or select them via a file browser. It integrates with the native system file picker dialog and supports the File System Access API.

    JavaScript
    Voir sur GitHub↗10,985
  • blueimp/jquery-file-uploadAvatar de blueimp

    blueimp/jQuery-File-Upload

    30,748Voir sur GitHub↗

    This project is a jQuery-based file upload widget that provides a browser interface for selecting and transferring files to a server. It functions as a chunked file uploader and a resumable upload client, enabling the transfer of large files by splitting them into smaller segments or continuing interrupted uploads from the last successfully sent byte. The tool includes a client-side image processor for validating, resizing, and generating previews of images before transmission. It also serves as a cross-domain upload tool, using various transport mechanisms to send files to different domains

    PHP
    Voir sur GitHub↗30,748
  • dropzone/dropzoneAvatar de dropzone

    dropzone/dropzone

    18,377Voir sur GitHub↗

    Dropzone is a JavaScript file upload library that provides a browser-based interface for capturing dropped files and transmitting them to a server. It functions as a multipart upload client, splitting large files into smaller chunks to increase transmission reliability and bypass server size limits. The library includes a client-side image processor capable of resizing images and correcting photo orientation in the browser before they are sent to a server. It generates image thumbnails and visual previews immediately after selection, and can render previews for files already hosted on a serve

    JavaScriptdrag-and-dropdropzonefile-upload
    Voir sur GitHub↗18,377
  • kartik-v/bootstrap-fileinputAvatar de kartik-v

    kartik-v/bootstrap-fileinput

    5,350Voir sur GitHub↗

    bootstrap-fileinput is a Bootstrap-compatible HTML5 file upload widget and plugin. It provides a customizable interface for selecting and uploading multiple files, featuring integrated image previews, drag-and-drop support, and client-side validation for file types, sizes, and counts. The project includes a resumable file upload client that slices large files into chunks to ensure stability over intermittent connections and allow transfers to be paused and resumed. It also features a client-side image processor capable of resizing images and reading EXIF metadata to automatically correct imag

    JavaScriptajax-uploadbootstrapbootstrap-fileinput
    Voir sur GitHub↗5,350
Voir les 30 alternatives à React Dropzone→