Multiple image uploads in Drupal with Plupload

media_1357849852382.png

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 …

media_1357849852382.png

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.

media_1357849448426.png
  • 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

media_1357849610622.png

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

media_1357848873640.png
  • 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

media_1357848962030.png
  • Add all the images you want to upload
  • Click Upload

media_1357849060752.png
  • You’ll see a small progress bar:

media_1357849081119.png
  • You’ll see thumbnails of the images:

media_1357849106642.png

Author

  • Steve Burge

    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.

0 0 votes
Article Rating
Subscribe
Notify of
16 Comments
Oldest
Newest
Inline Feedbacks
View all comments
RdeBoer
RdeBoer
11 years ago

Thanks for sharing these great instructions.

Can this be used together with elFinder?

thedavidmeister
thedavidmeister
11 years ago

[url=http://drupal.org/project/plupload]http://drupal.org/project/p…[/url] and [url=http://drupal.org/project/plup]http://drupal.org/project/plup[/url] are two different things. I prefer the former, and it integrates well with [url=http://drupal.org/project/imageeditor]http://drupal.org/project/i…[/url] which is cool for “the complete package”.

Wirka
Wirka
11 years ago

I did all instructions but at the last once “You’ll see thumbnails of the images:”, I can’t see my thumbnails image, the crash image is appear. When I check it on resource, there a forbidden issue to the thumbnails image. What should I do?

Balu
Balu
11 years ago

Since the last Update (7.20) Drupal adds a key to the query string of images in order to avoid ddos attacks. Plup seems to habe problems with that. A short search didn’t bring up any redults. Any ideas?

Balu
Balu
11 years ago

@Wirka:

add: $conf[‘image_allow_insecure_derivatives’] = TRUE;

to your settings.php.

Jamie
Jamie
11 years ago

Having the same problem after 7.2 update. Thumbnails are broken on initial upload but appear if the node is edited. Do not want to add that line to setting.php as it bypasses security fix. Any other ideas?

Ale
Ale
10 years ago

And If I want Use that in a web form created with a my own module, how can I say where ti should be save the images?

Mathukutty P V
Mathukutty P V
10 years ago

Thanks Balu, I did as u said $conf[‘image_allow_insecure_derivatives’] = TRUE; and it worked. I was searching to solve this problem and found this article and your comment. You can check photo menu of [url=http://happpyrays.in]http://happpyrays.in[/url]

Muhammas Sohaib Roomi
Muhammas Sohaib Roomi
10 years ago

This is very useful information. Thanks for sharing.

Muhammas Sohaib Roomi
Muhammas Sohaib Roomi
10 years ago

nice information thanks for effort 🙂

wreckage
9 years ago

Well, I must be extra-stupid, because I still can’t make head-nor tail of these instructions.
1) ‘Plup’ itself is now discontinued and I have installed Plupload, the library and IMCE_Plupload.
2) Under ‘Create a new field’, you have said: ”
Go to Structure > Content types > Manage fields
Choose Image and then choose Plupload as the widget”
This makes no sense to me. Should I be creating a new Content Type first?
3) Next, you have written: ”
Finish creating the field
Go to Content > Add content and create a new content item”
Again.. this makes no sense.
Can you please go through this with concise instructions that are pertinent to the menu items for the terminally stupid such as myself?

Thank-you.

Ashi Baron
Ashi Baron
9 years ago
Reply to  Slartibartfast

Slartibartfast , have a look at the attached photos these may help you
2) Under ‘Create a new field’, you have said:
” see Gallery node screen shot 2 on how to “add a new field” before you can do this you have to Go to Structure > Content types > Gallery Item >Manage fields
Choose Image and then choose Plupload as the widget” as you can see on the second screen shot labelled “Gallery node 2”
I hope this helps you.

Ashi Baron
Ashi Baron
9 years ago

I have followed these instructions and all seem fine except that I am unable to upload images. When I click on “add ” nothing happens and when I drag and drop the photos my website url is replace with the path of the directory where I have the photo. I have attached screen shots to explain my problem, can anyone help me out with this? Thanks

ankit
ankit
8 years ago
Reply to  Ashi Baron

Ashi Baron — Have you got the solution of this problem . I am also facing the same issue…

Could you please help me out with this. … Many many Thanks in Advance…..

16
0
Would love your thoughts, please comment.x
()
x