HTML 5 Drag and Drop

This is a demo page to demonstrate outbound drag and drop using Firefox.

It will also work with Chrome, but it will show different effects(!), as the communication with Thunderbird is way different - so when testing for Firefox/Thunderbird interaction, don't use Chrome...

It does not work with MSIE (nothing happens) or Edge (drops the "drag me" image to the desktop, not the intended jpg). Haven't investigated further.

I have no idea whether it works with Opera or Safari (untested).

How to test?

If you drag the icon below to your desktop, you'll receive (if it works) a .jpg file named picN.jpg (pic0.jpg to pic9.jpg) with a random flower (or cat) content. If it does not work, you'll receive just the icon as BMP file (because that's the default action on modern browsers: just copy the visible image)

The interesting bit is what happens if you drag this to the "attachment" section of a "new mail window" opened in thunderbird - it will appear to be working (namely, a "pic.jpg" shows up), but the moment you click on "send", thunderbird will complain that the file has disappeared.

I think what happens is this:

So, I'm not sure what the standard says SHOULD happen here, but either program could be changed to make it work - either "delay deletion in firefox until exit" (what if firefox is closed before thunderbird wants to send?) or thunderbird should copy-in received drag and drop attachments to its own temp directory (with a temporary name! thunderbird and firefox share the $TEMP directory - on windows, %user%\AppData\Local\Temp\).

why does it work with Chrome?

Chrome-to-Thunderbird only submits the URL, so the file is only downloaded from the server when you press "send". While this works in this case, it's not perfect either - it is not transmitting the filename-to-be, so the filename used as attachment is the URL without http:// - not so nice either, especially if the URL should not be seen elsewhere.
animated GIF courtesy