Permalink
Switch branches/tags
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
65 lines (56 sloc) 1.9 KB
---
title: Dashboard
layout: example
type: examples
order: 0
---
{% blockquote %}
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.
{% endblockquote %}
<% include app.html %>
<script src="app.js"></script>
<hr />
<p id="console-wrapper">Console output (latest logs are at the top): <br /></p>
<p>On this page we're using the following JavaScript snippet:</p>
{% codeblock lang:js %}
const Uppy = require('@uppy/core')
const Dashboard = require('@uppy/dashboard')
const GoogleDrive = require('@uppy/google-drive')
const Dropbox = require('@uppy/dropbox')
const Instagram = require('@uppy/instagram')
const Webcam = require('@uppy/webcam')
const Tus = require('@uppy/tus')
const uppy = Uppy({
debug: true,
autoProceed: false,
restrictions: {
maxFileSize: 1000000,
maxNumberOfFiles: 3,
minNumberOfFiles: 2,
allowedFileTypes: ['image/*', 'video/*']
}
})
.use(Dashboard, {
trigger: '.UppyModalOpenerBtn',
inline: true,
target: '.DashboardContainer',
replaceTargetContent: true,
showProgressDetails: true,
note: 'Images and video only, 2–3 files, up to 1 MB',
height: 470,
metaFields: [
{ id: 'name', name: 'Name', placeholder: 'file name' },
{ id: 'caption', name: 'Caption', placeholder: 'describe what the image is about' }
],
browserBackButtonClose: true
})
.use(GoogleDrive, { target: Dashboard, serverUrl: 'https://companion.uppy.io' })
.use(Dropbox, { target: Dashboard, serverUrl: 'https://companion.uppy.io' })
.use(Instagram, { target: Dashboard, serverUrl: 'https://companion.uppy.io' })
.use(Webcam, { target: Dashboard })
.use(Tus, { endpoint: 'https://master.tus.io/files/' })
uppy.on('complete', result => {
console.log('successful files:', result.successful)
console.log('failed files:', result.failed)
})
{% endcodeblock %}