Skip to main content

Uppy 4.0 is here: TypeScript rewrite, Google Photos, React hooks, and much more.

Drag & Drop

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

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 install @uppy/core @uppy/drag-drop

Use

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