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.

Get in touch with us

Tell us about your project or drop us a line. We'd love to hear from you!