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:

Firefox downloads the image correctly, and puts to $TEMP
Firefox signals thunderbird "hey, there's a drop event for you!"
Thunderbird receives the event, takes note of file type, file name, file size (note that the kbyte values shown are correct), displays it in the attachment pane, and ACKs reception to Firefox
Firefox declares "success!" and deletes its temp file
... when Thunderbird wants to access the attachment for sending, the temp file is gone

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 flamingtext.com.