mirror of
https://github.com/transloadit/uppy.git
synced 2026-07-17 16:50:22 +00:00
113 lines
2.3 KiB
Text
113 lines
2.3 KiB
Text
---
|
|
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
|
|
[StackBlitz](https://stackblitz.com/edit/vitejs-vite-yzbujq?file=main.js/g).
|
|
|
|
:::
|
|
|
|
## 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
|