Skip to content

Latest commit

 

History

History
134 lines (90 loc) · 3.96 KB

drag-drop.md

File metadata and controls

134 lines (90 loc) · 3.96 KB
Raw
type order title module permalink alias category tagline
docs
1
Drag & Drop
@uppy/drag-drop
docs/drag-drop/
docs/dragdrop/
Sources
plain and simple drag-and-drop area

The @uppy/drag-drop plugin renders a drag and drop area for file selection. 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, and the Dashboard feels like overkill.

import DragDrop from '@uppy/drag-drop'

uppy.use(DragDrop, {
  // Options
})

Try it live

Installation

This plugin is published as the @uppy/drag-drop package.

Install from NPM:

npm install @uppy/drag-drop

In the CDN package, the plugin class is available on the Uppy global object:

const { DragDrop } = Uppy

CSS

The @uppy/drag-drop plugin includes some basic styles, like shown in the example. You can also choose not to use it and provide your own styles instead.

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

Import general Core styles from @uppy/core/dist/style.css first, then add the Drag & Drop styles from @uppy/drag-drop/dist/style.css. A minified version is also available as style.min.css at the same path. The way to do import depends on your build system.

Options

The @uppy/drag-drop plugin has the following configurable options:

uppy.use(DragDrop, {
  target: null,
  width: '100%',
  height: '100%',
  note: null,
  locale: {},
})

Note that certain restrictions set in Uppy’s main 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.

id: 'DragDrop'

A unique identifier for this plugin. It defaults to 'DragDrop'. Use this if you need to add several DragDrop instances.

target: null

DOM element, CSS selector, or plugin to place the drag and drop area into.

width: '100%'

Drag and drop area width, set in inline CSS, so feel free to use percentage, pixels or other values that you like.

height: '100%'

Drag and drop area height, set in inline CSS, so feel free to use percentage, pixels or other values that you like.

note: null

Optionally, specify a string of text that explains something about the upload for the user. 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: {}

module.exports = {
  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.

The default English strings are:

const 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',
}