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',
inline: false,
trigger: '#uppy-select-files',
plugins: [],
maxWidth: 750,
maxHeight: 550,
semiTransparent: false,
showProgressDetails: false,
hideUploadButton: false,
hideProgressAfterFinish: false,
note: null,
metaFields: [],
closeModalOnClickOutside: false,
disableStatusBar: false,
disableInformer: 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',
fileSource: 'File source',
done: 'Done',
localDisk: 'Local Disk',
myDevice: 'My Device',
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',
emptyFolderAdded: 'No files were added from empty folder',
folderAdded: {
0: 'Added %{smart_count} file from %{folder}',
1: 'Added %{smart_count} files from %{folder}'
}
}
}
})

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).

plugins: []

List of plugin IDs that should be shown in the Dashboard’s top bar. For example, to show the Webcam plugin:

uppy.use(Webcam)
uppy.use(Dashboard, {
plugins: ['Webcam']
})

Of course, you can also use the target option in the Webcam plugin to achieve this. However, that does not work with the React components. The target option may be changed in the future to only accept DOM elements, so it is recommended to use this plugins array instead.

maxWidth: 750

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

maxHeight: 550

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

showProgressDetails: false

Show progress bars for the uploads.

hideUploadButton: false

Hide the upload button. Use this if you are providing a custom upload button somewhere on the page using the uppy.upload() API.

hideProgressAfterFinish: false

Hide StatusBar after upload finish

note: null

Optionally 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'.

metaFields: []

An array of UI field objects that will be shown when a user clicks “edit” button on that file. Each object requires:

  • id, the name of the meta field.
  • name, the label shown in the interface.
  • placeholder, the text shown when no value it set in the field.
.use(Dashboard, {
trigger: '#pick-files',
metaFields: [
{ id: 'license', name: 'License', placeholder: 'specify license' },
{ id: 'caption', name: 'Caption', placeholder: 'describe what the image is about' }
]
})

Note that this meta data will only be set to a file if it’s entered by user. If you want to set certain default meta field to each file regardless of user actions, set meta in Uppy options.

closeModalOnClickOutside: false

Set to true to automatically close the modal when the user clicks outside it.

disablePageScrollWhenModalOpen: true

By default when Dashboard modal is open, it will disable page scrolling, so when you scroll a list of files in Uppy the website in the background stays still. Set to false to override this behaviour and leave page scrolling intact.

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.

disableThumbnailGenerator: false

Dashboard ships with ThumbnailGenerator plugin that adds small resized image thumbnails to images, for preview purposes only. If you want, you can disable the ThumbnailGenerator and/or provide your custom solution.

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