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

Installation

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

CSS

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.

Options

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.

`onDragOver(event)`

Callback for the ondragover event handler.

`onDrop(event)`

Callback for the ondrop event handler.

`onDragLeave(event)`

Callback for the ondragleave event handler.

Docs

UI Elements

Sources

Destinations

File Processing

Miscellaneous

React

Other Integrations

Contributing