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.1
Released: 2024-03-28
| Package | Version | Package | Version |
| ------------------------- | ------------ | ------------------------- | ------------ |
| @uppy/angular | 0.7.0-beta.1 | @uppy/progress-bar | 4.0.0-beta.1 |
| @uppy/audio | 2.0.0-beta.1 | @uppy/provider-views | 4.0.0-beta.1 |
| @uppy/aws-s3 | 4.0.0-beta.1 | @uppy/react | 4.0.0-beta.1 |
| @uppy/aws-s3-multipart | 4.0.0-beta.1 | @uppy/redux-dev-tools | 4.0.0-beta.1 |
| @uppy/box | 3.0.0-beta.1 | @uppy/remote-sources | 2.0.0-beta.1 |
| @uppy/companion | 5.0.0-beta.1 | @uppy/screen-capture | 4.0.0-beta.1 |
| @uppy/companion-client | 4.0.0-beta.1 | @uppy/status-bar | 4.0.0-beta.1 |
| @uppy/compressor | 2.0.0-beta.1 | @uppy/store-default | 4.0.0-beta.1 |
| @uppy/core | 4.0.0-beta.1 | @uppy/store-redux | 4.0.0-beta.1 |
| @uppy/dashboard | 4.0.0-beta.1 | @uppy/svelte | 4.0.0-beta.1 |
| @uppy/drag-drop | 4.0.0-beta.1 | @uppy/thumbnail-generator | 4.0.0-beta.1 |
| @uppy/drop-target | 3.0.0-beta.1 | @uppy/transloadit | 4.0.0-beta.1 |
| @uppy/dropbox | 4.0.0-beta.1 | @uppy/tus | 4.0.0-beta.1 |
| @uppy/facebook | 4.0.0-beta.1 | @uppy/unsplash | 4.0.0-beta.1 |
| @uppy/file-input | 4.0.0-beta.1 | @uppy/url | 4.0.0-beta.1 |
| @uppy/form | 4.0.0-beta.1 | @uppy/utils | 6.0.0-beta.1 |
| @uppy/golden-retriever | 4.0.0-beta.1 | @uppy/vue | 2.0.0-beta.1 |
| @uppy/google-drive | 4.0.0-beta.1 | @uppy/webcam | 4.0.0-beta.1 |
| @uppy/image-editor | 3.0.0-beta.1 | @uppy/xhr-upload | 4.0.0-beta.1 |
| @uppy/informer | 4.0.0-beta.1 | @uppy/zoom | 3.0.0-beta.1 |
| @uppy/instagram | 4.0.0-beta.1 | uppy | 4.0.0-beta.1 |
| @uppy/onedrive | 4.0.0-beta.1 | | |
- @uppy/vue: migrate to Composition API with TS & drop Vue 2 support (Merlijn Vos / #5043)
- @uppy/angular: upgrade to Angular 17.x and to TS 5.4 (Antoine du Hamel / #5008)
- @uppy/svelte: remove UMD output and make it use newer types (Antoine du Hamel / #5023)
- @uppy/companion-client,@uppy/provider-views,@uppy/status-bar: fix type imports (Antoine du Hamel / #5038)
- @uppy/aws-s3-multipart: mark
opts
as optional (Antoine du Hamel / #5039) - e2e: bump Cypress version (Antoine du Hamel / #5034)
- @uppy/react: remove
prop-types
dependency (Antoine du Hamel / #5031) - @uppy/progress-bar: remove default target (Antoine du Hamel / #4971)
- @uppy/status-bar: remove default target (Antoine du Hamel / #4970)
- @uppy/react: remove
Wrapper.ts
(Antoine du Hamel / #5032) - @uppy/react: refactor to TS (Antoine du Hamel / #5012)
- @uppy/core: refine type of private variables (Antoine du Hamel / #5028)
- @uppy/dashboard: refine type of private variables (Antoine du Hamel / #5027)
- @uppy/drag-drop: refine type of private variables (Antoine du Hamel / #5026)
- @uppy/status-bar: refine type of private variables (Antoine du Hamel / #5025)
- @uppy/remote-sources: migrate to TS (Merlijn Vos / #5020)
- @uppy/dashboard: refine option types (Antoine du Hamel / #5022)
- @uppy/dashboard: add new
autoOpen
option (Chris Grigg / #5001) - @uppy/aws-s3-multipart,@uppy/tus,@uppy/utils,@uppy/xhr-upload: Make
allowedMetaFields
consistent (Merlijn Vos / #5011) - @uppy/core: fix some type errors (Antoine du Hamel / #5015)
- @uppy/audio,@uppy/dashboard,@uppy/drop-target,@uppy/webcam: add missing exports (Antoine du Hamel / #5014)
- meta: Bump webpack-dev-middleware from 5.3.3 to 5.3.4 (dependabot[bot] / #5013)
- @uppy/dashboard: refactor to TypeScript (Antoine du Hamel / #4984)
- @uppy/companion: improve error msg (Mikael Finstad / #5010)
- @uppy/aws-s3-multipart: refactor to TS (Antoine du Hamel / #4902)
- @uppy/dashboard: refactor to stable lifecycle method (Antoine du Hamel / #4999)
- @uppy/companion: crash if trying to set path to / (Mikael Finstad / #5003)
- @uppy/provider-views: fix
super.toggleCheckbox
bug (Mikael Finstad / #5004) - @uppy/aws-s3-multipart: fix escaping issue with client signed request (Hiroki Shimizu / #5006)
- @uppy/drag-drop,@uppy/progress-bar: add missing exports (Antoine du Hamel / #5009)
- @uppy/transloadit: migrate to TS (Merlijn Vos / #4987)
- @uppy/utils: fix
RateLimitedQueue#wrapPromiseFunction
types (Antoine du Hamel / #5007) - @uppy/golden-retriever: migrate to TS (Merlijn Vos / #4989)
- meta: Bump follow-redirects from 1.15.4 to 1.15.6 (dependabot[bot] / #5002)
- meta: fix
resize-observer-polyfill
types (Antoine du Hamel / #4994) - @uppy/core: various type fixes (Antoine du Hamel / #4995)
- @uppy/utils: fix
findAllDOMElements
type (Antoine du Hamel / #4997) - @uppy/status-bar: fix
recoveredState
type (Antoine du Hamel / #4996) - @uppy/utils: fix
AbortablePromise
type (Antoine du Hamel / #4988) - @uppy/core,@uppy/provider-views: Fix breadcrumbs (Evgenia Karunus / #4986)
- @uppy/drag-drop: refactor to TypeScript (Antoine du Hamel / #4983)
- @uppy/webcam: refactor to TypeScript (Antoine du Hamel / #4870)
- @uppy/url: migrate to TS (Merlijn Vos / #4980)
- @uppy/zoom: refactor to TypeScript (Murderlon / #4979)
- @uppy/unsplash: refactor to TypeScript (Murderlon / #4979)
- @uppy/onedrive: refactor to TypeScript (Murderlon / #4979)
- @uppy/instagram: refactor to TypeScript (Murderlon / #4979)
- @uppy/google-drive: refactor to TypeScript (Murderlon / #4979)
- @uppy/facebook: refactor to TypeScript (Murderlon / #4979)
- @uppy/dropbox: refactor to TypeScript (Murderlon / #4979)
- @uppy/box: refactor to TypeScript (Murderlon / #4979)
- @uppy/utils: migrate RateLimitedQueue to TS (Merlijn Vos / #4981)
- @uppy/thumbnail-generator: migrate to TS (Merlijn Vos / #4978)
- @uppy/screen-capture: migrate to TS (Merlijn Vos / #4965)
- @uppy/companion-client: Replace Provider.initPlugin with composition (Merlijn Vos / #4977)
- uppy: remove legacy bundle (Antoine du Hamel)
- meta: include types in npm archive (Antoine du Hamel)
- @uppy/angular: fix build (Antoine du Hamel)
- meta: Remove generate types from locale-pack (Murderlon)
- meta: enable CI on
4.x
branch (Antoine du Hamel) - @uppy/vue: [v4.x] remove manual types (Antoine du Hamel / #4803)
- meta: prepare release workflow for beta versions (Antoine du Hamel)