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'

CSS

The DashboardModal component requires the following CSS for styling:

import '@uppy/core/dist/style.css'
import '@uppy/dashboard/dist/style.css'

Import general Core styles from @uppy/core/dist/style.css first, then add the Dashboard styles from @uppy/dashboard/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 @uppy/dashboard plugin includes CSS for the Dashboard itself, and the various plugins used by the Dashboard, such as (@uppy/status-bar and @uppy/informer). If you also use the @uppy/status-bar or @uppy/informer plugin directly, you should not include their CSS files, but instead only use the one from the @uppy/dashboard plugin.

Styles for Provider plugins, like Google Drive and Instagram, are also bundled with Dashboard styles. Styles for other plugins, such as @uppy/url and @uppy/webcam, are not inluded. If you are using those, please see their docs and make sure to include styles for them as well.

Initializing Uppy

Your Uppy instance must be initialized before passing it to an uppy={} prop, and should be cleaned up using uppy.close() when you are done with it. A simple approach is to initialize it in your React component’s constructor() and destroy it in componentWillUnmount().

⚠ Uppy instances are stateful, so the same instance must be used across different renders.
Do NOT initialize Uppy in a render() method!
Do NOT initialize Uppy in a function component!

class MyComponent extends React.Component {
  constructor (props) {
    super(props)
    this.uppy = Uppy()
      .use(Transloadit, {})
  }

  componentWillUnmount () {
    this.uppy.close()
  }

  render () {
    return <DashboardModal uppy={this.uppy} />
  }
}

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!