Enabling drag and drop in my CMS (Content Management System)

Question

I'm using Drupal as CMS for my websites and I was wondering if there is a way to enable dragNdrop functionalities to upload images to the website.

I mean dragNdrop images into the back-end (in the browser window).

If not, can I build a desktop application integrating with Drupal ? (such as. Adobe Air application.. or something else..) ?

thanks

Answer 1

Install these

• drupal.org/project/cck
• drupal.org/project/imagefield
• drupal.org/project/dragndrop_uploads

Once installed, Drag'n'Drop Uploads needs to be configured for each Content Type you wish to use, this can be done on the Content Type configuration page under "Drag'n'Drop Uploads settings":

http://[www.yoursite.com/path/to/drupal]/admin/content/node-type/[node-type]

Answer 2

I don't know of a great plugin that seamlessly handles the javascript side of all file drag'n'drop interactions for an arbitrary web application (or I would've used one for our drag and drop stuff).

However, there is a pretty cheap hack you (or any plugin HTML/JS/CSS plugin developer) can use that we took advantage of in FogBugz. If you find the input[type="file"] element on your page and use CSS to make it invisible and the full width/height of your page, this will let you drag'n'drop files onto your browser.

#drop input {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
}

The plugin will obviously have to use JS to manage the add/remove of these styles to the element.

Please don't yell at me for not using the HTML5 File API. It's usable, but pretty up-in-the-air x-browser stability-wise right now. We went w/ the quickest solution that would let us discover whether or not our users found drag'n'drop to be useful.

It works in Chrome and, for single files at a time, Safari. Full details available here: http://www.thecssninja.com/javascript/gmail-upload

Bonus: somebody should really develop a simple little jQuery plugin that finds the first visible input[type="file"] element on the page and applies these styles w/ a nice little "drop here" target and animation.