Implement an upload progress estimation

packages/web-runtime/src/components/UploadInfo.vue

@@ -144,7 +144,11 @@ export default {
     totalProgress: 0, // current uploads progress (0-100)
     uploadsPaused: false, // all uploads paused?
     uploadsCancelled: false, // all uploads cancelled?
-    runningUploads: 0 // all uploads (not files!) that are in progress currently
+    runningUploads: 0, // all uploads (not files!) that are in progress currently
+    bytesTotal: 0,
+    bytesUploaded: 0,
+    filesInEstimation: [],
+    estimatedTime: 0
   }),
   computed: {
     ...mapGetters(['configuration']),
@@ -235,6 +239,15 @@ export default {
     this.$uppyService.subscribe('progress', (value) => {
       this.totalProgress = value
     })
+    this.$uppyService.subscribe('upload-progress', ({ file, progress }) => {
+      const fileInEstimation = this.filesInEstimation.includes(file.meta.uploadId)
+      if (!fileInEstimation) {
+        this.filesInEstimation.push(file.meta.uploadId)
+        this.bytesTotal += progress.bytesTotal
+      }
+
+      this.bytesUploaded += progress.bytesUploaded
+    })
     this.$uppyService.subscribe('uploadError', (file) => {
       if (this.errors.includes(file.meta.uploadId)) {
         return

packages/web-runtime/src/services/uppyService.ts

@@ -16,6 +16,7 @@ type UppyServiceTopics =
   | 'filesSelected'
   | 'progress'
   | 'addedForUpload'
+  | 'upload-progress'
 
 export class UppyService {
   uppy: Uppy
@@ -136,6 +137,9 @@ export class UppyService {
     this.uppy.on('progress', (value) => {
       this.publish('progress', value)
     })
+    this.uppy.on('upload-progress', (file, progress) => {
+      this.publish('upload-progress', { file, progress })
+    })
     this.uppy.on('cancel-all', () => {
       this.publish('uploadCancelled')
     })