What is @uppy/drag-drop?
@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.
What are @uppy/drag-drop's main functionalities?
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}`);
});
Other packages similar to @uppy/drag-drop
react-dropzone
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
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
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.
@uppy/drag-drop
Droppable zone UI for Uppy. Drag and drop files into it to upload.
Read the docs |
Try it
Uppy is being developed by the folks at Transloadit,
a versatile file encoding service.
Example
import Uppy from '@uppy/core'
import DragDrop from '@uppy/drag-drop'
const uppy = new Uppy()
uppy.use(DragDrop, {
target: '#upload',
})
Installation
$ npm install @uppy/drag-drop
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
Documentation for this plugin can be found on the
Uppy website.
License
The MIT License.
4.0.0-beta.4
Released: 2024-04-29
| Package | Version | Package | Version |
| ---------------------- | ------------ | ---------------------- | ------------ |
| @uppy/angular | 0.7.0-beta.4 | @uppy/instagram | 4.0.0-beta.4 |
| @uppy/audio | 2.0.0-beta.4 | @uppy/onedrive | 4.0.0-beta.4 |
| @uppy/aws-s3-multipart | 4.0.0-beta.4 | @uppy/provider-views | 4.0.0-beta.4 |
| @uppy/box | 3.0.0-beta.4 | @uppy/react | 4.0.0-beta.4 |
| @uppy/companion | 5.0.0-beta.4 | @uppy/status-bar | 4.0.0-beta.4 |
| @uppy/companion-client | 4.0.0-beta.4 | @uppy/store-redux | 4.0.0-beta.2 |
| @uppy/compressor | 2.0.0-beta.4 | @uppy/svelte | 4.0.0-beta.2 |
| @uppy/core | 4.0.0-beta.4 | @uppy/transloadit | 4.0.0-beta.4 |
| @uppy/dashboard | 4.0.0-beta.4 | @uppy/unsplash | 4.0.0-beta.4 |
| @uppy/drop-target | 3.0.0-beta.4 | @uppy/url | 4.0.0-beta.4 |
| @uppy/dropbox | 4.0.0-beta.4 | @uppy/utils | 6.0.0-beta.4 |
| @uppy/facebook | 4.0.0-beta.4 | @uppy/webcam | 4.0.0-beta.4 |
| @uppy/file-input | 4.0.0-beta.4 | @uppy/xhr-upload | 4.0.0-beta.2 |
| @uppy/form | 4.0.0-beta.2 | @uppy/zoom | 3.0.0-beta.4 |
| @uppy/google-drive | 4.0.0-beta.4 | uppy | 4.0.0-beta.4 |
| @uppy/image-editor | 3.0.0-beta.2 | | |
- meta: Upgrade Yarn to 4.x (Merlijn Vos / #4849)
- @uppy/utils: fix fetcher export (Murderlon)
- @uppy/xhr-upload: refactor to use
fetcher
(Merlijn Vos / #5074) - docs: use StackBlitz for all examples/issue template (Merlijn Vos / #5125)
- meta: Update yarn.lock (Murderlon)
- @uppy/svelte: Add svelte 5 as peer dep (frederikhors / #5122)
- meta: Bump docker/setup-buildx-action from 2 to 3 (dependabot[bot] / #5124)
- meta: Bump actions/checkout from 3 to 4 (dependabot[bot] / #5123)
- @uppy/dashboard,@uppy/provider-views: Remove JSX global type everywhere (Merlijn Vos / #5117)
- @uppy/utils: improve return type of
dataURItoFile
(Antoine du Hamel / #5112) - @uppy/drop-target: change drop event type to DragEvent (Alireza Heydari / #5107)
- @uppy/image-editor: fix label definitions (Antoine du Hamel / #5111)
- meta: bump Prettier version (Antoine du Hamel / #5114)
- @uppy/provider-views: bring back "loaded X files..." (Mikael Finstad / #5097)
- @uppy/dashboard: fix type of trigger option (Merlijn Vos / #5106)
- meta: fix linter (Antoine du Hamel)
- @uppy/companion: bump Node.js version support matrix (Antoine du Hamel / #5035)
- @uppy/form: fix
submitOnSuccess
and triggerUploadOnSubmit
combination (Merlijn Vos / #5058) - meta: Bump docker/build-push-action from 3 to 5 (dependabot[bot] / #5105)
- meta: Bump akhileshns/heroku-deploy from 3.12.12 to 3.13.15 (dependabot[bot] / #5102)
- meta: Bump docker/login-action from 2 to 3 (dependabot[bot] / #5101)
- meta: Bump actions/download-artifact from 3 to 4 (dependabot[bot])
- meta: Bump actions/upload-artifact from 3 to 4 (dependabot[bot])
- @uppy/react: remove
useUppy
& reintroduce useUppyState
(Merlijn Vos / #5059) - meta: docs: add back markdown files (Antoine du Hamel / #5064)
- meta: fix custom provider example (Merlijn Vos / #5079)
- @uppy/utils: add fetcher (Merlijn Vos / #5073)
- meta: Fix prettier (Murderlon)
- @uppy/dashboard: add missing
x-zip-compress
archive type (Younes / #5081) - meta: Bump docker/metadata-action from 4 to 5 (dependabot[bot] / #5086)
- meta: Bump actions/setup-node from 3 to 4 (dependabot[bot] / #5087)
- meta: Bump docker/setup-qemu-action from 2 to 3 (dependabot[bot] / #5089)
- meta: bump supercharge/redis-github-action from 1.4.0 to 1.8.0 (dependabot[bot] / #5090)
- meta: bump actions/cache from 3 to 4 (dependabot[bot] / #5088)
- meta: add
dependabot.yml
to keep GHA up-to-date (Antoine du Hamel / #5083) - @uppy/core: Release: uppy@3.24.2 (github-actions[bot] / #5084)
- @uppy/core: fix
setOptions
not re-rendereing plugin UI (Antoine du Hamel / #5082) - meta: bump vite from 5.0.12 to 5.0.13 (dependabot[bot] / #5060)
- meta: bump tar from 6.1.11 to 6.2.1 (dependabot[bot] / #5068)
- @uppy/companion,@uppy/file-input: Release: uppy@3.24.1 (github-actions[bot] / #5069)
- @uppy/companion: upgrade redis (Mikael Finstad / #5065)
- meta: fix
watch:*
scripts (Antoine du Hamel / #5046) - meta: include more packages in
compare_diff
CI (Antoine du Hamel / #5044) - @uppy/file-input: add missing export (Antoine du Hamel / #5045)
- meta: Bump express from 4.18.1 to 4.19.2 in /packages/@uppy/companion (dependabot[bot] / #5036)
- @uppy/companion: Bump express from 4.18.1 to 4.19.2 (dependabot[bot] / #5037)