uppy/docs/user-interfaces/drag-drop.mdx

---
sidebar_position: 2
slug: /drag-drop
---

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

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

# Drag & Drop

The `@uppy/drag-drop` plugin renders a drag and drop area for file selection.

:::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?

It can be useful when you only want the local device as a file source, don’t
need file previews and a UI for metadata editing, or the
[Dashboard](/docs/dashboard/) is too much. But it can be too minimal too. By
default it doesn’t show that a file has been added nor is there a progress bar.

## Install

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

```shell
npm install @uppy/core @uppy/drag-drop
```

  </TabItem>

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

```shell
yarn add @uppy/core @uppy/drag-drop
```

  </TabItem>

  <TabItem value="cdn" label="CDN">
    <UppyCdnExample>
      {`
        import { Uppy, DragDrop } from "{{UPPY_JS_URL}}"
        const uppy = new Uppy()
        uppy.use(DragDrop, { target: '#uppy' })
      `}
    </UppyCdnExample>
  </TabItem>
</Tabs>

## Use

```js showLineNumbers
import Uppy from '@uppy/core';
import DragDrop from '@uppy/drag-drop';

import '@uppy/core/dist/style.min.css';
import '@uppy/drag-drop/dist/style.min.css';

new Uppy().use(DragDrop, { target: '#drag-drop' });
```

:::info

Certain [restrictions](/docs/uppy#restrictions) set in Uppy’s options, namely
`maxNumberOfFiles` and `allowedFileTypes`, affect the system file picker dialog.
If `maxNumberOfFiles: 1`, users will only be able to select one file, and
`allowedFileTypes: ['video/*', '.gif']` means only videos or gifs (files with
`.gif` extension) will be selectable.

:::

## API

### Options

#### `id`

A unique identifier for this plugin (`string`, Default: `'DragDrop'`).

Use this if you need to add several DragDrop instances.

#### `target`

DOM element, CSS selector, or plugin to place the drag and drop area into
(`string` or `Element`, default: `null`).

#### `width`

Drag and drop area width (`string`, default: `'100%'`).

Set in inline CSS, so feel free to use percentage, pixels or other values that
you like.

#### `height`

Drag and drop area height (`string`, default: `'100%'`).

Set in inline CSS, so feel free to use percentage, pixels or other values that
you like.

#### `note`

Optionally, specify a string of text that explains something about the upload
for the user (`string`, default: `null`).

This is a place to explain any `restrictions` that are put in place. For
example: `'Images and video only, 2–3 files, up to 1 MB'`.

#### `locale`

```js
export default {
	strings: {
		// Text to show on the droppable area.
		// `%{browse}` is replaced with a link that opens the system file selection dialog.
		dropHereOr: 'Drop here or %{browse}',
		// Used as the label for the link that opens the system file selection dialog.
		browse: 'browse',
	},
};
```

#### `onDragOver(event)`

Callback for the [`ondragover`][ondragover] event handler.

#### `onDragLeave(event)`

Callback for the [`ondragleave`][ondragleave] event handler.

#### `onDrop(event)`

Callback for the [`ondrop`][ondrop] event handler.

[ondragover]:
	https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/ondragover
[ondragleave]:
	https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/ondragleave
[ondrop]:
	https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/ondrop