Flag of Ukraine   We stand with the brave people of Ukraine. Stop the war. Find out how you can help.

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, including plain text “please drop files here”.

import DropTarget from '@uppy/drop-target'

uppy.use(DropTarget, {
  target: document.body,

Try it live


This plugin is published as the @uppy/drop-target package.

Install from NPM:

npm install @uppy/drop-target

In the CDN package, the plugin class is available on the Uppy global object:

const DragDrop = Uppy.DropTarget


The @uppy/drop-target plugin includes some basic styles for uppy-is-drag-over CSS class name. You can also choose not to use it and provide your own styles instead.

import '@uppy/core/dist/style.css'
import '@uppy/drop-target/dist/style.css'

Import general Core styles from @uppy/core/dist/style.css first, then add the Drag & Drop styles from @uppy/drop-target/dist/style.css. A minified version is also available as style.min.css at the same path. The way to do import depends on your build system.


The @uppy/drop-target plugin has the following configurable options:

uppy.use(DropTarget, {
  target: null,
  onDragOver: (event) => {},
  onDrop: (event) => {},
  onDragLeave: (event) => {},

target: null

DOM element or CSS selector to attach the drag and drop listeners to.


Callback for the ondragover event handler.


Callback for the ondrop event handler.


Callback for the ondragleave event handler.