Drop target
The @uppy/drop-target plugin lets your users drag-and-drop files on any
element on the page, for example the whole page, document.body.
Can be used together with Uppy Dashboard or Drag & Drop plugins, or your custom solution targeting any DOM element.
Try out the live example or take it for a spin in StackBlitz.
When should I use this?
When you want to allow users to drag and drop files in your own UI, rather than
in the Dashboard UI, or catch dropped files from anywhere
on the page.
Install
- NPM
- Yarn
- CDN
npm install @uppy/drop-target
yarn add @uppy/drop-target
The bundle consists of most Uppy plugins, so this method is not recommended for production, as your users will have to download all plugins when you are likely using only a few.
It can be useful to speed up your development environment, so don't hesitate to use it to get you started.
<!-- 1. Add CSS to `<head>` -->
<link href="https://releases.transloadit.com/uppy/v4.7.0/uppy.min.css" rel="stylesheet">
<!-- 2. Initialize -->
<div id="uppy"></div>
<script type="module">
import { DropTarget } from "https://releases.transloadit.com/uppy/v4.7.0/uppy.min.mjs"
const DropTarget = new Uppy().use(DropTarget)
</script>
Use
This module has one default export: the DropTarget plugin class.
import Uppy from '@uppy/core';
import DropTarget from '@uppy/drop-target';
import '@uppy/core/dist/style.css';
import '@uppy/drop-target/dist/style.css';
const uppy = new Uppy();
uppy.use(DropTarget, {
target: document.body,
});
API
Options
onDragLeave
Event listener for the dragleave event.
uppy.use(DropTarget, {
target: document.body,
onDragLeave: (event) => {
event.stopPropagation();
},
});
onDragOver
Event listener for the dragover event.
onDrop
Event listener for the drop event.
target
DOM element, CSS selector, or plugin to place the drag and drop area into
(string, Element, Function, or UIPlugin, default: null).