Merge branch 'master' into dashboard-responsive

# Conflicts:
#	CHANGELOG.md

CHANGELOG.md

@@ -48,6 +48,11 @@ Ideas that will be planned and find their way into a release at one point
 - [ ] uppy-server: pluggable custom providers; Maybe we use a config file or make it similar to how uppy adds plugins (@ifedapoolarewaju)
 - [ ] uppy-server: begin to write automated tests (@ifedapoolarewaju)
 
+## 0.14.0
+
+- [ ] server: loading indicator while the GoogleDrive/Dropbox files are loading (@arturi, @ifedapoolarewaju)
+- [ ] server: refactor local/remote uploads in tus, allow for pause/resume with remote upload (@arturi, @ifedapoolarewaju)
+
 ## 0.13.0
 
 To be released: December 23, 2016.
@@ -59,9 +64,12 @@ Theme: Mobile Dashboard, Grid and List
 - [ ] dashboard: basic React component (@arturi)
 - [ ] dashboard: more icons for file types (@arturi)
 - [ ] dashboard: figure out where to place Informer, accounting for StatusBar (@arturi)
+- [ ] dragdrop: show number of selected files (@arturi)
 - [x] core: i18n for each plugin in options (@arturi)
 - [ ] server: investigate a pluggable uppy-server (express / koa for now) (@ifedapoolarewaju)
-- [ ] tus: fix upload progress from uppy-server (@arturi)
+- [ ] server: research having less permissions, smaller auth expiration time for security ? (@ifedapoolarewaju)
+- [ ] server: smooth authentication: after auth you are back in your app where you left, no page reloads (@ifedapoolarewaju)
+- [ ] tus: fix upload progress from uppy-server (@arturi, @ifedapoolarewaju)
 - [ ] dashboard: consider `<progress>` element for progressbar, like here https://overcast.fm/+BtuxMygVg/ (@arturi)
 - [ ] uploaders: return upload result in multipart? options for that?
 - [x] core: fix support for both ES6 module import and CommonJS requires with `add-module-exports` babel plugin (@arturi)

Makefile

@@ -37,4 +37,4 @@ $(eval $(call npm_script_targets))
 
 # These npm run scripts are available, without needing to be mentioned in `package.json`
 install:
-	npm run install
+	npm install

example/main.js

@@ -1,20 +1,18 @@
 // import Uppy from '../src/core'
 // import Dummy from '../src/plugins/Dummy.js'
 import Dashboard from '../src/plugins/Dashboard'
-// import GoogleDrive from '../src/plugins/GoogleDrive'
+import GoogleDrive from '../src/plugins/GoogleDrive'
 import Webcam from '../src/plugins/Webcam'
 import Tus10 from '../src/plugins/Tus10'
 import MetaData from '../src/plugins/MetaData'
 import Informer from '../src/plugins/Informer'
-// import Multipart from '../src/plugins/Multipart'
+// import Dummy from '../src/plugins/Dummy'
+// import ProgressBar from '../src/plugins/ProgressBar'
+// import DragDrop from '../src/plugins/DragDrop'
+// import FileInput from '../src/plugins/FileInput'
 
 const Uppy = require('../src/core')
 // const Dashboard = require('../src/plugins/Dashboard')
-// 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 Dummy = require('../src/plugins/Dummy')
 
 const PROTOCOL = location.protocol === 'https:' ? 'https' : 'http'
 const TUS_ENDPOINT = PROTOCOL + '://master.tus.io/files/'
@@ -23,12 +21,25 @@ const TUS_ENDPOINT = PROTOCOL + '://master.tus.io/files/'
 // import MagicLog from '../src/plugins/MagicLog'
 // import PersistentState from '../src/plugins/PersistentState'
 
-// const dummy = Dummy({bla: 'boop'})
-
 const uppy = Uppy({debug: true, autoProceed: false})
-  .use(Dashboard, {trigger: '#uppyModalOpener', inline: false})
-  // .use(GoogleDrive, {target: Dashboard, host: 'http://localhost:3020'})
-  // .use(Dummy, {target: Dashboard})
+  .use(Dashboard, {
+    trigger: '#uppyModalOpener',
+    maxWidth: 350,
+    maxHeight: 400,
+    inline: true,
+    target: 'body',
+    locale: {
+      strings: {browse: 'wow'}
+    }
+  })
+  .use(GoogleDrive, {target: Dashboard, host: 'http://localhost:3020'})
+  // .use(FileInput, {target: '.Uppy', locale: {
+  //   strings: {selectToUpload: 'хуй'}
+  // }})
+  // .use(DragDrop, {target: 'body', locale: {
+  //   strings: {chooseFile: 'hmm'}
+  // }})
+  // .use(ProgressBar, {target: 'body'})
   // .use(dummy)
   .use(Webcam, {target: Dashboard})
   // .use(Multipart, {endpoint: '//api2.transloadit.com'})
