diff --git a/website/src/examples/dashboard/code.sample b/website/src/examples/dashboard/code.sample new file mode 100644 index 0000000000..b794c5a7d6 --- /dev/null +++ b/website/src/examples/dashboard/code.sample @@ -0,0 +1,57 @@ +import Uppy, { debugLogger } from '@uppy/core' +import Dashboard from '@uppy/dashboard' +import RemoteSources from '@uppy/google-drive' +import ImageEditor from '@uppy/image-editor' +import Form from '@uppy/form' +import Webcam from '@uppy/webcam' +import Audio from '@uppy/audio' +import ScreenCapture from '@uppy/screen-capture' +import Tus from '@uppy/tus' +import DropTarget from '@uppy/drop-target' +import Compressor from '@uppy/compressor' + +import "@uppy/core/dist/style.css" +import "@uppy/dashboard/dist/style.css" +import "@uppy/audio/dist/style.css" +import "@uppy/screen-capture/dist/style.css" +import "@uppy/image-editor/dist/style.css" + +const COMPANION_URL = "http://companion.uppy.io" +const COMPANION_ALLOWED_HOSTS = ['https://my-site.com'] + +const uppy = new Uppy({ logger: debugLogger }) + // The main UI that shows files, progress and holds all plugins + .use(Dashboard, { + target: '.DashboardContainer', + inline: true, + height: 470, + metaFields: [ + { id: 'name', name: 'Name', placeholder: 'file name' }, + { id: 'caption', name: 'Caption', placeholder: 'add description' }, + ], + note: 'Images and video only, 2–3 files, up to 1 MB', + }) + // All remote services like Instagram and Google Drive in one package + .use(RemoteSources, { + // You can manually specify `sources` here, by default all available are included. + // See docs: https://uppy.io/docs/remote-sources/#sources. + companionUrl: COMPANION_URL, + companionAllowedHosts: COMPANION_ALLOWED_HOSTS, + }) + .use(Webcam, { target: Dashboard }) + .use(Audio, { target: Dashboard, showRecordingLength: true }) + .use(ScreenCapture, { target: Dashboard }) + .use(Form, { target: '#upload-form' }) + .use(ImageEditor, { target: Dashboard }) + // Allow dropping files on any element or the whole document + .use(DropTarget, { target: document.body }) + // Optimize images + .use(Compressor) + // Upload + .use(Tus, { endpoint: 'https://tusd.tusdemo.net/files/' }) + +uppy.on('complete', result => { + console.log('successful files:', result.successful) + console.log('failed files:', result.failed) +}) + diff --git a/website/src/examples/dashboard/index.ejs b/website/src/examples/dashboard/index.ejs index 50e46d321e..25e9a32789 100644 --- a/website/src/examples/dashboard/index.ejs +++ b/website/src/examples/dashboard/index.ejs @@ -21,4 +21,4 @@ Dashboard is the full-featured UI for Uppy that shows nice file previews and up
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.-{% include_code lang:js dashboard/app.es6 %} +{% include_code lang:js dashboard/code.sample %}