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
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.5
Released: 2024-05-03
| Package | Version | Package | Version |
| ------------------------- | ------------ | ------------------------- | ------------ |
| @uppy/audio | 2.0.0-beta.5 | @uppy/progress-bar | 4.0.0-beta.4 |
| @uppy/aws-s3 | 4.0.0-beta.3 | @uppy/provider-views | 4.0.0-beta.5 |
| @uppy/aws-s3-multipart | 4.0.0-beta.5 | @uppy/react | 4.0.0-beta.5 |
| @uppy/box | 3.0.0-beta.5 | @uppy/redux-dev-tools | 4.0.0-beta.2 |
| @uppy/companion | 5.0.0-beta.5 | @uppy/remote-sources | 2.0.0-beta.4 |
| @uppy/companion-client | 4.0.0-beta.5 | @uppy/screen-capture | 4.0.0-beta.4 |
| @uppy/compressor | 2.0.0-beta.5 | @uppy/status-bar | 4.0.0-beta.5 |
| @uppy/core | 4.0.0-beta.5 | @uppy/store-default | 4.0.0-beta.2 |
| @uppy/dashboard | 4.0.0-beta.5 | @uppy/store-redux | 4.0.0-beta.3 |
| @uppy/drag-drop | 4.0.0-beta.4 | @uppy/svelte | 4.0.0-beta.3 |
| @uppy/dropbox | 4.0.0-beta.5 | @uppy/thumbnail-generator | 4.0.0-beta.4 |
| @uppy/facebook | 4.0.0-beta.5 | @uppy/transloadit | 4.0.0-beta.5 |
| @uppy/file-input | 4.0.0-beta.5 | @uppy/tus | 4.0.0-beta.4 |
| @uppy/form | 4.0.0-beta.3 | @uppy/unsplash | 4.0.0-beta.5 |
| @uppy/golden-retriever | 4.0.0-beta.4 | @uppy/url | 4.0.0-beta.5 |
| @uppy/google-drive | 4.0.0-beta.5 | @uppy/utils | 6.0.0-beta.5 |
| @uppy/image-editor | 3.0.0-beta.3 | @uppy/vue | 2.0.0-beta.2 |
| @uppy/informer | 4.0.0-beta.2 | @uppy/webcam | 4.0.0-beta.5 |
| @uppy/instagram | 4.0.0-beta.5 | @uppy/xhr-upload | 4.0.0-beta.3 |
| @uppy/locales | 4.0.0-beta.1 | @uppy/zoom | 3.0.0-beta.5 |
| @uppy/onedrive | 4.0.0-beta.5 | uppy | 4.0.0-beta.5 |
- @uppy/core: make UppyEventMap more readable (Murderlon)
- @uppy/audio,@uppy/compressor,@uppy/core,@uppy/dashboard,@uppy/remote-sources,@uppy/tus,@uppy/utils: Format (Murderlon)
- @uppy/aws-s3-multipart: Format (Murderlon)
- meta: enable prettier for markdown (Merlijn Vos / #5133)
- @uppy/xhr-upload: do not throw when res is missing url (Merlijn Vos / #5132)
- @uppy/companion: coerce
requestUrl
to a string (Antoine du Hamel / #5128) - meta: enforce use of
.js
extension in import type
declarations (Antoine du Hamel / #5126) - @uppy/core: add instance ID to generated IDs (Merlijn Vos / #5080)
- @uppy/core: reference updated i18n in Restricter (Merlijn Vos / #5118)