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

Dropping a file into a normal input field will copy the local path to the image into the input field, however this is worthless to you since the .value property of an <input type='file'> tag is readonly for security reasons.

You will notice that gmail only allows you to drag / drop an image (for upload) to the <input type='file'> input and not any other field.

I think what you want to ask is "how do I style a <input type='file'> tag like google", which is a whole other topic.

EDIT: Ok in IE you cannot drag a file into a <input type='file'> tag

Answer 2

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.

Answer 3

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

Answer 4

the best way to get this done is to make a Adobe AIR standalone like the photo uploader for https://www.photoshop.com/express

---

you can find some great information at this post: http://devzone.zend.com/article/3650-Desktop-Image-Uploaders-Using-Adobe-AIR-and-JavaScript

Answer 5

I think I have a way around the annoying as hell FF3 local filesystem issues but I need a piece of javascript to test with. How do I read the local file path from the file upload form? Please, stop with the 'flash is a solution'. I'm a Flash developer by trade and even I don't think it's a good solution.

Answer 6

Do you by chance have this Firefox extension installed?

http://www.teslacore.it/wiki/index.php?title=DragDropUpload

I would be surprised if there is a solution without having to install an external plugin or extension. As someone mentioned that would be a security issue. A web site would be able to grab files from people's computers and upload them without their knowledge.

Answer 7

Check out the SWELL Framework. Its javascript based.