uppy/docs/user-interfaces/elements/drop-target.mdx

---
sidebar_position: 2
slug: /drop-target
---

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

import UppyCdnExample from '/src/components/UppyCdnExample';

# 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](/examples) or take it for a spin in
[CodeSandbox](https://codesandbox.io/s/uppy-drag-drop-gyewzx?file=/src/index.js).

:::

## 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`](/docs/dashboard) UI, or catch dropped files from anywhere
on the page.

## Install

<Tabs>
  <TabItem value="npm" label="NPM" default>

```shell
npm install @uppy/drop-target
```

  </TabItem>

  <TabItem value="yarn" label="Yarn">

```shell
yarn add @uppy/drop-target
```

  </TabItem>

  <TabItem value="cdn" label="CDN">
    <UppyCdnExample>
      {`
        import { DropTarget } from "{{UPPY_JS_URL}}"
        const DropTarget = new Uppy().use(DropTarget)
      `}
    </UppyCdnExample>
  </TabItem>
</Tabs>

## Use

This module has one default export: the `DropTarget` plugin class.

```js {8-10} showLineNumbers
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][].

```js {3-5} showLineNumbers
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`).

[`dragover` event]:
	https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dragover_event
[`dragleave` event]:
	https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dragleave_event
[`drop` event]:
	https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/drop_event