uppy-demo.js

// this was built with the following dependencies:
//
// "prettier-bytes": "1.0.3",
// "uppy": "0.15.5",
//
/* global Event */
const formatBytes = require('prettier-bytes')
const Uppy = require('uppy/lib/core')
// const GoogleDrive = require('uppy/lib/plugins/GoogleDrive')
// const Dropbox = require('uppy/lib/plugins/Dropbox')
const Tus10 = require('uppy/lib/plugins/Tus10')
const Transloadit = require('uppy/lib/plugins/Transloadit')
const Dashboard = require('uppy/lib/plugins/Dashboard')
const Informer = require('uppy/lib/plugins/Informer')
const Webcam = require('uppy/lib/plugins/Webcam')
require('uppy/dist/uppy.css')
require('../../stylesheets/controllers/uppy-demo.scss')

const demoAccountKey = 'abcdef1234567890'
const cropTemplate = 'abcdef1234567890'
const zipArchiveTemplate = 'abcdef1234567890'
const faceDetectTemplate = 'abcdef1234567890'
const virusScanTemplate = 'abcdef1234567890'
const optimizeImageTemplate = 'abcdef1234567890'

function ResultCard (stepName, result) {
  return `
    <div class="UppyDemo-result">
      <h4 class="UppyDemo-resultTitle">Result:</h4>
      <div>
        <strong>${result.name}</strong>
        (<a target="_blank" href="${result.ssl_url}">Open file</a>)
      </div>
      <div class="UppyDemo-resultFigure">
        ${result.type === 'image'
          ? `<img class="UppyDemo-resultImg" src="${result.ssl_url}" /><br />`
        : result.type === 'video'
          ? `<video width="320" height="240" src="${result.ssl_url}" />`
        : result.type === 'audio'
          ? `<audio width="320" height="52" src="${result.ssl_url}" />`
        : ''}
      </div>
      <ul class="UppyDemo-resultDetails">
        <li>Step: <code>${stepName}</code></li>
        <li>MIME: <code>${result.mime}</code></li>
        <li>Size: ${formatBytes(result.size, 1)}</li>
      </ul>
    </div>
  `
}

function cropDemo () {
  const target = $('#uppy-demo-crop')

  const uppy = Uppy({ debug: true, autoProceed: false })
    .use(Tus10, { resume: false })
    .use(Transloadit, {
      params: {
        template_id: cropTemplate,
        auth       : {
          key: demoAccountKey,
        },
      },
      waitForEncoding: true,
    })
    .use(Dashboard, {
      target: target[0],
      inline: true,
    })
    // TODO Enable GDrive and Dropbox when server.uppy.io is alive & kickin'
    // Best to `git blame` find the commit that did this and `git revert` it if
    // possible, since there's also some changes in the demo text to avoid
    // mentioning the remote sources.
    //
    // .use(GoogleDrive, { target: Dashboard })
    // .use(Dropbox, { target: Dashboard })
    .use(Informer, { target: Dashboard })

  uppy.run()

  uppy.on('transloadit:result', (step, result) => {
    target.next().append(ResultCard(step, result))
  })
}

function zipArchiveDemo () {
  const target = $('#uppy-demo-zip-archive')

  const uppy = Uppy({ debug: true, autoProceed: false })
    .use(Tus10)
    .use(Transloadit, {
      params: {
        template_id: zipArchiveTemplate,
        auth       : {
          key: demoAccountKey,
        },
      },
      waitForEncoding: true,
    })
    .use(Dashboard, {
      target: target[0],
      inline: true,
    })
    // TODO Enable GDrive and Dropbox when server.uppy.io is alive & kickin'
    //
    // .use(GoogleDrive, { target: Dashboard })
    // .use(Dropbox, { target: Dashboard })
    .use(Informer, { target: Dashboard })

  uppy.run()

  uppy.on('transloadit:result', (step, result) => {
    target.next().append(ResultCard(step, result))
  })
}

function faceDetectDemo () {
  const target = $('#uppy-demo-face-detect')

  const uppy = Uppy({ debug: true, autoProceed: false })
    .use(Tus10, { resume: false })
    .use(Transloadit, {
      params: {
        template_id: faceDetectTemplate,
        auth       : {
          key: demoAccountKey,
        },
      },
      waitForEncoding: true,
    })
    .use(Dashboard, {
      target: target[0],
      inline: true,
    })
    .use(Webcam, {
      target: Dashboard,
      modes : ['picture'],
    })
    .use(Informer, { target: Dashboard })

  uppy.run()
  uppy.on('transloadit:result', (step, result) => {
    const card = $(ResultCard(step, result))
    // TODO add the face locations to the card?
    target.next().append(card)
  })
}

function virusScanDemo () {
  const target = $('#uppy-demo-virus-scan')

  const uppy = Uppy({ debug: true, autoProceed: false })
    .use(Tus10, { resume: false })
    .use(Transloadit, {
      params: {
        template_id: virusScanTemplate,
        auth       : {
          key: demoAccountKey,
        },
      },
      waitForEncoding: true,
    })
    .use(Dashboard, {
      target: target[0],
      inline: true,
    })
    // TODO Enable GDrive and Dropbox when server.uppy.io is alive & kickin'
    //
    // .use(GoogleDrive, { target: Dashboard })
    // .use(Dropbox, { target: Dashboard })
    .use(Informer, { target: Dashboard })

  uppy.run()

  // Show `Accepted!` if the files are all safe. Otherwise
  // show the error message.
  uppy.on('core:error', (err) => {
    target.next().append(`
      <div class="UppyDemo-result">
        <h2 class="UppyDemo-resultTitle">Result:</h2>
        <p>${err.message}</p>
      </div>
    `)
  })
  uppy.on('core:success', (step, result) => {
    target.next().append(`
      <div class="UppyDemo-result">
        <h2 class="UppyDemo-resultTitle">Result:</h2>
        <p>Accepted!</p>
      </div>
    `)
  })
}

function optimizeImageDemo () {
  const target = $('#uppy-demo-optimize-images')

  const uppy = Uppy({ debug: true, autoProceed: false })
    .use(Tus10, { resume: false })
    .use(Transloadit, {
      params: {
        template_id: optimizeImageTemplate,
        auth       : {
          key: demoAccountKey,
        },
      },
      waitForEncoding: true,
    })
    .use(Dashboard, {
      target: target[0],
      inline: true,
    })
    // TODO Enable GDrive and Dropbox when server.uppy.io is alive & kickin'
    //
    // .use(GoogleDrive, { target: Dashboard })
    // .use(Dropbox, { target: Dashboard })
    .use(Informer, { target: Dashboard })

  uppy.run()
  uppy.on('transloadit:result', (step, result) => {
    target.next().append(ResultCard(step, result))
  })
}

// Hack to force the dashboard to resize when its tab
// is selected.
$('#uppy-demo [role="tab"]').on('shown.bs.tab', () => {
  window.dispatchEvent(new Event('resize'))
})

$(document).ready(() => {
  if ($('#uppy-demo').length > 0) {
    cropDemo()
    $(`a[data-uppy-demo="zip-archive"]`).one('show.bs.tab', (e) => {
      zipArchiveDemo()
    })
    $(`a[data-uppy-demo="face-detect"]`).one('show.bs.tab', (e) => {
      faceDetectDemo()
    })
    $('a[data-uppy-demo="virus-scan"]').one('show.bs.tab', (e) => {
      virusScanDemo()
    })
    $('a[data-uppy-demo="optimize-images"]').one('show.bs.tab', (e) => {
      optimizeImageDemo()
    })
  }
})