@@ -49,4 +60,5 @@ uppy.on('core:success', (fileCount) => {
 
 // uppy.emit('informer', 'Smile!', 'info', 2000)
 
-document.querySelector('#uppyModalOpener').click()
+var modalTrigger = document.querySelector('#uppyModalOpener')
+if (modalTrigger) modalTrigger.click()

src/core/UppySocket.js

@@ -51,10 +51,12 @@ export default class UppySocket {
   }
 
   on (action, handler) {
+    console.log(action)
     this.emitter.on(action, handler)
   }
 
   emit (action, payload) {
+    console.log(action)
     this.emitter.emit(action, payload)
   }
 
@@ -65,6 +67,7 @@ export default class UppySocket {
   _handleMessage (e) {
     try {
       const message = JSON.parse(e.data)
+      console.log(message)
       this.emit(message.action, message.payload)
     } catch (err) {
       console.log(err)

src/core/Utils.js

@@ -373,11 +373,14 @@ export function prettyETA (seconds) {
 
   // Only display hours and minutes if they are greater than 0 but always
   // display minutes if hours is being displayed
-  const hoursStr = time.hours ? time.hours + 'h' : ''
-  const minutesStr = (time.hours || time.minutes) ? time.minutes + 'm' : ''
-  const secondsStr = time.seconds + 's'
-
-  return `${hoursStr} ${minutesStr} ${secondsStr}`
+  // Display a leading zero if the there is a preceding unit: 1m 05s, but 5s
+  const hoursStr = time.hours ? time.hours + 'h ' : ''
+  const minutesVal = time.hours ? ('0' + time.minutes).substr(-2) : time.minutes
+  const minutesStr = minutesVal ? minutesVal + 'm ' : ''
+  const secondsVal = minutesVal ? ('0' + time.seconds).substr(-2) : time.seconds
+  const secondsStr = secondsVal + 's'
+
+  return `${hoursStr}${minutesStr}${secondsStr}`
 }
 
 export function makeCachingFunction () {

src/plugins/Dashboard/StatusBar.js

@@ -14,7 +14,7 @@ export default (props) => {
       <div class="UppyDashboard-statusBarContent">
         ${props.isUploadStarted && !props.isAllComplete
           ? !props.isAllPaused
-            ? html`<span>${pauseResumeButtons(props)} Uploading... ${props.complete} / ${props.inProgress}・${props.totalProgress || 0}%・${props.totalETA}・↑ ${props.totalSpeed}/s</span>`
+            ? html`<span>${pauseResumeButtons(props)} Uploading... ${props.totalProgress || 0}%・${props.complete} / ${props.inProgress}・${props.totalETA}・↑ ${props.totalSpeed}/s</span>`
             : html`<span>${pauseResumeButtons(props)} Paused・${props.totalProgress}%</span>`
           : null
           }

src/plugins/Informer.js

@@ -14,6 +14,7 @@ export default class Informer extends Plugin {
     this.type = 'progressindicator'
     this.id = 'Informer'
     this.title = 'Informer'
+    this.timeoutID = undefined
 
     // set default options
     const defaultOptions = {}
@@ -30,10 +31,14 @@ export default class Informer extends Plugin {
       }
     })
 
-    if (duration === 0) return
+    window.clearTimeout(this.timeoutID)
+    if (duration === 0) {
+      this.timeoutID = undefined
+      return
+    }
 
     // hide the informer after `duration` milliseconds
-    setTimeout(() => {
+    this.timeoutID = setTimeout(() => {
       const newInformer = Object.assign({}, this.core.getState().informer, {
         isHidden: true
       })

src/plugins/Tus10.js

@@ -165,8 +165,9 @@ export default class Tus10 extends Plugin {
           return reject(res.statusText)
         }
 
-        res.json()
-        .then((data) => {
+        this.core.emitter.emit('core:upload-started', file.id)
+
+        res.json().then((data) => {
           // get the host domain
           var regex = /^(?:https?:\/\/|\/\/)?(?:[^@\/\n]+@)?(?:www\.)?([^\/\n]+)/
           var host = regex.exec(file.remote.host)[1]
@@ -182,8 +183,8 @@ export default class Tus10 extends Plugin {
 
             if (progress) {
               this.core.log(`Upload progress: ${progress}`)
+              console.log(file.id)
 
-              // Dispatch progress event
               this.core.emitter.emit('core:upload-progress', {
                 uploader: this,
                 id: file.id,