Improve progress in UI

- only show progress percent and total bytes for files that we know the size of. (but all files will still be included in number of files)
- use `null` as an unknown value for progress and ETA, allowing us to remove ETA from UI when unknown
- `percentage` make use of `undefined` when progress is not yet known - don't show percentage in UI when unknown
- add a new state field `progress` that's the same as `totalProgress` but can also be `null`

Author: mifi

packages/@uppy/core/src/Uppy.test.ts

@@ -282,6 +282,7 @@ describe('src/Core', () => {
         meta: {},
         plugins: {},
         totalProgress: 0,
+        progress: null,
         recoveredState: null,
       }
 
@@ -316,6 +317,7 @@ describe('src/Core', () => {
         meta: {},
         plugins: {},
         totalProgress: 0,
+        progress: null,
         recoveredState: null,
       })
       // new state
@@ -335,6 +337,7 @@ describe('src/Core', () => {
         meta: {},
         plugins: {},
         totalProgress: 0,
+        progress: null,
         recoveredState: null,
       })
     })
@@ -386,6 +389,7 @@ describe('src/Core', () => {
       meta: {},
       plugins: {},
       totalProgress: 0,
+      progress: null,
       recoveredState: null,
     })
   })
@@ -577,6 +581,7 @@ describe('src/Core', () => {
       meta: {},
       plugins: {},
       totalProgress: 0,
+      progress: null,
       recoveredState: null,
     })
     expect(plugin.mocks.uninstall.mock.calls.length).toEqual(1)
@@ -1776,7 +1781,6 @@ describe('src/Core', () => {
         bytesUploaded: 0,
         // null indicates unsized
         bytesTotal: null,
-        percentage: 0,
       })
 
       // @ts-ignore
@@ -1849,8 +1853,8 @@ describe('src/Core', () => {
       // @ts-ignore
       core[Symbol.for('uppy test: updateTotalProgress')]()
 
-      // foo.jpg at 35%, bar.jpg at 0%
-      expect(core.getState().totalProgress).toBe(18)
+      // foo.jpg at 35%, bar.jpg has unknown size and will not be counted
+      expect(core.getState().totalProgress).toBe(36)
 
       core.destroy()
     })

packages/@uppy/core/src/Uppy.ts

@@ -232,7 +232,8 @@ export interface State<M extends Meta, B extends Body>
     details?: string | Record<string, string> | null
   }>
   plugins: Plugins
-  totalProgress: number
+  totalProgress: number // todo remove backward compat
+  progress: number | null
   companion?: Record<string, string>
 }
 
@@ -361,6 +362,7 @@ type OmitFirstArg<T> = T extends [any, ...infer U] ? U : never
 
 const defaultUploadState = {
   totalProgress: 0,
+  progress: null,
   allowNewUpload: true,
   error: null,
   recoveredState: null,
@@ -758,7 +760,7 @@ export class Uppy<
     isUploadInProgress: boolean
     isSomeGhost: boolean
   } {
-    const { files: filesObject, totalProgress, error } = this.getState()
+    const { files: filesObject, progress: totalProgress, error } = this.getState()
     const files = Object.values(filesObject)
 
     const inProgressFiles: UppyFile<M, B>[] = []
@@ -1445,15 +1447,15 @@ export class Uppy<
           progress.bytesTotal > 0
         ) ?
           Math.round((progress.bytesUploaded / progress.bytesTotal) * 100)
-        : 0,
+        : undefined,
     }
 
     if (fileInState.progress.uploadStarted != null) {
       this.setFileState(file.id, {
         progress: {
           ...fileInState.progress,
-          bytesUploaded: progress.bytesUploaded,
           ...newProgress,
+          bytesUploaded: progress.bytesUploaded,
         },
       })
     } else {
@@ -1469,12 +1471,19 @@ export class Uppy<
   }
 
   #updateTotalProgress() {
