Drag and drop an image from desktop to a web text editor (implementation in javascript)

Question

I tried to write reasonably short title but i failed i guess..

Hi everybody here's what i'm trying to do: I want to implement a web text editor able to recognize when the user drag a image file over it's editing surface and it automa(gically) starts the upload and insert the image near the cursor position.

In other words i don't want the user to do the usual "insert->image->browse->ok".

Atm i am not very good at javascript ... i know JQuery but i have not a clear idea about how to implement this... i don't know if there's an event handler able to help me in this situation... if not then there should be i think or web apps would miss some kind of interactivity.

I've heard miracles about HTML5 could it help me?

I've seen such things in Google Wave but that surface doesn't seem to be a form field... google lab's black magic i guess....

Thank you in advance.

Answer 1

• There's a SO bounty question about Copy&Pasting images into a WYSIWYG editor (not entirely what you want but maybe also interesting)

• HTML 5 has drag & drop uploads that should be possible to extend into a "drag into web page" functionality - at least almost.