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

Dulci

Answer 1

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.

Colourable

no in gmail if you drag an image into the text, it includes it in the email. I'm not sure how they do it, but it's just a box with a red dot until you send it... – Dulci

Answer 2

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

Barn

Answer 3

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/

Paving

Answer 4

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

Xerophthalmia

Not for me (on a mac at least). When I drag an image to a text field (for uploading an user pic for example) the browser either loads the image as the whole window, or it does nothing... – Dulci

goto a new email and click "attach a file" and then drag a file onto the text that says "No File Chosen" and see if it works. It may be browser specific. – Xerophthalmia

Answer 5

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

Fib

Answer 6

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.

Manouch

Answer 7

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.

Illogic

Answer 8

Check out the SWELL Framework. Its javascript based.

Aenneea