-    let totalProgress = Math.round(this.#calculateTotalProgress() * 100)
-    if (totalProgress > 100) totalProgress = 100
-    else if (totalProgress < 0) totalProgress = 0
+    const totalProgress = this.#calculateTotalProgress()
+    let totalProgressPercent: number | null = null;
+    if (totalProgress != null) {
+      totalProgressPercent = Math.round(totalProgress * 100)
+      if (totalProgressPercent > 100) totalProgressPercent = 100
+      else if (totalProgressPercent < 0) totalProgressPercent = 0
+    }
 
-    this.emit('progress', totalProgress)
-    this.setState({ totalProgress })
+    this.emit('progress', totalProgressPercent ?? 0) // todo remove `?? 0` in next major
+    this.setState({
+      totalProgress: totalProgressPercent ?? 0, // todo remove backward compat in next major
+      progress: totalProgressPercent,
+    })
   }
 
   // ___Why throttle at 500ms?
@@ -1512,35 +1521,31 @@ export class Uppy<
       return 0
     }
 
-    const sizedFiles = filesInProgress.filter(
-      (file) => file.progress.bytesTotal != null,
-    )
-    const unsizedFiles = filesInProgress.filter(
-      (file) => file.progress.bytesTotal == null,
+    const sizedFilesInProgress = filesInProgress.filter(
+      (file) => file.progress.bytesTotal != null && file.progress.bytesTotal !== 0,
     )
 
-    if (sizedFiles.length === 0) {
-      const totalUnsizedProgress = unsizedFiles.reduce(
-        (acc, file) => acc + (file.progress.percentage ?? 0) / 100,
-        0,
-      )
+    if (sizedFilesInProgress.length === 0) {
+      return null // we don't have any files that we can know the percentage progress of
+    }
 
-      return totalUnsizedProgress / unsizedFiles.length
+    if (sizedFilesInProgress.every((file) => file.progress.uploadComplete)) {
+      // If every uploading file is complete, and we're still getting progress, it means either
+      // 1. there's a bug somewhere in some progress reporting code (maybe not even ours)
+      // and we're still getting progress, so let's just ignore it
+      // 2. there are files with unknown size (bytesTotal == null), still uploading,
+      // and we cannot say anything about their progress
+      // In any case, return null because it doesn't make any sense to show a progress
+      return null
     }
 
-    let totalFilesSize = sizedFiles.reduce((acc, file) => {
-      return (acc + (file.progress.bytesTotal ?? 0)) as number
-    }, 0)
-    const averageSize = totalFilesSize / sizedFiles.length
-    totalFilesSize += averageSize * unsizedFiles.length
+    const totalFilesSize = sizedFilesInProgress.reduce((acc, file) => (
+      acc + (file.progress.bytesTotal ?? 0)
+    ), 0)
 
-    let totalUploadedSize = 0
-    sizedFiles.forEach((file) => {
-      totalUploadedSize += file.progress.bytesUploaded || 0
-    })
-    unsizedFiles.forEach((file) => {
-      totalUploadedSize += averageSize * ((file.progress.percentage ?? 0) / 100)
-    })
+    const totalUploadedSize = sizedFilesInProgress.reduce((acc, file) => (
+      acc + (file.progress.bytesUploaded || 0)
+    ), 0)
 
     return totalFilesSize === 0 ? 0 : totalUploadedSize / totalFilesSize
   }
@@ -1628,7 +1633,6 @@ export class Uppy<
             progress: {
               uploadStarted: Date.now(),
               uploadComplete: false,
-              percentage: 0,
               bytesUploaded: 0,
               bytesTotal: file.size,
             } as FileProgressStarted,

packages/@uppy/dashboard/src/Dashboard.tsx

@@ -1202,7 +1202,7 @@ export default class Dashboard<M extends Meta, B extends Body> extends UIPlugin<
       isAllComplete,
       isAllPaused,
       totalFileCount: Object.keys(files).length,
-      totalProgress: state.totalProgress,
+      totalProgress: state.progress,
       allowNewUpload,
       acquirers,
       theme,

packages/@uppy/dashboard/src/components/Dashboard.tsx

@@ -44,7 +44,7 @@ type DashboardUIProps<M extends Meta, B extends Body> = {
   isAllComplete: boolean
   isAllPaused: boolean
   totalFileCount: number
-  totalProgress: number
+  totalProgress: number | null
   allowNewUpload: boolean
   acquirers: TargetWithRender[]
   theme: string

packages/@uppy/progress-bar/src/ProgressBar.tsx

@@ -40,10 +40,10 @@ export default class ProgressBar<
   }
 
   render(state: State<M, B>): ComponentChild {
-    const progress = state.totalProgress || 0
+    const { progress } = state
     // before starting and after finish should be hidden if specified in the options
     const isHidden =
-      (progress === 0 || progress === 100) && this.opts.hideAfterFinish
+      (progress == null || progress === 0 || progress === 100) && this.opts.hideAfterFinish
     return (
       <div
         className="uppy uppy-ProgressBar"

packages/@uppy/status-bar/src/Components.tsx

@@ -266,7 +266,7 @@ interface ProgressDetailsProps {
   complete: number
   totalUploadedSize: number
   totalSize: number
-  totalETA: number
+  totalETA: number | null
 }
 
 function ProgressDetails(props: ProgressDetailsProps) {
@@ -275,6 +275,9 @@ function ProgressDetails(props: ProgressDetailsProps) {
 
   const ifShowFilesUploadedOfTotal = numUploads > 1
 
+  const totalUploadedSizeStr = prettierBytes(totalUploadedSize)
+
+
   return (
     <div className="uppy-StatusBar-statusSecondary">
       {ifShowFilesUploadedOfTotal &&
@@ -289,14 +292,14 @@ function ProgressDetails(props: ProgressDetailsProps) {
         */}
         {ifShowFilesUploadedOfTotal && renderDot()}
 
-        {i18n('dataUploadedOfTotal', {
-          complete: prettierBytes(totalUploadedSize),
+        {totalSize !== 0 ? i18n('dataUploadedOfTotal', {
+          complete: totalUploadedSizeStr,
           total: prettierBytes(totalSize),
-        })}
+        }) : totalUploadedSizeStr}
 
         {renderDot()}
 
-        {i18n('xTimeLeft', {
+        {totalETA != null && i18n('xTimeLeft', {
           time: prettyETA(totalETA),
         })}
       </span>
@@ -355,7 +358,7 @@ function UploadNewlyAddedFiles(props: UploadNewlyAddedFilesProps) {
 interface ProgressBarUploadingProps {
   i18n: I18n
   supportsUploadProgress: boolean
-  totalProgress: number
+  totalProgress: number | null
   showProgressDetails: boolean | undefined
   isUploadStarted: boolean
   isAllComplete: boolean
@@ -365,7 +368,7 @@ interface ProgressBarUploadingProps {
   complete: number
   totalUploadedSize: number
   totalSize: number
-  totalETA: number
+  totalETA: number | null
   startUpload: () => void
 }
 
@@ -427,7 +430,7 @@ function ProgressBarUploading(props: ProgressBarUploadingProps) {
       : null}
       <div className="uppy-StatusBar-status">
         <div className="uppy-StatusBar-statusPrimary">
-          {supportsUploadProgress ? `${title}: ${totalProgress}%` : title}
+          {supportsUploadProgress && totalProgress != null ? `${title}: ${totalProgress}%` : title}
         </div>
 
         {renderProgressDetails()}

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

@@ -102,11 +102,15 @@ export default class StatusBar<M extends Meta, B extends Body> extends UIPlugin<
 
   #computeSmoothETA(totalBytes: {
     uploaded: number
-    total: number
-    remaining: number
-  }): number {
-    if (totalBytes.total === 0 || totalBytes.remaining === 0) {
-      return 0
+    total: number | null // null means indeterminate
+  }) {
+    if (totalBytes.total == null || totalBytes.total === 0) {
+      return null
+    }
+
+    const remaining = totalBytes.total - totalBytes.uploaded
+    if (remaining <= 0) {
+      return null
     }
 
     // When state is restored, lastUpdateTime is still nullish at this point.
@@ -131,7 +135,7 @@ export default class StatusBar<M extends Meta, B extends Body> extends UIPlugin<
         currentSpeed
       : emaFilter(currentSpeed, this.#previousSpeed, speedFilterHalfLife, dt)
     this.#previousSpeed = filteredSpeed
-    const instantETA = totalBytes.remaining / filteredSpeed
+    const instantETA = remaining / filteredSpeed
 
     const updatedPreviousETA = Math.max(this.#previousETA! - dt, 0)
     const filteredETA =
@@ -155,7 +159,7 @@ export default class StatusBar<M extends Meta, B extends Body> extends UIPlugin<
       capabilities,
       files,
       allowNewUpload,
-      totalProgress,
+      progress: totalProgress,
       error,
       recoveredState,
     } = state
@@ -182,14 +186,21 @@ export default class StatusBar<M extends Meta, B extends Body> extends UIPlugin<
     let totalSize = 0
     let totalUploadedSize = 0
 
+    // If at least one file has an unknown size, it doesn't make sense to display a total size
+    if (startedFiles.every((f) => f.progress.bytesTotal != null && f.progress.bytesTotal !== 0)) {
+      startedFiles.forEach((file) => {
+        totalSize += file.progress.bytesTotal || 0
+        totalUploadedSize += file.progress.bytesUploaded || 0
+      })
+    }
+
     startedFiles.forEach((file) => {
-      totalSize += file.progress.bytesTotal || 0
       totalUploadedSize += file.progress.bytesUploaded || 0
     })
+
     const totalETA = this.#computeSmoothETA({
       uploaded: totalUploadedSize,
       total: totalSize,
-      remaining: totalSize - totalUploadedSize,
     })
 
     return StatusBarUI({

packages/@uppy/status-bar/src/StatusBarUI.tsx

@@ -40,7 +40,7 @@ export interface StatusBarUIProps<M extends Meta, B extends Body> {
   hideRetryButton?: boolean
   recoveredState: State<M, B>['recoveredState']
   uploadState: (typeof statusBarStates)[keyof typeof statusBarStates]
-  totalProgress: number
+  totalProgress: number | null
   files: Record<string, UppyFile<M, B>>
   supportsUploadProgress: boolean
   hideAfterFinish?: boolean
@@ -55,7 +55,7 @@ export interface StatusBarUIProps<M extends Meta, B extends Body> {
   numUploads: number
   complete: number
   totalSize: number
-  totalETA: number
+  totalETA: number | null
   totalUploadedSize: number
 }
 

packages/@uppy/utils/src/FileProgress.ts

@@ -16,6 +16,10 @@ export type FileProcessingInfo =
 interface FileProgressBase {
   uploadComplete?: boolean
   percentage?: number
+  // note that Companion will send `bytesTotal` 0 if unknown size (not `null`).
+  // this is not perfect because some files can actually have a size of 0,
+  // and then we might think those files have an unknown size
+  // todo we should change this in companion
   bytesTotal: number | null
   preprocess?: FileProcessingInfo
   postprocess?: FileProcessingInfo

packages/@uppy/utils/src/emitSocketProgress.ts

@@ -1,10 +1,10 @@
-import type { Uppy } from '@uppy/core'
+import type { Uppy } from '@uppy/core/src/Uppy.js'
 import type { UppyFile } from './UppyFile.ts'
 
 function emitSocketProgress(
   uploader: { uppy: Uppy<any, any> },
   progressData: {
-    progress: string // pre-formatted percentage
+    progress: string // pre-formatted percentage number as a string
     bytesTotal: number
     bytesUploaded: number
   },