Browse Source

status-bar: Show number of started uploads, fixes #983

Previously this would list the number of in-progress uploads, but once
an upload is finished it is no longer in progress.

Now it lists the number of uploads that were started, i.e. are in
progress or completed.
Renée Kooi 6 years ago
parent
commit
70f1176c44

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

@@ -176,15 +176,15 @@ const ProgressBarProcessing = (props) => {
   </div>
   </div>
 }
 }
 
 
-const progressDetails = (props) => {
+const ProgressDetails = (props) => {
   return <div class="uppy-StatusBar-statusSecondary">
   return <div class="uppy-StatusBar-statusSecondary">
-    { props.inProgress > 1 && props.i18n('filesUploadedOfTotal', { complete: props.complete, smart_count: props.inProgress }) + ' \u00B7 ' }
+    { props.numUploads > 1 && props.i18n('filesUploadedOfTotal', { complete: props.complete, smart_count: props.numUploads }) + ' \u00B7 ' }
     { props.i18n('dataUploadedOfTotal', { complete: props.totalUploadedSize, total: props.totalSize }) + ' \u00B7 ' }
     { props.i18n('dataUploadedOfTotal', { complete: props.totalUploadedSize, total: props.totalSize }) + ' \u00B7 ' }
     { props.i18n('xTimeLeft', { time: props.totalETA }) }
     { props.i18n('xTimeLeft', { time: props.totalETA }) }
   </div>
   </div>
 }
 }
 
 
-const ThrottledProgressDetails = throttle(progressDetails, 500, { leading: true, trailing: true })
+const ThrottledProgressDetails = throttle(ProgressDetails, 500, { leading: true, trailing: true })
 
 
 const ProgressBarUploading = (props) => {
 const ProgressBarUploading = (props) => {
   if (!props.isUploadStarted || props.isAllComplete) {
   if (!props.isUploadStarted || props.isAllComplete) {

+ 6 - 1
packages/@uppy/status-bar/src/index.js

@@ -156,6 +156,11 @@ module.exports = class StatusBar extends Plugin {
              files[file].progress.uploadStarted &&
              files[file].progress.uploadStarted &&
              !files[file].isPaused
              !files[file].isPaused
     })
     })
+    const startedFiles = Object.keys(files).filter((file) => {
+      return files[file].progress.uploadStarted ||
+        files[file].progress.preprocess ||
+        files[file].progress.postprocess
+    })
     const processingFiles = Object.keys(files).filter((file) => {
     const processingFiles = Object.keys(files).filter((file) => {
       return files[file].progress.preprocess || files[file].progress.postprocess
       return files[file].progress.preprocess || files[file].progress.postprocess
     })
     })
@@ -206,7 +211,7 @@ module.exports = class StatusBar extends Plugin {
       isUploadStarted: isUploadStarted,
       isUploadStarted: isUploadStarted,
       complete: completeFiles.length,
       complete: completeFiles.length,
       newFiles: newFiles.length,
       newFiles: newFiles.length,
-      inProgress: inProgressFiles.length,
+      numUploads: startedFiles.length,
       totalSpeed: totalSpeed,
       totalSpeed: totalSpeed,
       totalETA: totalETA,
       totalETA: totalETA,
       files: state.files,
       files: state.files,