@uppy/transloadit: Emit assembly progress events (#4603)

packages/@uppy/transloadit/src/Assembly.js

@@ -106,6 +106,11 @@ class TransloaditAssembly extends Emitter {
       ;(this.status.results[stepName] ??= []).push(result)
     })
 
+    this.#sse.addEventListener('assembly_execution_progress', (e) => {
+      const details = JSON.parse(e.data)
+      this.emit('execution-progress', details)
+    })
+
     this.#sse.addEventListener('assembly_error', (e) => {
       try {
         this.#onError(JSON.parse(e.data))

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

@@ -597,6 +597,29 @@ export default class Transloadit extends BasePlugin {
       this.uppy.emit('transloadit:assembly-executing', assembly.status)
     })
 
+    assembly.on('execution-progress', (details) => {
+      this.uppy.emit('transloadit:execution-progress', details)
+
+      if (details.progress_combined != null) {
+        // TODO: Transloadit emits progress information for the entire Assembly combined
+        // (progress_combined) and for each imported/uploaded file (progress_per_original_file).
+        // Uppy's current design requires progress to be set for each file, which is then
+        // averaged to get the total progress (see calculateProcessingProgress.js).
+        // Therefore, we currently set the combined progres for every file, so that this is
+        // the same value that is displayed to the end user, although we have more accurate
+        // per-file progress as well. We cannot use this here or otherwise progress from
+        // imported files would not be counted towards the total progress because imported
+        // files are not registered with Uppy.
+        for (const file of this.uppy.getFiles()) {
+          this.uppy.emit('postprocess-progress', file, {
+            mode: 'determinate',
+            value: details.progress_combined / 100,
+            message: this.i18n('encoding'),
+          })
+        }
+      }
+    })
+
     if (this.opts.waitForEncoding) {
       assembly.on('result', (stepName, result) => {
         this.#onResult(id, stepName, result)