Uppy is an open source project by Transloadit
Transloadit Community Plan: free hosted Companion & tusd, unlimited uploading, and 5GB/mo encoding traffic!

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.