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