Dashboard Example

Dashboard is the full-featured UI for SME Uploader 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:

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

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.

const SmeUploader = require('@sme-uploader/core')
const Dashboard = require('@sme-uploader/dashboard')
const GoogleDrive = require('@sme-uploader/google-drive')
const Dropbox = require('@sme-uploader/dropbox')
const Instagram = require('@sme-uploader/instagram')
const Facebook = require('@sme-uploader/facebook')
const OneDrive = require('@sme-uploader/onedrive')
const Webcam = require('@sme-uploader/webcam')
const ScreenCapture = require('@sme-uploader/screen-capture')
const ImageEditor = require('@sme-uploader/image-editor')
const Tus = require('@sme-uploader/tus')

const uploader = new SmeUploader({
  debug: true,
  autoProceed: false,
  restrictions: {
    maxFileSize: 1000000,
    maxNumberOfFiles: 3,
    minNumberOfFiles: 2,
    allowedFileTypes: ['image/*', 'video/*']
  }
})
.use(Dashboard, {
  trigger: '.sme-uploader-modal-opener-btn',
  inline: true,
  target: '.dashboard-container',
  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,
  closeModalOnClickOutside: true,
})
.use(GoogleDrive, { target: Dashboard, companionUrl: 'https://companion.sme-uploader.web.app' })
.use(Dropbox, { target: Dashboard, companionUrl: 'https://companion.sme-uploader.web.app' })
.use(Instagram, { target: Dashboard, companionUrl: 'https://companion.sme-uploader.web.app' })
.use(Facebook, { target: Dashboard, companionUrl: 'https://companion.sme-uploader.web.app' })
.use(OneDrive, { target: Dashboard, companionUrl: 'https://companion.sme-uploader.web.app' })
.use(Webcam, { target: Dashboard })
.use(ScreenCapture, { target: Dashboard })
.use(ImageEditor, { target: Dashboard })
.use(Tus, { endpoint: 'https://master.tus.io/files/' })

uploader.on('complete', result => {
  console.log('successful files:', result.successful)
  console.log('failed files:', result.failed)
})

Please see documentation for details.

Examples

Dashboard Example