Uploading additional batches with Transloadit is broken allowMultipleUploadBatches: true

[719media]

Initial checklist

• I understand this is a bug report and questions should be posted in the Community Forum
• I searched issues and couldn’t find anything (or linked relevant results below)

Link to runnable example

No response

Steps to reproduce

const uppyInstance = new Uppy({
  allowMultipleUploadBatches: true,
  autoProceed: true,
}).use(Transloadit, {
  waitForEncoding: true,
  assemblyOptions: {
    params: {
      auth: { key: TRANSLOADIT_AUTH_KEY },
      template_id: TEMPLATE_ID,
    },
  },
});

Set up transloadit like this, upload some files, then do it again. You will get an error: tus: neither an endpoint or an upload URL is provided

See community post made by someone else with issue as well:
https://community.transloadit.com/t/getting-error-while-uploading-second-batch-of-files-in-uppy/17201

Isolated this behavior as starting to occur with uppy v4 release

Expected behavior

Upload should work

Actual behavior

Upload fails

[mifi]

I can confirm this is broken, and it only happens with allowMultipleUploadBatches: true.

[elliotdickison]

I'm still getting the exact same error with the same config for @uppy/transloadit@4.1.3

[elliotdickison]

For anyone else running up against this issue, I was able to work around it by disabling autoProceed, setting up a queue with concurrency 1 (p-queue works great), and then waiting on manual calls to uppy.upload() to complete. Obviously this is not ideal, but it allowed me to move on for now. I'm not using the dashboard, not sure how you'd accomplish something like this with the dashboard.

import PQueue from "p-queue"

const uploadFilesQueue = new PQueue({ concurrency: 1 })

const uppyInstance = new Uppy({
  allowMultipleUploadBatches: true,
  // autoProceed: true,
}).use(Transloadit, {
  waitForEncoding: true,
  assemblyOptions: {
    params: {
      auth: { key: TRANSLOADIT_AUTH_KEY },
      template_id: TEMPLATE_ID,
    },
  },
})

// Use this to guarantee that only one batch of uploads will be processed at a time.
function uploadFiles(files) {
  uploadFilesQueue.add(async () => {
    files.forEach(file => uppyInstance.addFile(file))
    await uppyInstance.upload()
  })
}

@mifi Any chance we could get this issue re-opened?

[elliotdickison]

One more datapoint: this only occurs with the Transloadit plugin, not when using the Tus plugin and a custom companion server.

[Murderlon]

Are you on 4.x? Because I just tested this locally and it works.

[elliotdickison]

Package versions are:

"@uppy/box": "^3.1.1",
"@uppy/core": "4.2.3",
"@uppy/dashboard": "4.1.2",
"@uppy/drag-drop": "4.0.4",
"@uppy/dropbox": "4.1.1",
"@uppy/file-input": "4.0.3",
"@uppy/google-drive": "4.1.1",
"@uppy/progress-bar": "4.0.1",
"@uppy/react": "4.0.3",
"@uppy/transloadit": "4.1.3",
"@uppy/url": "4.1.1"

[elliotdickison]

I should also clarify that I'm experiencing this when using Uppy's addFile API in conjunction with Transloadit, autoProceed: true, and allowMultipleUploadBatches: true. I haven't tried via the dashboard.

[Murderlon]

I still can't reproduce with this:

  const uppy = new Uppy({
    debug: true,
    autoProceed: true,
    allowMultipleUploads: true,
  })
    .use(StatusBar, { target: '#status-bar', hideAfterFinish: false })
    .use(FileInput, { target: '#file-input' })
    .use(Transloadit, {
      service: TRANSLOADIT_SERVICE_URL,
      waitForEncoding: true,
      assemblyOptions,
    })

FileInput is basically the tiniest wrapper around directly calling addFile() so it should be the same.

[elliotdickison]

Perhaps I'm not using Uppy in the intended way, but in this particular case I'm actually picking the files from elsewhere (react dropzone from another component) and passing the list of picked files to Uppy via uppy.addFile. Below is pretty close to the exact code that's triggering the error (react dropzone code omitted and some config values redacted). If I call addFilesToUppy a second time before the first batch of files is uploaded then I get an error like [Uppy] [08:55:26] tus: neither an endpoint or an upload URL is provided.

const uppy = new Uppy({
  restrictions: {
    allowedFileTypes: ["audio/mpeg", "audio/flac"],
    maxFileSize: null,
    maxTotalFileSize: null,
    maxNumberOfFiles: null,
    minFileSize: null,
    minNumberOfFiles: null,
    requiredMetaFields: [],
  },
  allowMultipleUploadBatches: true,
  autoProceed: true,
})
uppy.use(Transloadit, {
  limit: 10,
  waitForEncoding: true,
  assemblyOptions: {
    params: {
      steps: {
        ":original": { robot: "/upload/handle" },
        exported: {
          use: ":original",
          robot: "/cloudflare/store",
          credentials: "treefort-r2",
          headers: {
            "Cache-Control": "public, max-age=31536000, immutable",
          },
          path: "fb8161dc-4493-4cf6-9481-8f8b05078f02/uploads/${file.id}.${file.ext}",
        },
      },
      fields: { type: "uploadAsset" },
      auth: {
        key: "<redacted>",
        expires: "2024/12/05 04:49:42+00:00",
      },
      notify_url:
        "<redacted>",
    },
    signature:
      "<redacted>",
  },
})

// This files array is coming from react dropzone
function addFilesToUppy(filesFromDropzone) {
  filesFromDropzone.forEach(file => uppy.addFile({data: file, name: file.name, type: file.type })
}

[Murderlon]

Can you show how you integrate Uppy in your React code?

And unrelated but how are you setting the signature? Are you safely computing it on the server instead of the client?

[elliotdickison]

Yes we generate assembly options and sign them on the server and then send those down to authenticated clients. To isolate the problem here though I copied one of the assembly responses from our server and hard-coded the assembly JSON in my call to Uppy. The code pasted above is much simpler than our React-based, server-integrated Uppy setup but I was able to reproduce the issue with it. Uppy is instantiated at the module level, no React involved with the exception that addFilesToUppy is called from React-land.

[Murderlon]

If you have a reproducible example for me I can take a look.