Docs

<DashboardModal />

The <DashboardModal /> component wraps the @uppy/dashboard plugin, allowing control over the modal open state using a prop.

Installation

Install from NPM:

npm install @uppy/react

import DashboardModal from '@uppy/react/lib/DashboardModal'
import { DashboardModal } from '@uppy/react'

Props

On top of all the @uppy/dashboard options, the <DashboardModal /> plugin adds two additional props:

  • open - Boolean true or false, setting this to true opens the modal and setting it to false closes it.
  • onRequestClose - Callback called when the user attempts to close the modal, either by clicking the close button or by clicking outside the modal (if the closeModalOnClickOutside prop is set).

To use other plugins like @uppy/webcam with the <DashboardModal /> component, add them to the Uppy instance and then specify their id in the plugins prop:

// Do this wherever you initialize Uppy, e.g., in a React component's constructor method.
// Do NOT do it in `render()` or any other method that is called more than once!
uppy.use(Webcam) // `id` defaults to "Webcam"
uppy.use(Webcam, { id: 'MyWebcam' }) // `id` is… "MyWebcam"

Then do plugins={['Webcam']}.

Here is a full example that uses a button to open the modal:

class MusicUploadButton extends React.Component {
  constructor (props) {
    super(props)

    this.state = {
      modalOpen: false
    }

    this.handleOpen = this.handleOpen.bind(this)
    this.handleClose = this.handleClose.bind(this)
  }

  handleOpen () {
    this.setState({
      modalOpen: true
    })
  }

  handleClose () {
    this.setState({
      modalOpen: false
    })
  }

  render () {
    return (
      <div>
        <button onClick={this.handleOpen}>Upload some music</button>
        <DashboardModal
          uppy={this.props.uppy}
          closeModalOnClickOutside
          open={this.state.modalOpen}
          onRequestClose={this.handleClose}
          plugins={['Webcam']}
        />
      </div>
    );
  }
}
Caught a mistake or want to contribute to the documentation? Edit/fork this page directly on Github!