File-drops is a straightforward, in-browser utility designed to simplify handling file drop events within web applications. It abstracts away the complexities of browser drag-and-drop APIs, allowing developers to easily register a drop handler on any DOM element. When files are dropped, the utility processes them, providing an array of objects containing file `name` and `contents`. The current stable version is `0.7.0`. The package generally sees maintenance updates for dependency bumps or minor fixes, with a significant architectural shift in `v0.6.0` which transitioned it to an ES module-only distribution and introduced official TypeScript type definitions, dropping legacy UMD support. Its primary differentiator lies in its focused scope and minimal API, providing a lean solution for file input without encompassing broader UI components or file system interactions, making it highly suitable for applications requiring only direct file content access upon a user drop.
npm install file-dropsVerified import paths — ran on the pinned version, not inferred.
Demonstrates how to initialize a file drop area on a DOM element and handle the dropped files, logging their names and contents.
Update all module imports to use ES Module syntax (e.g., `import fileDrop from 'file-drops';`). Ensure your project's build tooling supports ESM.
Ensure `element.addEventListener('dragover', dropHandler);` and `element.addEventListener('drop', dropHandler);` are both used on the target DOM element.If specific handling is needed for file types (e.g., `ArrayBuffer` for images), consider using a different library or converting the string content manually post-drop. The library focuses on simplicity and text-based content retrieval.
Change your import statement from `const fileDrop = require('file-drops');` to `import fileDrop from 'file-drops';`.Ensure `fileDrop` is called with both a label string and a callback function, e.g., `fileDrop('Drop a file', function(files) { /* ... */ });`.