@uppy/drag-drop
Advanced tools
Droppable zone UI for Uppy. Drag and drop files into it to upload.
Uppy is being developed by the folks at Transloadit, a versatile file encoding service.
import Uppy from '@uppy/core'
import DragDrop from '@uppy/drag-drop'
const uppy = new Uppy()
uppy.use(DragDrop, {
target: '#upload',
})
$ npm install @uppy/drag-drop
Alternatively, you can also use this plugin in a pre-built bundle from
Transloadit’s CDN: Smart CDN. In that case Uppy will attach itself to the
global window.Uppy object. See the
main Uppy documentation for instructions.
Documentation for this plugin can be found on the Uppy website.
react-dropzone is a popular React component for handling file drag-and-drop uploads. It provides a simple and flexible API for integrating drag-and-drop functionality into React applications. Compared to @uppy/drag-drop, react-dropzone is more focused on React integration and does not include the broader file management and upload capabilities of Uppy.
dropzone is a standalone JavaScript library that provides drag-and-drop file uploads with image previews. It is highly customizable and easy to integrate into any web application. Unlike @uppy/drag-drop, dropzone is not part of a larger file management library and focuses solely on the drag-and-drop upload functionality.
fine-uploader is a comprehensive JavaScript library for file uploads that includes drag-and-drop support, image previews, and retry capabilities. It offers a wide range of features for handling file uploads but is more complex to set up compared to @uppy/drag-drop, which benefits from Uppy’s modular and plugin-based architecture.
FAQs
Droppable zone UI for Uppy. Drag and drop files into it to upload.
The npm package @uppy/drag-drop receives a total of 222,105 weekly downloads. As such, @uppy/drag-drop popularity was classified as popular.
We found that @uppy/drag-drop demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 5 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Five malicious NuGet packages impersonate Chinese .NET libraries to deploy a stealer targeting browser credentials, crypto wallets, SSH keys, and local files.
Security News
pnpm 11 turns on a 1-day Minimum Release Age and blocks exotic subdeps by default, adding safeguards against fast-moving supply chain attacks.
Security News
The remediated findings include organization permission bugs, stale project access after transfers, OIDC replay edge cases, audit logging gaps, and an IDOR in API token deletion.