Drag and drop image into a web form

Question

We have a web page (HTML javascript and PHP mostly) that allows a user to upload an image. We have the normal browse button, and it works fine. However, we want to add the functionality to drag and drop an image into the text field instead.

gmail allows you to do this in their mail app, so it's possible. The only way we've thought of to do it is to create a java applet that does all of this, but that ends up being very messy.

Has onyone done this? how does it work?

Edit: I'm using firefox on a Mac. Most of my users will be probably be using IE on Windows.

thanks

Answer 1

You can do this in XUL (Making it effectively a Firefox-only solution) or in ActiveX (A IE-only solution).

Answer 2

This is an old question, but it came up in my search results.

So for reference, use the HTML5 file classes and Drag and Drop.

Article with details here: http://www.html5rocks.com/en/tutorials/file/dndfiles/

Answer 3

I've tried dragging an dropping and image their editor. It will pick up the path if the file is on a web page, but if it's on your local drive, the path will be "file://c:....", which will not be uploaded with the message and will end up as a broken image.

Browser don't have access to the local file system, for security reasons, so I doubt this would ever work the way you describe.