uppy/website/src/docs/dashboard.md

---

type: docs order: 6 title: "Dashboard"

permalink: docs/dashboard/

Dashboard is a universal UI plugin for Uppy:

• Drag and Drop, paste, select from local disk / my device
• UI for Webcam and remote sources: Google Drive, Dropbox, Instagram (all optional, added via plugins)
• File previews and info, metadata editor
• Progress: total and for individual files
• Ability to pause/resume or cancel (depending on uploader plugin) individual or all files

Try it live

Options

uppy.use(Dashboard, {
  target: 'body',
  getMetaFromForm: true,
  trigger: '#uppy-select-files',
  inline: false,
  width: 750,
  height: 550,
  showProgressDetails: false,
  hideUploadButton: false,
  note: false,
  closeModalOnClickOutside: false,
  locale: {
    strings: {
      selectToUpload: 'Select files to upload',
      closeModal: 'Close Modal',
      upload: 'Upload',
      importFrom: 'Import files from',
      dashboardWindowTitle: 'Uppy Dashboard Window (Press escape to close)',
      dashboardTitle: 'Uppy Dashboard',
      copyLinkToClipboardSuccess: 'Link copied to clipboard.',
      copyLinkToClipboardFallback: 'Copy the URL below',
      done: 'Done',
      localDisk: 'Local Disk',
      dropPasteImport: 'Drop files here, paste, import from one of the locations above or',
      dropPaste: 'Drop files here, paste or',
      browse: 'browse',
      fileProgress: 'File progress: upload speed and ETA',
      numberOfSelectedFiles: 'Number of selected files',
      uploadAllNewFiles: 'Upload all new files'
    }
  }
})

target: 'body'

Dashboard is rendered into body by default, because by default it’s hidden and only opened as a modal when trigger is clicked.

inline: false

By default Dashboard will be rendered as a modal, which is opened via clicking on trigger. If inline: true, Dashboard will be rendered into target and fit right in.

trigger: '#uppy-select-files'

String with a CSS selector for a button that will trigger opening Dashboard modal. Multiple buttons or links can be used, if it’s a class selector (.uppy-choose, for example).

width: 750

Maximum width of the Dashboard in pixels. Used when inline: true.

height: 750

Maximum height of the Dashboard in pixels. Used when inline: true.

note: false

Optinally specify a string of text that explains something about the upload for the user. This is a place to explain restrictions that are put in place. For example: 'Images and video only, 2–3 files, up to 1 MB'.

disableStatusBar: false

Dashboard ships with StatusBar plugin that shows upload progress and pause/resume/cancel buttons. If you want, you can disable the StatusBar to provide your custom solution.

disableInformer: false

Dashboard ships with Informer plugin that notifies when the browser is offline, or when it’s time to smile if Webcam is taking a picture. If you want, you can disable the Informer and/or provide your custom solution.

getMetaFromForm: true

See general plugin options.

locale

See general plugin options.

Methods

openModal()

Shows the Dashboard modal. Use it like this:

uppy.getPlugin('Dashboard').openModal()

closeModal()

Hides the Dashboard modal. Use it like this:

uppy.getPlugin('Dashboard').closeModal()

isModalOpen()

Returns true if the Dashboard modal is open, false otherwise.

const dashboard = uppy.getPlugin('Dashboard')
if ( dashboard.isModalOpen() ) {
  dashboard.closeModal()
}