Transfer file to webworker: DataCloneError: The object could not be cloned

Question

I want to transfer a file from a form to a webworker. In chrome i simple can use this code to transfer a FileList-Object:

worker.postMessage(files: array_files);

But with Firefox i get this error:

Transfer file to webworker: DataCloneError: The object could not be cloned.

So i tried to use the Syntax for transferable objects. Something like this?

var post = {files: array_files, file_ids: response.file_ids};
worker.postMessage(post, [post]);

But with that i get this in Chrome

Uncaught DataCloneError: Failed to execute 'postMessage' on 'Worker': Value at index 0 does not have a transferable type.

And still

DataCloneError: The object could not be cloned.

in Firefox.

What is the right way to pass a FileList to a worker?

Answer 1

I don't know how to pass File objects with postMessage, but at the least I can advise that transferable objects do not work in this way. The optional second parameter is an array of the backing ArrayBuffer instances of any typed arrays you wish to pass. So for instance, suppose the message you would like to post is a structured object:

var message = {foo: 'abc', bar: new Uint8Array(...)};

worker.postMessage(message, [message.bar.buffer])

Also notice that passing a typed array to another worker/window as a transferable object makes the transferred array inaccessible from the sending worker/window.