Skip to main content

Uppy 4.0 is here: TypeScript rewrite, Google Photos, React hooks, and much more.

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.

tip

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 install @uppy/drop-target

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).