react-dragdrop.md

title	type	module	permalink	alias	order	category
<DragDrop />	docs	@uppy/react	docs/react/drag-drop/	docs/react/dragdrop/	3	React

The <DragDrop /> component wraps the @uppy/drag-drop plugin.

Installation

Install from NPM:

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

import { DragDrop } from '@uppy/react'

// Alternatively, you can also use a default import:
// import DragDrop from '@uppy/react/lib/DragDrop';

CSS

The DragDrop component includes some basic styles, like shown in the example. You can also choose not to include those and use 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.

Props

The <DragDrop /> component supports all DragDrop options as props. Additionally, an Uppy instance must be provided in the uppy={} prop: see Initializing Uppy for details.

import React from 'react'
import { DragDrop } from '@uppy/react'

export default function MyComponent (props) {
  const { uppy } = props
  return  (
    <DragDrop
      width="100%"
      height="100%"
      note="Images up to 200×200px"
    // assuming `props.uppy` contains an Uppy instance:
      uppy={uppy}
      locale={{
        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',
        },
      }}
    />
  )
}