Add Dashboard titles for pre/post-processing, hide pause/resume buttons when pre/post-processing

packages/@uppy/dashboard/src/components/PanelTopBar.js

@@ -56,6 +56,9 @@ function UploadStatus (props) {
   switch (uploadingState) {
     case 'uploading':
       return props.i18n('uploadingXFiles', { smart_count: props.inProgressNotPausedFiles.length })
+    case 'preprocessing':
+    case 'postprocessing':
+      return props.i18n('processingXFiles', { smart_count: props.processingFiles.length })
     case 'paused':
       return props.i18n('uploadPaused')
     case 'waiting':

packages/@uppy/dashboard/src/index.js

@@ -7,7 +7,7 @@ const Informer = require('@uppy/informer')
 const ThumbnailGenerator = require('@uppy/thumbnail-generator')
 const findAllDOMElements = require('@uppy/utils/lib/findAllDOMElements')
 const toArray = require('@uppy/utils/lib/toArray')
-const prettyBytes = require('prettier-bytes')
+// const prettyBytes = require('prettier-bytes')
 const ResizeObserver = require('resize-observer-polyfill').default || require('resize-observer-polyfill')
 const { defaultTabIcon } = require('./components/icons')
 
@@ -93,6 +93,10 @@ module.exports = class Dashboard extends Plugin {
           0: 'Uploading %{smart_count} file',
           1: 'Uploading %{smart_count} files'
         },
+        processingXFiles: {
+          0: 'Processing %{smart_count} file',
+          1: 'Processing %{smart_count} files'
+        },
         uploadXNewFiles: {
           0: 'Upload +%{smart_count} file',
           1: 'Upload +%{smart_count} files'
@@ -528,6 +532,8 @@ module.exports = class Dashboard extends Plugin {
     const pluginState = this.getPluginState()
     const { files, capabilities, allowNewUpload } = state
 
+    // TODO: move this to Core, to share between Status Bar and Dashboard
+    // (and any other plugin that might need it, too)
     const newFiles = Object.keys(files).filter((file) => {
       return !files[file].progress.uploadStarted
     })
@@ -570,27 +576,26 @@ module.exports = class Dashboard extends Plugin {
     const isAllErrored = isUploadStarted &&
       erroredFiles.length === uploadStartedFiles.length
 
+    const isAllPaused = inProgressFiles.length !== 0 &&
+      pausedFiles.length === inProgressFiles.length
     // const isAllPaused = inProgressNotPausedFiles.length === 0 &&
     //   !isAllComplete &&
     //   !isAllErrored &&
     //   uploadStartedFiles.length > 0
 
-    const isAllPaused = inProgressFiles.length !== 0 &&
-      pausedFiles.length === inProgressFiles.length
-
-    let inProgressNotPausedFilesArray = []
-    inProgressNotPausedFiles.forEach((file) => {
-      inProgressNotPausedFilesArray.push(files[file])
-    })
-
-    let totalSize = 0
-    let totalUploadedSize = 0
-    inProgressNotPausedFilesArray.forEach((file) => {
-      totalSize = totalSize + (file.progress.bytesTotal || 0)
-      totalUploadedSize = totalUploadedSize + (file.progress.bytesUploaded || 0)
-    })
-    totalSize = prettyBytes(totalSize)
-    totalUploadedSize = prettyBytes(totalUploadedSize)
+    // let inProgressNotPausedFilesArray = []
+    // inProgressNotPausedFiles.forEach((file) => {
+    //   inProgressNotPausedFilesArray.push(files[file])
+    // })
+
+    // let totalSize = 0
+    // let totalUploadedSize = 0
+    // inProgressNotPausedFilesArray.forEach((file) => {
+    //   totalSize = totalSize + (file.progress.bytesTotal || 0)
+    //   totalUploadedSize = totalUploadedSize + (file.progress.bytesUploaded || 0)
+    // })
+    // totalSize = prettyBytes(totalSize)
+    // totalUploadedSize = prettyBytes(totalUploadedSize)
 
     const attachRenderFunctionToTarget = (target) => {
       const plugin = this.uppy.getPlugin(target.id)

packages/@uppy/dashboard/src/style.scss

@@ -1026,6 +1026,10 @@
   }
 }
 
+.uppy-DashboardItem.is-processing .uppy-DashboardItem-progress {
+  opacity: 0;
+}
+
 .uppy-DashboardItem.is-complete {
   .uppy-DashboardItem-progressIndicator {
     cursor: default;

packages/@uppy/status-bar/src/StatusBar.js

@@ -97,6 +97,8 @@ module.exports = (props) => {
     uploadState !== statusBarStates.STATE_COMPLETE
   const showPauseResumeBtn = resumableUploads && !hidePauseResumeButton &&
     uploadState !== statusBarStates.STATE_WAITING &&
+    uploadState !== statusBarStates.STATE_PREPROCESSING &&
+    uploadState !== statusBarStates.STATE_POSTPROCESSING &&
     uploadState !== statusBarStates.STATE_COMPLETE
   const showRetryBtn = error && !hideRetryButton
 

packages/@uppy/status-bar/src/index.js

@@ -151,6 +151,14 @@ module.exports = class StatusBar extends Plugin {
       error
     } = state
 
+    // TODO: move this to Core, to share between Status Bar and Dashboard
+    // (and any other plugin that might need it, too)
+    const newFiles = Object.keys(files).filter((file) => {
+      return !files[file].progress.uploadStarted &&
+        !files[file].progress.preprocess &&
+        !files[file].progress.postprocess
+    })
+
     const uploadStartedFiles = Object.keys(files).filter((file) => {
       return files[file].progress.uploadStarted
     })
@@ -159,11 +167,6 @@ module.exports = class StatusBar extends Plugin {
       return files[file].isPaused
     })
 
-    const newFiles = Object.keys(files).filter((file) => {
-      return !files[file].progress.uploadStarted &&
-        !files[file].progress.preprocess &&
-        !files[file].progress.postprocess
-    })
     const completeFiles = Object.keys(files).filter((file) => {
       return files[file].progress.uploadComplete
     })
@@ -186,6 +189,7 @@ module.exports = class StatusBar extends Plugin {
         files[file].progress.preprocess ||
         files[file].progress.postprocess
     })
+
     const processingFiles = Object.keys(files).filter((file) => {
       return files[file].progress.preprocess || files[file].progress.postprocess
     })
@@ -216,14 +220,13 @@ module.exports = class StatusBar extends Plugin {
     const isAllErrored = isUploadStarted &&
       erroredFiles.length === uploadStartedFiles.length
 
+    const isAllPaused = inProgressFiles.length !== 0 &&
+      pausedFiles.length === inProgressFiles.length
     // const isAllPaused = inProgressFiles.length === 0 &&
     //   !isAllComplete &&
     //   !isAllErrored &&
     //   uploadStartedFiles.length > 0
 
-    const isAllPaused = inProgressFiles.length !== 0 &&
-      pausedFiles.length === inProgressFiles.length
-
     const isUploadInProgress = inProgressFiles.length > 0
 
     const resumableUploads = capabilities.resumableUploads || false