Drag and Drop Image Uploading using Deco

After Alexander Limi showed me some demo's of the drag and drop upload functionality added in the new beta versions of Firefox 3.6 I just had to try to add it to the Deco UI. The demo's used a fixed area where images can be dropped. In Deco you want to specify exactly where you want the images to be and not an area. To determine where to drop images Deco uses the mousemove event, but this event is not available when the window doesn't have focus (like with dragging images into a browser) so some code needed to be rewritten to use the dragover event.

Another issue was the fact the demo's use the sendAsBinary method of the XMLHttpRequest object. This method only sends the binary data itself and adding other fields like filename is not possible. I fixed this issue by creating a form request in javascript so I can add multiple fields like filename etc. All the sourcecode can be found in the Plone SVN.

This demo shows a Finder window on the left with some pictures taken at the Plone Conference 2009 and the Deco UI on the right with some example text. First a single image is dragged into the browser. The image is put on the dropped location and a black mask and loading icon is added to the image. The image is now being uploaded to the server and once ready the server returns the url and some more properties in a json structure. The correct source url is then applied to the image object.

Multiple files is also supported. Each image will be uploaded to Plone and becomes a sepparate tile. After the images are uploaded the images can be rearanged using the standard drag and drop functionality of Deco.