Merge pull request #1153 from transloadit/fix/progress-size

Use file sizes for progress calculations, closes #1132

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

@@ -639,22 +639,49 @@ class Uppy {
   _calculateTotalProgress () {
     // calculate total progress, using the number of files currently uploading,
     // multiplied by 100 and the summ of individual progress of each file
-    const files = Object.assign({}, this.getState().files)
+    const files = this.getFiles()
 
-    const inProgress = Object.keys(files).filter((file) => {
-      return files[file].progress.uploadStarted
-    })
-    const progressMax = inProgress.length * 100
-    let progressAll = 0
-    inProgress.forEach((file) => {
-      progressAll = progressAll + files[file].progress.percentage
+    const inProgress = files.filter((file) => {
+      return file.progress.uploadStarted
     })
 
-    const totalProgress = progressMax === 0 ? 0 : Math.floor((progressAll * 100 / progressMax).toFixed(2))
+    if (inProgress.length === 0) {
+      this.setState({ totalProgress: 0 })
+      return
+    }
 
-    this.setState({
-      totalProgress: totalProgress
+    const sizedFiles = inProgress.filter((file) => file.progress.bytesTotal != null)
+    const unsizedFiles = inProgress.filter((file) => file.progress.bytesTotal == null)
+
+    if (sizedFiles.length === 0) {
+      const progressMax = inProgress.length
+      const currentProgress = unsizedFiles.reduce((acc, file) => {
+        return acc + file.progress.percentage
+      }, 0)
+      const totalProgress = Math.round(currentProgress / progressMax * 100)
+      this.setState({ totalProgress })
+      return
+    }
+
+    let totalSize = sizedFiles.reduce((acc, file) => {
+      return acc + file.progress.bytesTotal
+    }, 0)
+    const averageSize = totalSize / sizedFiles.length
+    totalSize += averageSize * unsizedFiles.length
+
+    let uploadedSize = 0
+    sizedFiles.forEach((file) => {
+      uploadedSize += file.progress.bytesUploaded
     })
+    unsizedFiles.forEach((file) => {
+      uploadedSize += averageSize * (file.progress.percentage || 0)
+    })
+
+    const totalProgress = totalSize === 0
+      ? 0
+      : Math.round(uploadedSize / totalSize * 100)
+
+    this.setState({ totalProgress })
   }
 
   /**

packages/@uppy/core/src/index.test.js

@@ -1048,7 +1048,7 @@ describe('src/Core', () => {
       })
 
       core._calculateTotalProgress()
-      expect(core.getState().totalProgress).toEqual(65)
+      expect(core.getState().totalProgress).toEqual(66)
     })
 
     it('should reset the progress', () => {
@@ -1085,7 +1085,7 @@ describe('src/Core', () => {
 
       core._calculateTotalProgress()
 
-      expect(core.getState().totalProgress).toEqual(65)
+      expect(core.getState().totalProgress).toEqual(66)
 
       core.resetProgress()
 

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

@@ -1,6 +1,8 @@
 const throttle = require('lodash.throttle')
 const classNames = require('classnames')
 const statusBarStates = require('./StatusBarStates')
+const prettyBytes = require('prettier-bytes')
+const prettyETA = require('@uppy/utils/lib/prettyETA')
 const { h } = require('preact')
 
 function calculateProcessingProgress (files) {
@@ -204,8 +206,11 @@ const ProgressBarProcessing = (props) => {
 const ProgressDetails = (props) => {
   return <div class="uppy-StatusBar-statusSecondary">
     { 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('xTimeLeft', { time: props.totalETA }) }
+    { props.i18n('dataUploadedOfTotal', {
+      complete: prettyBytes(props.totalUploadedSize),
+      total: prettyBytes(props.totalSize)
+    }) + ' \u00B7 ' }
+    { props.i18n('xTimeLeft', { time: prettyETA(props.totalETA) }) }
   </div>
 }
 

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

@@ -4,8 +4,6 @@ const StatusBarUI = require('./StatusBar')
 const statusBarStates = require('./StatusBarStates')
 const getSpeed = require('@uppy/utils/lib/getSpeed')
 const getBytesRemaining = require('@uppy/utils/lib/getBytesRemaining')
-const prettyETA = require('@uppy/utils/lib/prettyETA')
-const prettyBytes = require('prettier-bytes')
 
 /**
  * StatusBar: renders a status bar with upload/pause/resume/cancel/retry buttons,
@@ -195,8 +193,7 @@ module.exports = class StatusBar extends Plugin {
       return files[file]
     })
 
-    const totalSpeed = prettyBytes(this.getTotalSpeed(inProgressNotPausedFilesArray))
-    const totalETA = prettyETA(this.getTotalETA(inProgressNotPausedFilesArray))
+    const totalETA = this.getTotalETA(inProgressNotPausedFilesArray)
 
     // total size and uploaded size
     let totalSize = 0
@@ -205,8 +202,6 @@ module.exports = class StatusBar extends Plugin {
       totalSize = totalSize + (file.progress.bytesTotal || 0)
       totalUploadedSize = totalUploadedSize + (file.progress.bytesUploaded || 0)
     })
-    totalSize = prettyBytes(totalSize)
-    totalUploadedSize = prettyBytes(totalUploadedSize)
 
     const isUploadStarted = uploadStartedFiles.length > 0
 
@@ -243,7 +238,6 @@ module.exports = class StatusBar extends Plugin {
       complete: completeFiles.length,
       newFiles: newFiles.length,
       numUploads: startedFiles.length,
-      totalSpeed,
       totalETA,
       files,
       i18n: this.i18n,