Drag & Drop

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

info

Using React, Vue, or Svelte? The framework wrappers for this plugin were removed in Uppy 5.0. Use the Dropzone component or useDropzone hook from @uppy/react, @uppy/vue, or @uppy/svelte instead. This plugin remains supported for vanilla JavaScript and no-build setups.

tip

Try out the live example or take it for a spin in StackBlitz.

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

NPM

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

Yarn

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

CDN

caution

The bundle consists of most Uppy plugins, so this method is not recommended for production, as your users will have to download all plugins when you are likely using only a few.

It can be useful to speed up your development environment, so don't hesitate to use it to get you started.

<!-- 1. Add CSS to `<head>` -->
<link href="https://releases.transloadit.com/uppy/v6.0.5/uppy.min.css" rel="stylesheet">

<!-- 2. Initialize -->
<div id="uppy"></div>

<script type="module">
  import { Uppy, DragDrop } from "https://releases.transloadit.com/uppy/v6.0.5/uppy.min.mjs"
  const uppy = new Uppy()
  uppy.use(DragDrop, { target: '#uppy' })
</script>

Use

import Uppy from '@uppy/core'
import DragDrop from '@uppy/drag-drop'

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

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

info

Certain 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

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 event handler.

onDragLeave(event)

Callback for the ondragleave event handler.

onDrop(event)

Callback for the ondrop event handler.