@uppy/drag-drop
Advanced tools
@uppy/drag-drop is a module of the Uppy file uploader library that provides a drag-and-drop interface for file uploads. It allows users to drag files from their file system and drop them into a designated area on a web page to initiate the upload process.
Basic Drag-and-Drop File Upload
This code initializes Uppy and uses the DragDrop plugin to create a drag-and-drop area for file uploads. The 'file-added' event logs the added file to the console.
const Uppy = require('@uppy/core');
const DragDrop = require('@uppy/drag-drop');
const uppy = Uppy();
uppy.use(DragDrop, {
target: '#drag-drop-area',
inline: true,
width: '100%',
height: '100%',
note: 'Drag & drop your files here'
});
uppy.on('file-added', (file) => {
console.log('Added file', file);
});Customizing Drag-and-Drop Area
This code demonstrates how to customize the drag-and-drop area with a custom note and localized strings for the interface.
const Uppy = require('@uppy/core');
const DragDrop = require('@uppy/drag-drop');
const uppy = Uppy();
uppy.use(DragDrop, {
target: '#drag-drop-area',
inline: true,
width: '100%',
height: '100%',
note: 'Drag & drop your files here',
locale: {
strings: {
dropHereOr: 'Drop here or %{browse}',
browse: 'browse'
}
}
});Handling Upload Progress
This code shows how to handle upload progress events. It uses the XHRUpload plugin to upload files to a specified endpoint and logs the upload progress to the console.
const Uppy = require('@uppy/core');
const DragDrop = require('@uppy/drag-drop');
const XHRUpload = require('@uppy/xhr-upload');
const uppy = Uppy();
uppy.use(DragDrop, {
target: '#drag-drop-area',
inline: true
});
uppy.use(XHRUpload, {
endpoint: 'https://your-upload-endpoint.com/upload'
});
uppy.on('upload-progress', (file, progress) => {
console.log(`File: ${file.name}, Progress: ${progress.bytesUploaded}/${progress.bytesTotal}`);
});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.
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.
const Uppy = require('@uppy/core')
const DragDrop = require('@uppy/drag-drop')
const uppy = Uppy()
uppy.use(DragDrop, {
target: '#upload'
})
$ npm install @uppy/drag-drop --save
We recommend installing from npm and then using a module bundler such as Webpack, Browserify or Rollup.js.
Alternatively, you can also use this plugin in a pre-built bundle from Transloadit's CDN: Edgly. 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.
0.29.1
| Package | Version | Package | Version | |-|-|-|-| | @uppy/aws-s3-multipart | 0.29.1 | @uppy/provider-views | 0.29.1 | | @uppy/aws-s3 | 0.29.1 | @uppy/react | 0.29.1 | | @uppy/companion-client | 0.27.3 | @uppy/redux-dev-tools | 0.29.1 | | @uppy/companion | 0.16.1 | @uppy/status-bar | 0.29.1 | | @uppy/core | 0.29.1 | @uppy/store-default | 0.27.1 | | @uppy/dashboard | 0.29.1 | @uppy/store-redux | 0.27.1 | | @uppy/drag-drop | 0.29.1 | @uppy/thumbnail-generator | 0.29.1 | | @uppy/dropbox | 0.29.1 | @uppy/transloadit | 0.29.1 | | @uppy/file-input | 0.29.1 | @uppy/tus | 0.29.1 | | @uppy/form | 0.29.1 | @uppy/url | 0.29.1 | | @uppy/golden-retriever | 0.29.1 | @uppy/utils | 0.29.1 | | @uppy/google-drive | 0.29.1 | @uppy/webcam | 0.29.1 | | @uppy/informer | 0.29.1 | @uppy/xhr-upload | 0.29.1 | | @uppy/instagram | 0.29.1 | uppy | 0.29.1 | | @uppy/progress-bar | 0.29.1 | - | - |
npm run build:lib (#1237 / @goto-bus-stop)trigger is not found (#1217 / @goto-bus-stop)responseType in IE 11, fixes #1228: The same restriction applies to responseType as to withCredentials. Both must be set after the open() call in Internet Explorer. (#1231 / @goto-bus-stop)FAQs
Droppable zone UI for Uppy. Drag and drop files into it to upload.
The npm package @uppy/drag-drop receives a total of 50,935 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 0 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.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.
Security News
Research
Socket's threat research team has detected five malicious npm packages targeting Roblox developers, deploying malware to steal credentials and personal data.
Security News
vlt introduced its new package manager and a serverless registry this week, innovating in a space where npm has stagnated.