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.
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.