Merge pull request #218 from goto-bus-stop/feature/statusbar-plugin

Move StatusBar into its own plugin.

example/main.js

@@ -7,6 +7,7 @@ const Tus10 = require('../src/plugins/Tus10')
 // const Multipart = require('../src/plugins/Multipart')
 const MetaData = require('../src/plugins/MetaData')
 const Informer = require('../src/plugins/Informer')
+const StatusBar = require('../src/plugins/StatusBar')
 // const DragDrop = require('../src/plugins/DragDrop')
 
 const PROTOCOL = location.protocol === 'https:' ? 'https' : 'http'
@@ -41,6 +42,9 @@ const uppy = Uppy({debug: true, autoProceed: false})
   // .use(Multipart, {endpoint: '//api2.transloadit.com'})
   .use(Tus10, {endpoint: TUS_ENDPOINT, resume: true})
   .use(Informer, {target: Dashboard})
+  .use(StatusBar, {
+    target: Dashboard
+  })
   .use(MetaData, {
     fields: [
       { id: 'resizeTo', name: 'Resize to', value: 1200, placeholder: 'specify future image size' },

src/plugins/Dashboard/Dashboard.js

@@ -3,7 +3,6 @@ const FileList = require('./FileList')
 const Tabs = require('./Tabs')
 const FileCard = require('./FileCard')
 const UploadBtn = require('./UploadBtn')
-const StatusBar = require('./StatusBar')
 const { isTouchDevice, toArray } = require('../../core/Utils')
 const { closeIcon } = require('./icons')
 
@@ -141,30 +140,6 @@ module.exports = function Dashboard (props) {
         </div>
 
         <div class="UppyDashboard-progressindicators">
-          ${StatusBar({
-            error: props.state.error,
-            totalProgress: props.totalProgress,
-            totalFileCount: props.totalFileCount,
-            totalSize: props.totalSize,
-            totalUploadedSize: props.totalUploadedSize,
-            uploadStartedFiles: props.uploadStartedFiles,
-            isAllComplete: props.isAllComplete,
-            isAllPaused: props.isAllPaused,
-            isUploadStarted: props.isUploadStarted,
-            pauseAll: props.pauseAll,
-            resumeAll: props.resumeAll,
-            cancelAll: props.cancelAll,
-            complete: props.completeFiles.length,
-            inProgress: props.inProgress,
-            totalSpeed: props.totalSpeed,
-            totalETA: props.totalETA,
-            startUpload: props.startUpload,
-            newFileCount: props.newFiles.length,
-            files: props.files,
-            i18n: props.i18n,
-            resumableUploads: props.resumableUploads
-          })}
-
           ${props.progressindicators.map((target) => {
             return target.render(props.state)
           })}

src/plugins/Dashboard/index.js

@@ -2,9 +2,6 @@ const Plugin = require('../Plugin')
 const Translator = require('../../core/Translator')
 const dragDrop = require('drag-drop')
 const Dashboard = require('./Dashboard')
-const { getSpeed } = require('../../core/Utils')
-const { getBytesRemaining } = require('../../core/Utils')
-const { prettyETA } = require('../../core/Utils')
 const { findDOMElement } = require('../../core/Utils')
 const prettyBytes = require('prettier-bytes')
 const { defaultTabIcon } = require('./icons')
@@ -279,56 +276,23 @@ module.exports = class DashboardUI extends Plugin {
     this.core.bus.emit('core:resume-all')
   }
 
-  getTotalSpeed (files) {
-    let totalSpeed = 0
-    files.forEach((file) => {
-      totalSpeed = totalSpeed + getSpeed(file.progress)
-    })
-    return totalSpeed
-  }
-
-  getTotalETA (files) {
-    const totalSpeed = this.getTotalSpeed(files)
-    if (totalSpeed === 0) {
-      return 0
-    }
-
-    const totalBytesRemaining = files.reduce((total, file) => {
-      return total + getBytesRemaining(file.progress)
-    }, 0)
-
-    return Math.round(totalBytesRemaining / totalSpeed * 10) / 10
-  }
-
   render (state) {
     const files = state.files
 
     const newFiles = Object.keys(files).filter((file) => {
       return !files[file].progress.uploadStarted
     })
-    const uploadStartedFiles = Object.keys(files).filter((file) => {
-      return files[file].progress.uploadStarted
-    })
-    const completeFiles = Object.keys(files).filter((file) => {
-      return files[file].progress.uploadComplete
-    })
     const inProgressFiles = Object.keys(files).filter((file) => {
       return !files[file].progress.uploadComplete &&
              files[file].progress.uploadStarted &&
              !files[file].isPaused
     })
-    const processingFiles = Object.keys(files).filter((file) => {
-      return files[file].progress.preprocess || files[file].progress.postprocess
-    })
 
     let inProgressFilesArray = []
     inProgressFiles.forEach((file) => {
       inProgressFilesArray.push(files[file])
     })
 
-    const totalSpeed = prettyBytes(this.getTotalSpeed(inProgressFilesArray))
-    const totalETA = prettyETA(this.getTotalETA(inProgressFilesArray))
-
     // total size and uploaded size
     let totalSize = 0
     let totalUploadedSize = 0
@@ -339,12 +303,6 @@ module.exports = class DashboardUI extends Plugin {
     totalSize = prettyBytes(totalSize)
     totalUploadedSize = prettyBytes(totalUploadedSize)
 
-    const isAllComplete = state.totalProgress === 100 &&
-      completeFiles.length === Object.keys(files).length &&
-      processingFiles.length === 0
-    const isAllPaused = inProgressFiles.length === 0 && !isAllComplete && uploadStartedFiles.length > 0
-    const isUploadStarted = uploadStartedFiles.length > 0
-
     const acquirers = state.modal.targets.filter((target) => {
       return target.type === 'acquirer'
     })
@@ -398,17 +356,7 @@ module.exports = class DashboardUI extends Plugin {
       newFiles: newFiles,
       files: files,
       totalFileCount: Object.keys(files).length,
-      isUploadStarted: isUploadStarted,
-      inProgress: uploadStartedFiles.length,
-      completeFiles: completeFiles,
-      inProgressFiles: inProgressFiles,
-      totalSpeed: totalSpeed,
-      totalETA: totalETA,
       totalProgress: state.totalProgress,
-      totalSize: totalSize,
-      totalUploadedSize: totalUploadedSize,
-      isAllComplete: isAllComplete,
-      isAllPaused: isAllPaused,
       acquirers: acquirers,
       activePanel: state.modal.activePanel,
       progressindicators: progressindicators,
@@ -418,15 +366,12 @@ module.exports = class DashboardUI extends Plugin {
       showProgressDetails: this.opts.showProgressDetails,
       inline: this.opts.inline,
       semiTransparent: this.opts.semiTransparent,
-      onPaste: this.handlePaste,
       showPanel: this.showPanel,
       hideAllPanels: this.hideAllPanels,
       log: this.core.log,
-      bus: this.core.emitter,
       i18n: this.containerWidth,
       pauseAll: this.pauseAll,
       resumeAll: this.resumeAll,
-      cancelAll: this.cancelAll,
       addFile: addFile,
       removeFile: removeFile,
       info: info,

src/plugins/Dashboard/StatusBar.js → src/plugins/StatusBar/StatusBar.js

@@ -66,17 +66,18 @@ module.exports = (props) => {
   } else if (uploadState === STATE_UPLOADING) {
     progressBarContent = ProgressBarUploading(props)
   } else if (uploadState === STATE_ERROR) {
+    progressValue = undefined
     progressBarContent = ProgressBarError(props)
   }
 
   const width = typeof progressValue === 'number' ? progressValue : 100
 
   return html`
-    <div class="UppyDashboard-statusBar is-${uploadState}"
+    <div class="UppyStatusBar is-${uploadState}"
                 aria-hidden="${uploadState === STATE_WAITING}"
                 title="">
       <progress style="display: none;" min="0" max="100" value=${progressValue}></progress>
-      <div class="UppyDashboard-statusBarProgress ${progressMode ? `is-${progressMode}` : ''}"
+      <div class="UppyStatusBar-progress ${progressMode ? `is-${progressMode}` : ''}"
            style="width: ${width}%"></div>
       ${progressBarContent}
     </div>
@@ -107,7 +108,7 @@ const ProgressBarProcessing = (props) => {
   }
 
   return html`
-    <div class="UppyDashboard-statusBarContent">
+    <div class="UppyStatusBar-content">
       ${mode === 'determinate' ? `${value * 100}%・` : ''}
       ${message}
     </div>
@@ -116,7 +117,7 @@ const ProgressBarProcessing = (props) => {
 
 const ProgressBarUploading = (props) => {
   return html`
-    <div class="UppyDashboard-statusBarContent">
+    <div class="UppyStatusBar-content">
       ${props.isUploadStarted && !props.isAllComplete
         ? !props.isAllPaused
           ? html`<span title="Uploading">${pauseResumeButtons(props)} Uploading... ${throttledProgressDetails(props)}</span>`
@@ -129,9 +130,9 @@ const ProgressBarUploading = (props) => {
 
 const ProgressBarComplete = ({ totalProgress }) => {
   return html`
-    <div class="UppyDashboard-statusBarContent">
+    <div class="UppyStatusBar-content">
       <span title="Complete">
-        <svg class="UppyDashboard-statusBarAction UppyIcon" width="18" height="17" viewBox="0 0 23 17">
+        <svg class="UppyStatusBar-action UppyIcon" width="18" height="17" viewBox="0 0 23 17">
           <path d="M8.944 17L0 7.865l2.555-2.61 6.39 6.525L20.41 0 23 2.645z" />
         </svg>
         Upload complete・${totalProgress}%
@@ -142,7 +143,7 @@ const ProgressBarComplete = ({ totalProgress }) => {
 
 const ProgressBarError = ({ error }) => {
   return html`
-    <div class="UppyDashboard-statusBarContent">
+    <div class="UppyStatusBar-content">
       <span>
         ${error.message}
       </span>
@@ -157,7 +158,7 @@ const pauseResumeButtons = (props) => {
                   : 'pause upload'
                 : 'cancel upload'
 
-  return html`<button title="${title}" class="UppyDashboard-statusBarAction" type="button" onclick=${() => togglePauseResume(props)}>
+  return html`<button title="${title}" class="UppyStatusBar-action" type="button" onclick=${() => togglePauseResume(props)}>
     ${props.resumableUploads
       ? props.isAllPaused
         ? html`<svg class="UppyIcon" width="15" height="17" viewBox="0 0 11 13">

src/plugins/StatusBar/index.js

@@ -0,0 +1,141 @@
+const Plugin = require('../Plugin')
+const StatusBar = require('./StatusBar')
+const { getSpeed } = require('../../core/Utils')
+const { getBytesRemaining } = require('../../core/Utils')
+const { prettyETA } = require('../../core/Utils')
+const prettyBytes = require('prettier-bytes')
+
+/**
+ * A status bar.
+ */
+module.exports = class StatusBarUI extends Plugin {
+  constructor (core, opts) {
+    super(core, opts)
+    this.id = 'StatusBarUI'
+    this.title = 'StatusBar UI'
+    this.type = 'progressindicator'
+
+    // set default options
+    const defaultOptions = {
+      target: 'body',
+      showProgressDetails: false
+    }
+
+    // merge default options with the ones set by user
+    this.opts = Object.assign({}, defaultOptions, opts)
+
+    this.pauseAll = this.pauseAll.bind(this)
+    this.resumeAll = this.resumeAll.bind(this)
+    this.cancelAll = this.cancelAll.bind(this)
+    this.render = this.render.bind(this)
+    this.install = this.install.bind(this)
+  }
+
+  cancelAll () {
+    this.core.bus.emit('core:cancel-all')
+  }
+
+  pauseAll () {
+    this.core.bus.emit('core:pause-all')
+  }
+
+  resumeAll () {
+    this.core.bus.emit('core:resume-all')
+  }
+
+  getTotalSpeed (files) {
+    let totalSpeed = 0
+    files.forEach((file) => {
+      totalSpeed = totalSpeed + getSpeed(file.progress)
+    })
+    return totalSpeed
+  }
+
+  getTotalETA (files) {
+    const totalSpeed = this.getTotalSpeed(files)
+    if (totalSpeed === 0) {
+      return 0
+    }
+
+    const totalBytesRemaining = files.reduce((total, file) => {
+      return total + getBytesRemaining(file.progress)
+    }, 0)
+
+    return Math.round(totalBytesRemaining / totalSpeed * 10) / 10
+  }
+
+  render (state) {
+    const files = state.files
+
+    const uploadStartedFiles = Object.keys(files).filter((file) => {
+      return files[file].progress.uploadStarted
+    })
+    const completeFiles = Object.keys(files).filter((file) => {
+      return files[file].progress.uploadComplete
+    })
+    const inProgressFiles = Object.keys(files).filter((file) => {
+      return !files[file].progress.uploadComplete &&
+             files[file].progress.uploadStarted &&
+             !files[file].isPaused
+    })
+    const processingFiles = Object.keys(files).filter((file) => {
+      return files[file].progress.preprocess || files[file].progress.postprocess
+    })
+
+    let inProgressFilesArray = []
+    inProgressFiles.forEach((file) => {
+      inProgressFilesArray.push(files[file])
+    })
+
+    const totalSpeed = prettyBytes(this.getTotalSpeed(inProgressFilesArray))
+    const totalETA = prettyETA(this.getTotalETA(inProgressFilesArray))
+
+    // total size and uploaded size
+    let totalSize = 0
+    let totalUploadedSize = 0
+    inProgressFilesArray.forEach((file) => {
+      totalSize = totalSize + (file.progress.bytesTotal || 0)
+      totalUploadedSize = totalUploadedSize + (file.progress.bytesUploaded || 0)
+    })
+    totalSize = prettyBytes(totalSize)
+    totalUploadedSize = prettyBytes(totalUploadedSize)
+
+    const isAllComplete = state.totalProgress === 100 &&
+      completeFiles.length === Object.keys(files).length &&
+      processingFiles.length === 0
+    const isAllPaused = inProgressFiles.length === 0 && !isAllComplete && uploadStartedFiles.length > 0
+    const isUploadStarted = uploadStartedFiles.length > 0
+
+    const resumableUploads = this.core.getState().capabilities.resumableUploads || false
+
+    return StatusBar({
+      error: state.error,
+      totalProgress: state.totalProgress,
+      totalSize: totalSize,
+      totalUploadedSize: totalUploadedSize,
+      uploadStartedFiles: uploadStartedFiles,
+      isAllComplete: isAllComplete,
+      isAllPaused: isAllPaused,
+      isUploadStarted: isUploadStarted,
+      pauseAll: this.pauseAll,
+      resumeAll: this.resumeAll,
+      cancelAll: this.cancelAll,
+      complete: completeFiles.length,
+      inProgress: uploadStartedFiles.length,
+      totalSpeed: totalSpeed,
+      totalETA: totalETA,
+      files: state.files,
+      resumableUploads: resumableUploads
+    })
+  }
+
+  install () {
+    const target = this.opts.target
+    const plugin = this
+    this.target = this.mount(target, plugin)
+  }
+
+  uninstall () {
+    this.unmount()
+  }
+}

src/scss/_dashboard.scss

@@ -1094,91 +1094,3 @@
     height: 30px;
   }
 }
-
-.UppyDashboard-statusBar {
-  position: relative;
-  height: 30px;
-  line-height: 30px;
-  font-size: 12px;
-  font-weight: 500;
-  color: $color-white;
-  background-color: rgba($color-asphalt-gray, 0.7);
-  box-shadow: 1px 1px 4px 0 rgba($color-asphalt-gray, 0.3);
-  overflow: hidden;
-  z-index: $zIndex-2;
-  transition: height .35s;
-
-  .UppyDashboard--wide & {
-    height: 40px;
-    line-height: 40px;
-    font-size: 14px;
-  }
-}
-
-.UppyDashboard-statusBar[aria-hidden=true] {
-  height: 0;
-}
-
-.UppyDashboard-statusBar.is-complete .UppyDashboard-statusBarProgress {
-  background-color: $color-green;
-}
-
-.UppyDashboard-statusBar.is-error .UppyDashboard-statusBarProgress {
-  background-color: $color-red;
-}
-
-.UppyDashboard-statusBar.is-complete .UppyDashboard-statusBarContent {
-  text-align: center;
-  padding-left: 0;
-}
-
-.UppyDashboard-statusBarProgress {
-  background-color: $color-cornflower-blue;
-  height: 100%;
-  position: absolute;
-  z-index: $zIndex-2;
-  transition: background-color, width .3s ease-out;
-
-  &.is-indeterminate {
-    $stripe-color: darken($color-cornflower-blue, 10%);
-    background-size: 64px 64px;
-    background-image: linear-gradient(45deg, $stripe-color 25%, transparent 25%, transparent 50%, $stripe-color 50%, $stripe-color 75%, transparent 75%, transparent);
-    animation: statusBarProgressStripes 1s linear infinite;
-  }
-}
-
-@keyframes statusBarProgressStripes {
-  from { background-position: 64px 0; }
-  to { background-position: 0 0; }
-}
-
-.UppyDashboard-statusBarContent {
-  font-weight: 600;
-  position: relative;
-  z-index: $zIndex-3;
-  padding-left: 15px;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-}
-
-.UppyDashboard-statusBarContent .UppyIcon {
-  width: 15px;
-  height: 15px;
-
-  .UppyDashboard--wide & {
-    width: 17px;
-    height: 17px;
-  }
-}
-
-.UppyDashboard-statusBarAction {
-  color: $color-white;
-  margin-right: 8px;
-}
-
-button.UppyDashboard-statusBarAction {
-  @include reset-button;
-  margin-right: 8px;
-  cursor: pointer;
-}

src/scss/_statusbar.scss

@@ -0,0 +1,81 @@
+.UppyStatusBar {
+  position: relative;
+  height: 30px;
+  line-height: 30px;
+  font-size: 12px;
+  font-weight: 500;
+  color: $color-white;
+  background-color: rgba($color-asphalt-gray, 0.7);
+  box-shadow: 1px 1px 4px 0 rgba($color-asphalt-gray, 0.3);
+  overflow: hidden;
+  z-index: $zIndex-2;
+  transition: height .35s;
+}
+
+.UppyStatusBar[aria-hidden=true] {
+  height: 0;
+}
+
+.UppyStatusBar.is-complete .UppyStatusBar-progress {
+  background-color: $color-green;
+}
+
+.UppyStatusBar.is-error .UppyStatusBar-progress {
+  background-color: $color-red;
+}
+
+.UppyStatusBar.is-complete .UppyStatusBar-content {
+  text-align: center;
+  padding-left: 0;
+}
+
+.UppyStatusBar-progress {
+  background-color: $color-cornflower-blue;
+  height: 100%;
+  position: absolute;
+  z-index: $zIndex-2;
+  transition: background-color, width .3s ease-out;
+
+  &.is-indeterminate {
+    $stripe-color: darken($color-cornflower-blue, 10%);
+    background-size: 64px 64px;
+    background-image: linear-gradient(45deg, $stripe-color 25%, transparent 25%, transparent 50%, $stripe-color 50%, $stripe-color 75%, transparent 75%, transparent);
+    animation: statusBarProgressStripes 1s linear infinite;
+  }
+}
+
+@keyframes statusBarProgressStripes {
+  from { background-position: 64px 0; }
+  to { background-position: 0 0; }
+}
+
+.UppyStatusBar-content {
+  font-weight: 600;
+  position: relative;
+  z-index: $zIndex-3;
+  padding-left: 15px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.UppyStatusBar-content .UppyIcon {
+  width: 15px;
+  height: 15px;
+
+  .UppyDashboard--wide & {
+    width: 17px;
+    height: 17px;
+  }
+}
+
+.UppyStatusBar-action {
+  color: $color-white;
+  margin-right: 8px;
+}
+
+button.UppyStatusBar-action {
+  @include reset-button;
+  margin-right: 8px;
+  cursor: pointer;
+}

src/scss/uppy.scss

@@ -14,4 +14,5 @@
 @import '_dragdrop.scss';
 @import '_provider.scss';
 @import '_progressbar.scss';
+@import '_statusbar.scss';
 @import '_webcam.scss';

website/build-examples.js

@@ -30,6 +30,7 @@ var notifier = require('node-notifier')
 // var rollupify = require('rollupify')
 // var yoyoify = require('yo-yoify')
 var babelify = require('babelify')
+var aliasify = require('aliasify')
 var browserify = require('browserify')
 var watchify = require('watchify')
 
@@ -76,13 +77,12 @@ glob(srcPattern, function (err, files) {
 
     // Aliasing for using `require('uppy')`, etc.
     browseFy
-      // .require(uppyRoot + '/src/index.js', { expose: 'uppy' })
-      // .require(uppyRoot + '/src/core/index.js', { expose: 'uppy/core' })
-      // .require(uppyRoot + '/src/plugins/index.js', { expose: 'uppy/plugins' })
-      // .require(uppyRoot + '/src/locales/index.js', { expose: 'uppy/locales' })
-      // .transform(rollupify)
-      // .transform(yoyoify)
       .transform(babelify)
+      .transform(aliasify, {
+        replacements: {
+          '^uppy/lib/(.*?)$': path.join(__dirname, '../src/$1')
+        }
+      })
 
     // Listeners for changes, errors, and completion.
     browseFy

website/package.json

@@ -29,6 +29,8 @@
     "uuid": "2.0.2"
   },
   "devDependencies": {
+    "aliasify": "^2.1.0",
+    "babelify": "^7.3.0",
     "browserify": "13.1.0",
     "chalk": "1.1.3",
     "documentation": "4.0.0-beta9",

website/src/examples/dashboard/app.es6

@@ -1,11 +1,12 @@
-const Uppy = require('../../../../src/core')
-const Dashboard = require('../../../../src/plugins/Dashboard')
-const GoogleDrive = require('../../../../src/plugins/GoogleDrive')
-const Dropbox = require('../../../../src/plugins/Dropbox')
-const Webcam = require('../../../../src/plugins/Webcam')
-const Tus10 = require('../../../../src/plugins/Tus10')
-const MetaData = require('../../../../src/plugins/MetaData')
-const Informer = require('../../../../src/plugins/Informer')
+const Uppy = require('uppy/lib/core')
+const Dashboard = require('uppy/lib/plugins/Dashboard')
+const StatusBar = require('uppy/lib/plugins/StatusBar')
+const GoogleDrive = require('uppy/lib/plugins/GoogleDrive')
+const Dropbox = require('uppy/lib/plugins/Dropbox')
+const Webcam = require('uppy/lib/plugins/Webcam')
+const Tus10 = require('uppy/lib/plugins/Tus10')
+const MetaData = require('uppy/lib/plugins/MetaData')
+const Informer = require('uppy/lib/plugins/Informer')
 
 const UPPY_SERVER = require('../env')
 
@@ -26,6 +27,7 @@ function uppyInit () {
     inline: opts.DashboardInline,
     target: opts.DashboardInline ? '.DashboardContainer' : 'body'
   })
+  uppy.use(StatusBar, {target: Dashboard})
 
   if (opts.GoogleDrive) {
     uppy.use(GoogleDrive, {target: Dashboard, host: UPPY_SERVER})

website/src/examples/dragdrop/app.es6

@@ -1,7 +1,7 @@
-const Uppy = require('../../../../src/core/Core.js')
-const DragDrop = require('../../../../src/plugins/DragDrop/index.js')
-const ProgressBar = require('../../../../src/plugins/ProgressBar.js')
-const Tus10 = require('../../../../src/plugins/Tus10.js')
+const Uppy = require('uppy/lib/core/Core')
+const DragDrop = require('uppy/lib/plugins/DragDrop')
+const ProgressBar = require('uppy/lib/plugins/ProgressBar')
+const Tus10 = require('uppy/lib/plugins/Tus10')
 
 const uppyOne = new Uppy({debug: true})
 uppyOne

website/src/examples/drive/app.es6

@@ -1,5 +1,5 @@
-const Uppy = require('../../../../src/core/Core.js')
-const GoogleDrive = require('../../../../src/plugins/GoogleDrive')
+const Uppy = require('uppy/lib/core/Core')
+const GoogleDrive = require('uppy/lib/plugins/GoogleDrive')
 const UPPY_SERVER = require('../env')
 
 const uppy = new Uppy({debug: true, autoProceed: false})

website/src/examples/i18n/app.es6

@@ -1,5 +1,5 @@
-const Uppy = require('../../../../src/core/Core.js')
-const Tus10 = require('../../../../src/plugins/GoogleDrive')
+const Uppy = require('uppy/lib/core/Core')
+const Tus10 = require('uppy/lib/plugins/GoogleDrive')
 
 const uppy = new Uppy({debug: true, autoProceed: false})
 

website/src/examples/multipart/app.es6

@@ -1,7 +1,7 @@
-const Uppy = require('../../../../src/core/Core.js')
-const FileInput = require('../../../../src/plugins/FileInput.js')
-const Multipart = require('../../../../src/plugins/Multipart.js')
-const ProgressBar = require('../../../../src/plugins/ProgressBar.js')
+const Uppy = require('uppy/lib/core/Core')
+const FileInput = require('uppy/lib/plugins/FileInput')
+const Multipart = require('uppy/lib/plugins/Multipart')
+const ProgressBar = require('uppy/lib/plugins/ProgressBar')
 
 const uppy = new Uppy({debug: true, autoProceed: true})
 

website/src/examples/statusbar/app.es6

@@ -0,0 +1,11 @@
+const Uppy = require('uppy/lib/core/Core')
+const FileInput = require('uppy/lib/plugins/FileInput')
+const StatusBar = require('uppy/lib/plugins/StatusBar')
+const Tus10 = require('uppy/lib/plugins/Tus10')
+
+const uppyOne = new Uppy({debug: true})
+uppyOne
+  .use(FileInput, {target: '.UppyInput'})
+  .use(Tus10, {endpoint: '//master.tus.io/files/'})
+  .use(StatusBar, {target: '.UppyInput-Progress'})
+  .run()

website/src/examples/statusbar/app.html

@@ -0,0 +1,9 @@
+<!-- Basic Uppy styles -->
+<link rel="stylesheet" href="/uppy/uppy.min.css">
+
+<div class="grid">
+  <div class="column-full">
+    <div class="UppyInput"></div>
+    <div class="UppyInput-Progress"></div>
+  </div>
+</div>

website/src/examples/statusbar/index.ejs

@@ -0,0 +1,35 @@
+---
+title: Status Bar
+layout: example
+type: examples
+order: 1
+---
+
+{% blockquote %}
+The StatusBar plugin shows upload progress.
+{% endblockquote %}
+
+<link rel="stylesheet" href="app.css">
+<% 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 HTML snippet:
+</p>
+{% include_code lang:html statusbar/app.html %}
+
+<p>
+  Along with this JavaScript:
+</p>
+{% include_code lang:js statusbar/app.es6 %}
+
+<p>
+  And the following CSS:
+</p>
+{% include_code lang:css statusbar/app.css %}