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 and whether there’s a better solution to pursue.
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.
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:
Hi dev.video0!
Did you manage to fix this issue?
I’m encountering the same situation, with the “waitForEncoding: true” set correctly the only transloadit event I receive is “transloadit:assembly-created” at the start of the upload, after that I receive no transloadit events, only the events from uppy “progress” “upload-success” etc.