Dashboard Example

Hey there stranger! Uppy is in the early stages of development and the example section is our playground. Things might not yet work, but we're working hard to improve this.

We're on a monthly release cycle and our latest version is v0.17.0, but the example pages reflect the latest work in our master branch. Here's what changed in master since v0.17.0 in terms of commits, while the CHANGELOG provides a higher level view of this things planned for our next release.

Files from the examples are uploaded to our test servers and deleted daily.

Dashboard is the full-featured UI for Uppy that shows nice file previews and upload progress, lets you edit metadata, and unites acquire plugins, such as Google Drive and Webcam, under one roof.


Console output (latest logs are at the top):

On this page we're using the following JavaScript snippet:

app.es6view raw
const Uppy = require('uppy/lib/core')
const Dashboard = require('uppy/lib/plugins/Dashboard')
const GoogleDrive = require('uppy/lib/plugins/GoogleDrive')
const Dropbox = require('uppy/lib/plugins/Dropbox')
const Instagram = require('uppy/lib/plugins/Instagram')
const Webcam = require('uppy/lib/plugins/Webcam')
const Tus10 = require('uppy/lib/plugins/Tus10')
const MetaData = require('uppy/lib/plugins/MetaData')
const UPPY_SERVER = require('../env')
const PROTOCOL = location.protocol === 'https:' ? 'https' : 'http'
const TUS_ENDPOINT = PROTOCOL + '://master.tus.io/files/'
function uppyInit () {
const opts = window.uppyOptions
const dashboardEl = document.querySelector('.UppyDashboard')
if (dashboardEl) {
const dashboardElParent = dashboardEl.parentNode
dashboardElParent.removeChild(dashboardEl)
}
const restrictions = {
maxFileSize: 1000000,
maxNumberOfFiles: 3,
minNumberOfFiles: 2,
allowedFileTypes: ['image/*', 'video/*']
}
const uppy = Uppy({
debug: true,
autoProceed: opts.autoProceed,
restrictions: opts.restrictions ? restrictions : ''
})
uppy.use(Dashboard, {
trigger: '.UppyModalOpenerBtn',
inline: opts.DashboardInline,
target: opts.DashboardInline ? '.DashboardContainer' : 'body',
note: opts.restrictions ? 'Images and video only, 300kb or less' : ''
})
if (opts.GoogleDrive) {
uppy.use(GoogleDrive, {target: Dashboard, host: UPPY_SERVER})
}
if (opts.Dropbox) {
uppy.use(Dropbox, {target: Dashboard, host: UPPY_SERVER})
}
if (opts.Instagram) {
uppy.use(Instagram, {target: Dashboard, host: UPPY_SERVER})
}
if (opts.Webcam) {
uppy.use(Webcam, {target: Dashboard})
}
uppy.use(Tus10, {endpoint: TUS_ENDPOINT, resume: true})
uppy.use(MetaData, {
fields: [
{ id: 'resizeTo', name: 'Resize to', value: 1200, placeholder: 'specify future image size' },
{ id: 'description', name: 'Description', value: 'none', placeholder: 'describe what the file is for' }
]
})
uppy.run()
uppy.on('core:success', (fileList) => {
console.log('Yo, uploaded: ')
console.log(fileList)
})
}
uppyInit()
window.uppyInit = uppyInit