Move pre/postprocessing state into the file progress objects

src/core/Core.js

@@ -313,6 +313,11 @@ class Uppy {
       ))
       updatedFiles[fileID] = updatedFile
 
+      // Preprocessing should be complete by now.
+      if (updatedFile.progress.preprocess) {
+        delete updatedFile.progress.preprocess
+      }
+
       this.setState({files: updatedFiles})
     })
 
@@ -358,43 +363,28 @@ class Uppy {
       this.updateMeta(data, fileID)
     })
 
-    this.on('core:preprocessing', () => {
-      this.setState({
-        progress: { state: 'preprocessing' }
+    this.on('core:preprocess-progress', (fileID, progress) => {
+      const files = Object.assign({}, this.getState().files)
+      files[fileID] = Object.assign({}, files[fileID], {
+        progress: Object.assign({}, files[fileID].progress, {
+          preprocess: progress
+        })
       })
-    })
-    this.on('preprocessor:progress', (progress) => {
-      if (this.state.progress.state !== 'preprocessing') {
-        return
-      }
 
       this.setState({
-        progress: Object.assign({}, this.state.progress, progress)
-      })
-    })
-    this.on('core:uploading', () => {
-      this.setState({
-        progress: { state: 'uploading' }
+        files: files
       })
     })
-    this.on('core:postprocessing', () => {
-      this.setState({
-        progress: { state: 'postprocessing' }
+    this.on('core:postprocess-progress', (fileID, progress) => {
+      const files = Object.assign({}, this.getState().files)
+      files[fileID] = Object.assign({}, files[fileID], {
+        progress: Object.assign({}, files[fileID].progress, {
+          postprocess: progress
+        })
       })
-    })
-    this.on('postprocessor:progress', (progress) => {
-      if (this.state.progress.state !== 'postprocessing') {
-        return
-      }
 
       this.setState({
-        progress: Object.assign({}, this.state.progress, progress)
-      })
-    })
-    this.on('core:success', () => {
-      console.log('core:success')
-      this.setState({
-        progress: { state: 'complete' }
+        files: files
       })
     })
 

src/plugins/Dashboard/Dashboard.js

@@ -160,6 +160,7 @@ module.exports = function Dashboard (props) {
             totalETA: props.totalETA,
             startUpload: props.startUpload,
             newFileCount: props.newFiles.length,
+            files: props.files,
             i18n: props.i18n,
             resumableUploads: props.resumableUploads
           })}

src/plugins/Dashboard/StatusBar.js

@@ -7,41 +7,88 @@ function progressDetails (props) {
 
 const throttledProgressDetails = throttle(progressDetails, 1000, {leading: true, trailing: true})
 
+const STATE_WAITING = 0
+const STATE_PREPROCESSING = 1
+const STATE_UPLOADING = 2
+const STATE_POSTPROCESSING = 3
+const STATE_COMPLETE = 4
+function getUploadingState (props, files) {
+  // If ALL files have been completed, show the completed state.
+  if (props.isAllComplete) {
+    return STATE_COMPLETE
+  }
+
+  let state = STATE_WAITING
+  const fileIDs = Object.keys(files)
+  for (let i = 0; i < fileIDs.length; i++) {
+    const progress = files[fileIDs[i]].progress
+    // If ANY files are being uploaded right now, show the uploading state.
+    if (progress.uploadStarted && !progress.uploadComplete) {
+      return STATE_UPLOADING
+    }
+    // If files are being preprocessed AND postprocessed at this time, we show the
+    // preprocess state. If any files are being uploaded we show uploading.
+    if (progress.preprocess && state !== STATE_UPLOADING) {
+      state = STATE_PREPROCESSING
+    }
+    // If NO files are being preprocessed or uploaded right now, but some files are
+    // being postprocessed, show the postprocess state.
+    if (progress.postprocess && state !== STATE_UPLOADING && state !== STATE_PREPROCESSING) {
+      state = STATE_POSTPROCESSING
+    }
+  }
+  return state
+}
+
+function getUploadStateName (state) {
+  return [
+    null,
+    'preprocessing',
+    'uploading',
+    'postprocessing',
+    'complete'
+  ][state] || 'waiting'
+}
+
 module.exports = (props) => {
   props = props || {}
 
-  const isHidden = props.progress.state === 'waiting'
+  const uploadState = getUploadingState(props, props.files || {})
+
+  const isHidden = props.totalFileCount === 0 || !props.isUploadStarted
 
+  let progressValue = props.totalProgress
+  let progressMode
   let progressBarContent
-  let progressValue
-  if (props.progress.state === 'preprocessing' || props.progress.state === 'postprocessing') {
-    if (props.progress.mode === 'determinate') {
-      progressValue = props.progress.value * 100
-    }
-    progressBarContent = ProgressBarProcessing(props.progress)
-  } else if (props.progress.state === 'complete') {
-    progressValue = 100
+  if (uploadState === STATE_PREPROCESSING || uploadState === STATE_POSTPROCESSING) {
+    // TODO set progressValue and progressMode depending on the actual pre/postprocess
+    // progress state
+    progressMode = 'indeterminate'
+    progressValue = undefined
+
+    progressBarContent = ProgressBarProcessing(props)
+  } else if (uploadState === STATE_COMPLETE) {
     progressBarContent = ProgressBarComplete(props)
-  } else if (props.progress.state === 'uploading') {
-    progressValue = props.totalProgress
+  } else if (uploadState === STATE_UPLOADING) {
     progressBarContent = ProgressBarUploading(props)
   }
 
   const width = typeof progressValue === 'number' ? progressValue : 100
 
   return html`
-    <div class="UppyDashboard-statusBar is-${props.progress.state}"
+    <div class="UppyDashboard-statusBar is-${getUploadStateName(uploadState)}"
                 aria-hidden="${isHidden}"
                 title="">
       <progress style="display: none;" min="0" max="100" value=${progressValue}></progress>
-      <div class="UppyDashboard-statusBarProgress ${props.progress.mode ? `is-${props.progress.mode}` : ''}"
+      <div class="UppyDashboard-statusBarProgress ${progressMode ? `is-${progressMode}` : ''}"
            style="width: ${width}%"></div>
       ${progressBarContent}
     </div>
   `
 }
 
-const ProgressBarProcessing = ({ mode, message, value }) => {
+const ProgressBarProcessing = (props) => {
+  const { mode, message, value } = props.progress
   return html`
     <div class="UppyDashboard-statusBarContent">
       ${mode === 'determinate' ? `${value * 100}%・` : ''}

src/plugins/Transloadit/index.js

@@ -64,11 +64,6 @@ module.exports = class Transloadit extends Plugin {
   createAssembly (filesToUpload) {
     this.core.log('Transloadit: create assembly')
 
-    this.core.emit('preprocess:progress', {
-      mode: 'indeterminate',
-      message: ''
-    })
-
     return this.client.createAssembly({
       params: this.opts.params,
       fields: this.opts.fields,
@@ -195,7 +190,6 @@ module.exports = class Transloadit extends Plugin {
   }
 
   prepareUpload (fileIDs) {
-    this.core.emit('informer', this.opts.locale.strings.creatingAssembly, 'info', 0)
     const filesToUpload = fileIDs.map(getFile, this).reduce(intoFileMap, {})
     function getFile (fileID) {
       return this.core.state.files[fileID]
@@ -205,16 +199,13 @@ module.exports = class Transloadit extends Plugin {
       return map
     }
 
-    this.core.emit('preprocessor:progress', {
-      mode: 'indeterminate',
-      message: this.opts.locale.strings.creatingAssembly
-    })
-    return this.createAssembly(filesToUpload).then(() => {
-      this.core.emit('preprocessor:progress', {
-        mode: 'determinate',
-        value: 1
+    fileIDs.forEach((fileID) => {
+      this.core.emit('core:preprocess-progress', fileID, {
+        mode: 'indeterminate',
+        message: this.opts.locale.strings.creatingAssembly
       })
     })
+    return this.createAssembly(filesToUpload)
   }
 
   afterUpload (fileIDs) {
@@ -229,9 +220,11 @@ module.exports = class Transloadit extends Plugin {
     const fileID = fileIDs[0]
     const file = this.core.state.files[fileID]
 
-    this.core.emit('postprocessor:progress', {
-      mode: 'indeterminate',
-      message: this.opts.locale.strings.encoding
+    fileIDs.forEach((fileID) => {
+      this.core.emit('core:postprocess-progress', fileID, {
+        mode: 'indeterminate',
+        message: this.opts.locale.strings.encoding
+      })
     })
 
     const onAssemblyFinished = (assembly) => {
@@ -252,13 +245,6 @@ module.exports = class Transloadit extends Plugin {
         // TODO set the `file.uploadURL` to a result?
         // We will probably need an option here so the plugin user can tell us
         // which result to pick…?
-
-        this.core.emit('informer:hide')
-      }).catch((err) => {
-        // Always hide the Informer
-        this.core.emit('informer:hide')
-
-        throw err
       })
     }