How to know when upload is done with waitForEncoding: true?

Hi,

Is it possible with uppy+transloadit (purely client-side) to somehow know when all uploads have finished and when the assembly is completed?

What I’m trying to do is have a client-side experience where the user can upload a file and optionally stay on the page until the assembly is finished processing. I want to let them know as soon as the upload is finished so they can leave if they want. And if they do stay, let them know as soon as the assembly results are ready. Ideally all client-side by binding to uppy events?

So far, I have managed to do either of these but not both, just by toggling waitForEncoding on the Transloadit plugin.

With waitForEncoding: true I get the transloadit:complete event when the assembly is done, as expected, but it seems like all the “upload complete” events are deferred until then too.

Without waitForEncoding, I get the upload events at the expected time but the transloadit:complete event will obviously not fire.

I’ve had a read over the uppy docs and can’t seem to find a way to do this.

If there is not currently a built-in way to do this with uppy and the transloadit plugin, I was thinking maybe I could leave waitForEncoding false and then manually poll the assembly status myself client-side, but I figured I would check first with the experts to see if there’s an existing solution :slight_smile: and whether there’s a better solution to pursue.

Thanks!

I think the event you’re looking for is transloadit:assembly-executing! That fires when Transloadit tells us it has fully received all files. It can be up to a few seconds after they finished from the client-side perspective because they have to travel through Transloadit’s infrastructure, but it’s the closest thing available.

Hi, thanks for the quick reply!

I did actually try transloadit:assembly-executing but I can’t seem to get it to fire. I’m wondering if something is wrong with my usage:

// "@uppy/core": "^1.12.2",
// "@uppy/react": "^1.10.2",
// "@uppy/transloadit": "^1.6.5",
// "@uppy/tus": "^1.7.3",

const id = 'image'; // there is another uploader on the page with id video
const uppy = new Uppy({id, debug: true});
const params = {/*transloadit params*/};
const fields = [/*meta field names*/];
uppy.use(Transloadit, {
  params,
  fields,
  waitForEncoding: true, // to enable transloadit:complete event
  waitForMetadata: false, // tried with this true too but no diff
});
uppy.addFile(watermarkFile);
uppy.addFile(imageFile);
const meta = {/*metadata*/};
uppy.setMeta({
  ...meta,
  watermark: watermarkFile,
  image: imageFile
});
uppy.on('*', function () {
  console.log('uppy event', this.event);
});
uppy.once('transloadit:assembly-executing', (assembly) => {
  // this never seems to fire
  // as the assembly_uploading_finished websocket message never seems to arrive
  // https://github.com/transloadit/uppy/blob/6f5de4211ca9c2ea9bf8da34b80a757c31773c63/packages/%40uppy/transloadit/src/Assembly.js#L103-L105
  console.log(assembly);
});
uppy.once('transloadit:complete', (assembly) => {
  // this does fire as expected
  console.log(assembly)
});
uppy.upload();

Looking closer, it seems that it never fires because the underlying assembly_uploading_finished message is never received on the websocket.

The only websocket messages I see in the Network tab are:

assembly_connect
assembly_result_finished (for each step)
assembly_finished

I tried binding to the state-update event and I see that the assembly exists in plugins.Transloadit.assemblies and has ok set to ASSEMBLY_EXECUTING before the websocket connects.

I managed to get a hack kind-of working by looking for the first state-update that has .ok == 'ASSEMBLY_EXECUTING' but I realize there is another problem for my use-case when using waitForEncoding: true which is that I no longer get upload-progress events during the uploading. They do fire but it seems they are deferred until after the uploading has finished (?)

Here’s a log snippet that shows the order of events:

07:52:19.656 app.js:486 ******* upload
07:52:19.656 app.js:495 state-update (nothing in plugins.Transloadit.assemblies)
07:52:19.657 app.js:495 state-update (nothing in plugins.Transloadit.assemblies)
07:52:19.657 app.js:495 state-update (nothing in plugins.Transloadit.assemblies)
07:52:19.658 app.js:486 ******* preprocess-progress
07:52:19.658 app.js:495 state-update (nothing in plugins.Transloadit.assemblies)
07:52:19.659 app.js:486 ******* preprocess-progress
07:52:19.659 app.js:495 state-update (nothing in plugins.Transloadit.assemblies)
07:52:19.661 loggers.js:29 [Uppy] [07:52:19] [Transloadit] Create Assembly
07:52:20.661 app.js:495 state-update (nothing in plugins.Transloadit.assemblies)
07:52:20.661 app.js:492 state-update ASSEMBLY_EXECUTING 34109139229840228240c59242fed718
07:52:20.662 app.js:486 ******* transloadit:assembly-created
07:52:20.662 loggers.js:29 [Uppy] [07:52:20] [Transloadit] Created Assembly 34109139229840228240c59242fed718
07:52:20.662 app.js:492 state-update ASSEMBLY_EXECUTING 34109139229840228240c59242fed718
07:52:20.662 app.js:486 ******* preprocess-complete
07:52:20.663 app.js:492 state-update ASSEMBLY_EXECUTING 34109139229840228240c59242fed718
07:52:20.663 app.js:486 ******* preprocess-complete
07:52:20.679 app.js:492 state-update ASSEMBLY_EXECUTING 34109139229840228240c59242fed718
07:52:20.679 loggers.js:29 [Uppy] [07:52:20] [Tus] Uploading...
07:52:20.680 app.js:492 state-update ASSEMBLY_EXECUTING 34109139229840228240c59242fed718
07:52:20.680 app.js:486 ******* upload-started
07:52:20.682 app.js:492 state-update ASSEMBLY_EXECUTING 34109139229840228240c59242fed718
07:52:20.682 app.js:486 ******* upload-started
07:52:20.818 loggers.js:29 [Uppy] [07:52:20] [Transloadit] Socket is ready
07:52:20.903 app.js:492 state-update ASSEMBLY_EXECUTING 34109139229840228240c59242fed718
07:52:20.904 app.js:486 ******* transloadit:result
07:52:20.941 loggers.js:29 [Uppy] [07:52:20] [Tus] Storing upload url
07:52:20.941 app.js:492 state-update ASSEMBLY_EXECUTING 34109139229840228240c59242fed718
07:52:20.942 app.js:492 state-update ASSEMBLY_EXECUTING 34109139229840228240c59242fed718
07:52:20.943 app.js:492 state-update ASSEMBLY_EXECUTING 34109139229840228240c59242fed718
07:52:20.943 app.js:486 ******* progress
07:52:20.944 app.js:486 ******* upload-progress
07:52:21.014 loggers.js:29 [Uppy] [07:52:21] [Tus] Storing upload url
07:52:21.014 app.js:492 state-update ASSEMBLY_EXECUTING 34109139229840228240c59242fed718
07:52:21.015 app.js:486 ******* upload-progress
07:52:21.066 app.js:486 ******* upload-progress
07:52:21.145 app.js:486 ******* upload-progress
07:52:21.360 app.js:486 ******* upload-progress
07:52:21.361 app.js:492 state-update ASSEMBLY_EXECUTING 34109139229840228240c59242fed718
07:52:21.361 app.js:492 state-update ASSEMBLY_EXECUTING 34109139229840228240c59242fed718

I’m not sure if this could be somehow related to the other question I posted here:

Is there something I should change about my usage or is maybe a bug here?

Whew :slight_smile: thanks!