I want elements of a webpage dragged&dropped out of the browser window contain arbitrary file objects, which can be dropped to e.g. a file browser.

Having the event.dataTransfer.files contain text and being able to drop it in a text editor works for me by adding the text via setData():

e.dataTransfer.setData("text/plain", "hello world);

This is an example demonstrating drag&drop to an external application (with text only): https://jsfiddle.net/vg129k4z/

However adding files doesn't work this way. I can call e.dataTransfer.items.add() with an file object without errors but with no effect in the external window neither.

Replacing e.dataTransfer.setData() with e.dataTransfer.items.add() (as the documentation suggests) also doesn't work for the text, so I guess, I'm missing something.

This is the modification of the example above adding a file instead of a text: https://jsfiddle.net/3kgw7ba9/

What's the equivalent to dataTransfer.setData("text/plain", "hello world); for files then?