| Drupal

One of our students was setting up a photo gallery and asked:

"I was wondering what module you think would best enable my site members to upload multiple photographs at once."

There are several ways to do this with Drupal. We're going to show you one option that uses a script called Plupload.

Multiple image uploads by default

It is possible to allow a basic multiple image upload feature in Drupal without adding any modules.

When you create a default image field, simply set the "Number of values" to more than 1.

However, it will still be fairly difficult to use. When you come to add the images, the process will be this:

  • Choose an image
  • Click Upload
  • Wait for a new file upload area to appear
  • Choose an image
  • Click Upload
  • Wait for a new file upload area to appear
  • Repeat until done ...

Let's see if we can make that workflow easier for our users by using Plupload.

Install the modules and files

Install and enable these two modules:

We'll now to need to upload the files for Plupload.

  • Extract the files that you just downloaded. You'll get a folder called /plupload/
  • Browse to the /sites/all/ folder in your Drupal site
  • If you don't have a /libraries/ folder here, create one
  • Upload the /plupload/ folder into your /libraries/ folder

Create a new field

  • Go to Structure > Content types > Manage fields
  • Choose Image and then choose Plupload as the widget
  • All of the settings will be identical to a normal image field
  • Finish creating the field
  • Go to Content > Add content and create a new content item
  • You'll see a multiple file upload area as in the image below
  • To upload images, you can either drag files into the marked space or you can click Add
  • Add all the images you want to upload
  • Click Upload
  • You'll see a small progress bar:
  • You'll see thumbnails of the images:

About the author

Steve is the founder of OSTraining. Originally from the UK, he now lives in Sarasota in the USA. Steve's work straddles the line between teaching and web development.