Flag of Ukraine   We stand with the brave people of Ukraine. Stop the war. Find out how you can help.

<DragDrop />

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


Install from NPM:

npm install @uppy/react
import { DragDrop } from '@uppy/react'

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


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.


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'

    note="Images up to 200×200px"
    // assuming `this.uppy` contains an Uppy instance:
      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',