uppy/website/src/docs/react-dashboard.md

title	type	permalink	order
DashboardModal	docs	docs/react/dashboard-modal/	51

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

Options

On top of all the 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).
• plugins - Array of plugins you need to use in Dashboard. Example: plugins={['Webcam']}.

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 () {
    this.props.uppy.use(Webcam); // the same as this.props.uppy.use(Webcam, { id: "Webcam" });

    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>
    );
  }
}