Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

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

share|improve this question
    
What are you uploading the images for? Is it something that your theme will reference, or something that you want users to have access to and to be able to re-use images that you already posted in their own content? –  Purcell Oct 21 '10 at 18:49
add comment

2 Answers

up vote 2 down vote accepted

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]

share|improve this answer
    
@treynt thanks, does it only work for images, or also for videos and other files ? –  Patrick Oct 22 '10 at 10:41
    
It supports any file, specifically any file or image supported by imagefield and filefield. –  troynt Oct 22 '10 at 22:06
add comment

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.