Skip to content
Permalink
master
Switch branches/tags
Go to file
 
 
Cannot retrieve contributors at this time
76 lines (67 sloc) 2.59 KB
---
title: Dashboard
layout: example
type: examples
order: 0
category: 'Examples'
---
{% 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: <br /></p>
<p>On this page we're using the following JavaScript snippet:</p>
<blockquote>Note: in this snippet we've omitted the code to toggle options using checkboxes. The behavior of this code may be different from the above example depending on which options you've selected.</blockquote>
{% 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 Facebook = require('@uppy/facebook')
const OneDrive = require('@uppy/onedrive')
const Webcam = require('@uppy/webcam')
const ScreenCapture = require('@uppy/screen-capture')
const ImageEditor = require('@uppy/image-editor')
const Tus = require('@uppy/tus')
const uppy = new 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: false
})
.use(GoogleDrive, { target: Dashboard, companionUrl: 'https://companion.uppy.io' })
.use(Dropbox, { target: Dashboard, companionUrl: 'https://companion.uppy.io' })
.use(Instagram, { target: Dashboard, companionUrl: 'https://companion.uppy.io' })
.use(Facebook, { target: Dashboard, companionUrl: 'https://companion.uppy.io' })
.use(OneDrive, { target: Dashboard, companionUrl: 'https://companion.uppy.io' })
.use(Webcam, { target: Dashboard })
.use(ScreenCapture, { target: Dashboard })
.use(ImageEditor, { target: Dashboard })
.use(Tus, { endpoint: 'https://tusd.tusdemo.net/files/' })
.use(DropTarget, {target: document.body })
uppy.on('complete', result => {
console.log('successful files:', result.successful)
console.log('failed files:', result.failed)
})
{% endcodeblock %}