Merge pull request #221 from transloadit/feature/dashboard-statusbar-informer

Move StatusBar and Informer install into the Dashboard (bundle them)

example/main.js

@@ -6,8 +6,8 @@ const Webcam = require('../src/plugins/Webcam')
 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 Informer = require('../src/plugins/Informer')
+// const StatusBar = require('../src/plugins/StatusBar')
 // const DragDrop = require('../src/plugins/DragDrop')
 
 const PROTOCOL = location.protocol === 'https:' ? 'https' : 'http'
@@ -23,6 +23,8 @@ const uppy = Uppy({debug: true, autoProceed: false})
     // maxWidth: 350,
     // maxHeight: 400,
     // inline: false,
+    // disableStatusBar: true,
+    // disableInformer: true,
     target: 'body',
     locale: {
       strings: {browse: 'wow'}
@@ -41,8 +43,8 @@ const uppy = Uppy({debug: true, autoProceed: false})
   .use(Webcam, {target: Dashboard})
   // .use(Multipart, {endpoint: '//api2.transloadit.com'})
   .use(Tus10, {endpoint: TUS_ENDPOINT, resume: true})
-  .use(Informer, {target: Dashboard})
-  .use(StatusBar, {target: Dashboard})
+  // .use(Informer, {target: Dashboard})
+  // .use(StatusBar, {target: Dashboard})
   .use(MetaData, {
     fields: [
       { id: 'resizeTo', name: 'Resize to', value: 1200, placeholder: 'specify future image size' },
@@ -52,7 +54,7 @@ const uppy = Uppy({debug: true, autoProceed: false})
 uppy.run()
 
 uppy.on('core:success', (fileCount) => {
-  console.log('UPLOAD SUCCESSFUL, YES')
+  console.log('UPLOAD SUCCESSFUL!!!')
   console.log(fileCount)
 })
 

src/plugins/Dashboard/index.js

@@ -2,6 +2,8 @@ const Plugin = require('../Plugin')
 const Translator = require('../../core/Translator')
 const dragDrop = require('drag-drop')
 const Dashboard = require('./Dashboard')
+const StatusBar = require('../StatusBar')
+const Informer = require('../Informer')
 const { findDOMElement } = require('../../core/Utils')
 const prettyBytes = require('prettier-bytes')
 const { defaultTabIcon } = require('./icons')
@@ -208,15 +210,6 @@ module.exports = class DashboardUI extends Plugin {
     bus.on('dashboard:file-card', this.handleFileCard)
 
     window.addEventListener('resize', this.updateDashboardElWidth)
-
-    // bus.on('core:success', (uploadedCount) => {
-    //   bus.emit(
-    //     'informer',
-    //     `${this.core.i18n('files', {'smart_count': uploadedCount})} successfully uploaded, Sir!`,
-    //     'info',
-    //     6000
-    //   )
-    // })
   }
 
   removeActions () {
@@ -230,8 +223,7 @@ module.exports = class DashboardUI extends Plugin {
 
   updateDashboardElWidth () {
     const dashboardEl = this.target.querySelector('.UppyDashboard-inner')
-    // const containerWidth = dashboardEl.offsetWidth
-    // console.log(containerWidth)
+    // console.log(dashboardEl.offsetWidth)
 
     const modal = this.core.getState().modal
     this.core.setState({
@@ -404,6 +396,18 @@ module.exports = class DashboardUI extends Plugin {
     const plugin = this
     this.target = this.mount(target, plugin)
 
+    if (!this.opts.disableStatusBar) {
+      this.core.use(StatusBar, {
+        target: DashboardUI
+      })
+    }
+
+    if (!this.opts.disableInformer) {
+      this.core.use(Informer, {
+        target: DashboardUI
+      })
+    }
+
     this.initEvents()
     this.actions()
   }

website/src/examples/dashboard/app.es6

@@ -1,6 +1,5 @@
 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')
@@ -27,7 +26,6 @@ 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})
@@ -42,7 +40,7 @@ function uppyInit () {
   }
 
   uppy.use(Tus10, {endpoint: TUS_ENDPOINT, resume: true})
-  uppy.use(Informer, {target: Dashboard})
+  // uppy.use(Informer, {target: Dashboard})
   uppy.use(MetaData, {
     fields: [
       { id: 'resizeTo', name: 'Resize to', value: 1200, placeholder: 'specify future image size' },