@uppy/transloadit: fix outdated file ids and incorrect usage of files (#3886)

* Fix outdated file ids and incorrect usage of files

* add e2e test

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

Co-authored-by: Antoine du Hamel <duhamelantoine1995@gmail.com>
Co-authored-by: Artur Paikin <artur@arturpaikin.com>

e2e/cypress/integration/dashboard-transloadit.spec.ts

@@ -2,6 +2,7 @@ describe('Dashboard with Transloadit', () => {
   beforeEach(() => {
     cy.visit('/dashboard-transloadit')
     cy.get('.uppy-Dashboard-input').as('file-input')
+    cy.intercept('/assemblies').as('createAssemblies')
     cy.intercept('/assemblies/*').as('assemblies')
     cy.intercept('/resumable/*').as('resumable')
   })
@@ -42,4 +43,21 @@ describe('Dashboard with Transloadit', () => {
       expect(Object.values(uppy.getPlugin('Transloadit').activeAssemblies).some((a: any) => a.pollInterval)).to.equal(false)
     })
   })
+
+  it('should not emit error if upload is cancelled right away', () => {
+    cy.get('@file-input').attachFile('images/cat.jpg')
+    cy.get('.uppy-StatusBar-actionBtn--upload').click()
+
+    const handler = cy.spy()
+
+    cy.window().then(({ uppy }) => {
+      const { files } = uppy.getState()
+      uppy.on('upload-error', handler)
+
+      const [fileID] = Object.keys(files)
+      uppy.removeFile(fileID)
+      uppy.removeFile(fileID)
+      cy.wait('@createAssemblies').then(() => expect(handler).not.to.be.called)
+    })
+  })
 })

e2e/package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "client:start": "parcel clients/index.html",
     "cypress:open": "cypress open",
-    "cypress:headless": "cypress run --record",
+    "cypress:headless": "cypress run",
     "generate-test": "yarn node generate-test.mjs"
   },
   "dependencies": {

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

@@ -212,17 +212,19 @@ export default class Transloadit extends BasePlugin {
         },
       })
 
-      const { files } = this.uppy.getState()
+      const files = this.uppy.getFiles() // []
       const updatedFiles = {}
-      fileIDs.forEach((id) => {
-        updatedFiles[id] = this.#attachAssemblyMetadata(this.uppy.getFile(id), status)
+      files.forEach((file) => {
+        updatedFiles[file.id] = this.#attachAssemblyMetadata(file, status)
       })
+
       this.uppy.setState({
         files: {
-          ...files,
+          ...this.uppy.getState().files,
           ...updatedFiles,
         },
       })
+
       const fileRemovedHandler = (fileRemoved, reason) => {
         if (reason === 'cancel-all') {
           assembly.close()
@@ -253,7 +255,7 @@ export default class Transloadit extends BasePlugin {
     })
   }
 
-  #createAssemblyWatcher (assemblyID, fileIDs, uploadID) {
+  #createAssemblyWatcher (assemblyID, uploadID) {
   // AssemblyWatcher tracks completion states of all Assemblies in this upload.
     const watcher = new AssemblyWatcher(this.uppy, assemblyID)
 
@@ -497,10 +499,7 @@ export default class Transloadit extends BasePlugin {
       // Set up the assembly watchers again for all the ongoing uploads.
       Object.keys(uploadsAssemblies).forEach((uploadID) => {
         const assemblyIDs = uploadsAssemblies[uploadID]
-        const fileIDsInUpload = assemblyIDs.flatMap((assemblyID) => {
-          return this.getAssemblyFiles(assemblyID).map((file) => file.id)
-        })
-        this.#createAssemblyWatcher(assemblyIDs, fileIDsInUpload, uploadID)
+        this.#createAssemblyWatcher(assemblyIDs, uploadID)
       })
 
       const allAssemblyIDs = Object.keys(assemblies)
@@ -586,16 +585,16 @@ export default class Transloadit extends BasePlugin {
   }
 
   #prepareUpload = (fileIDs, uploadID) => {
-    // Only use files without errors
-    const filteredFileIDs = fileIDs.filter((file) => !file.error)
-
-    const files = filteredFileIDs.map(fileID => {
-      const file = this.uppy.getFile(fileID)
-      this.uppy.emit('preprocess-progress', file, {
-        mode: 'indeterminate',
-        message: this.i18n('creatingAssembly'),
-      })
-      return file
+    const files = fileIDs.map(id => this.uppy.getFile(id))
+    const filesWithoutErrors = files.filter((file) => {
+      if (!file.error) {
+        this.uppy.emit('preprocess-progress', file, {
+          mode: 'indeterminate',
+          message: this.i18n('creatingAssembly'),
+        })
+        return true
+      }
+      return false
     })
 
     // eslint-disable-next-line no-shadow
@@ -630,19 +629,19 @@ export default class Transloadit extends BasePlugin {
       },
     })
 
-    const assemblyOptions = new AssemblyOptions(files, this.opts)
+    const assemblyOptions = new AssemblyOptions(filesWithoutErrors, this.opts)
 
     return assemblyOptions.build()
       .then((assemblies) => Promise.all(assemblies.map(createAssembly)))
       .then((createdAssemblies) => {
         const assemblyIDs = createdAssemblies.map(assembly => assembly.status.assembly_id)
-        this.#createAssemblyWatcher(assemblyIDs, filteredFileIDs, uploadID)
+        this.#createAssemblyWatcher(assemblyIDs, uploadID)
         return Promise.all(createdAssemblies.map(assembly => this.#connectAssembly(assembly)))
       })
       // If something went wrong before any Assemblies could be created,
       // clear all processing state.
       .catch((err) => {
-        files.forEach((file) => {
+        filesWithoutErrors.forEach((file) => {
           this.uppy.emit('preprocess-complete', file)
           this.uppy.emit('upload-error', file, err)
         })