by Matt Kleve on July 11, 2011 // Short URL

Module Monday: Plupload integration

Importing and Uploading Multiple (Bulk) Images to Your Drupal Site

Bulk image handling can be a very common pain point for a Drupal site administrator. Sure, to incorporate a few photos into a node's body, there are great tools like the Insert that work out quite well. For larger numbers of images that live in imagefields, projects like the Imagefield Import module start to solve the problem, but the workflow can leave a lot to be desired if if you're managing uploading large numbers of images on a daily basis. To top it all off, rolling your own solution is incredibly complex due to numerous of cross-platform browser issues.

The Plupload integration module improves the image uploading process by automatically creating nodes with imagefields for each file you upload. It automatically handles bulk uploading across all modern browsers, and degrades to standard form elements on older ones. Finally, it's flexible enough that with some fairly simple code of your own, you can extend its functionality and customize its image handling process to match any workflow you need.

Screenshot of the upload widget on the page

Although the module provides Drupal integration and a some administration pages, the bulk of the work is being done by the the cross-platform Plupload project. Plupload is a GPL-licensed multiple file uploading tool that can includes native widgets for a variety of platforms, including HTML 5, Flash, Silverlight, and others. It auto-detects the capabilities of the user's browser, selecting the best widget for their platform and falling back on standard HTML upload fields if no good matches can be found. Because Plupload is a third-party library, you'll have to first download and install the Drupal module, then download the plupload library and extract its files into the /sites/all/libraries directory on your Drupal site.

Configuration of the Drupal 6 version of the module is pretty straight forward; a settings screen allows an administrator to determine the type of nodes that will be created when uploading, and the "target imagefield" that the images themselves will be placed in.

Screenshot of the Plupload Integration Module Settings Form

Once it's set up, you begin can uploading files in bulk at the module's hard coded URL -- /file-plupload. If the widget is being loaded on a modern browser using HTML 5, you can simply drag and drop files from your desktop into the browser. Clicking "Start Upload" will begin the process of uploading the images from your computer to your web server, and automatically create a node for each image.

Screenshot of the upload widget in action, drag and drop images into the browser to queue them up for upload

The Drupal 6 version also exposes hook_plupload_node_presave() and hook_plupload_node_postsave(), which allow great flexibility to a developer willing to write a small module to alter the node that's being created. Presave would be a great opportunity to add taxonomy terms to the image nodes, or pull metadata out of the image file and populate other fields on the node. Postsave could add the node that was just created as a node reference on a "gallery node" to organize uploads into different image gallery.

If you're using or upgrading to Drupal 7, keep in mind that the D7 version of Plupload is a stripped down "API only" module. While it gives Drupal access to the Plupload widgets and APIs, it does not provide any user-facing interface. Other modules like Media use it as a helper module to improve their own uploading workflow.

Matt Kleve

Senior Developer

Want Matt Kleve to speak at your event? Contact us with the details and we’ll be in touch soon.

Comments

Anonymous

D7?

When we will have articles solely written with Drupal7 on mind?

Reply

Anymouse

Are we nearly there yet?

Probably when D8 is released & maintainers have made the D7 versions work in the correct D7 ways :^)

Plupload is in beta for D7, so I guess Lullabot can't recommend it yet, it will be great when it works smoothly with Media module in D7.

Reply

mattk

Everything will be all about

Everything will be all about D7 when the lines on this graph are a closer, http://drupal.org/project/usage/drupal

The latest trend show it's headed that way, but there are plenty of D6 sites out there (new and old) that are still serving their purpose well.

It's tough to talk about both with this module, since the D7 version is completely different (arguably less end-user-useful) than the D6 version.

Reply

Anonymous

Chicken or the egg

You are relying on the "chicken or the egg" problem. Focus your articles on D7 and help with getting those lines closer on that graph. Or don't help with that and hide behind the graph!

Reply

Julian Pustkuchen

Great idea!

Really great module idea!

It's very nice to have such a solution for Drupal 6. When do you think the first final might be released?

Reply

mattk

When it's ready. :-)

An actual release beyond dev is being held up by some isssues that are currently in the queue. Specifically this one http://drupal.org/node/845678

Without that fix, this module probably shouldn't be deployed for untrusted users to have the ability to upload images.

Reply

mattk

It's always "what about IE"

It's always "what about IE" isn't it :-)

If the browser doesn't support the HTML 5 that's needed for the whiz-bang things like drag and drop (Think IE) It won't use them and the plupload widget should degrade to the flash runtime.

A chart of browser capabilities for the plupload widget is here: http://www.plupload.com/

Reply

Sébastien Lucas

good but only mappable to one file field ?

I've just tested. Thanks for you post.

It's a fine module but I see one drawback, It allow only to point the uploaded file to one file field. It doesn't provide different url for different file fields.
I could use it on one of my site, but only for my main content type and not the other one, a bit a shade.
Would it exist a mean to bypass this?

Other subject: you speak of a hook that'll permit to populated cck field with the content of the metadata of the images. Do you know a drupal or php mean to extract image meta datas (iptc, exif ) of an image file?

Thanks

Reply

mattk

hook_form_alter to the rescue

To be able to easily change the mapping of the node that's created, a small module that uses hook_menu_alter() to changes the input form and add a drupal form that sets the "plupload_import_field_type" variable would be handy to allow administrators to easily add images to different fields per batch upload.

It's done in a fairly drupally way that doesn't "hack" the module.

As for file metadata, I don't recall off the top of my head, but take a look at the imagefield_import module, I know it includes stripping metadata out of a image, and adding it to a node.

Reply

rapsli

How cool. I actually built a

How cool. I actually built a plupload integration over a year ago for a client (http://www.rapsli.ch/plupload). It was though not very flexible and due to cost constraint never made it out into the open. Glad to now see this project moving on. I think plupload is a really cool piece of software.

Reply

JJ

Is this module ok to use for a production site?

Thanks for Module Monday - I also look forward to learning about some new module.
But I see this module only has "Dev" release for Drupal 6 & 7 and only a beta one for Drupal 7 - Is it okay to use them in a production environment?
It is an frustrating thing for me to try and decide if a module can be used on production site or not? It is one of the reasons that I've not upgraded to Drupal 7 yet as most of the modules seem to only have "Dev" releases.

Reply

mattk

Understood.

Yup. It can be frustrating evaluating the status of modules. The issue is that to different developers "dev" means different things. If you dig into the plupload queue and find http://drupal.org/node/845678 its an issue that is holding up a "supported release."

Can you use dev in production? Answering the question "why is it dev" is important.

Reply

Anonymous

media

In D7, I've installed media module along with puplod integration, but didn't find any widgets on this type for no cck field.

Reply