Having some functionality where the user could select multiple images in the media browser and implement a jquery slideshow would be pretty huge.

Can anyone help outline how something like that could be implemented with the media module? I've been familiarizing myself with the code and might like to take a whack at something like that.

#36 951004-enable-multiselect.patch747 bytesDave Reid
#21 new.png131.69 KBhk0023


The Media Gallery looks really interesting. I'll definitely check that out.

Just a note that the URL for the rotating_banner project above is incorrect.

Status:Fixed» Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

Title:Media Browser - Multiple select with ctrl or shift click > Implement Jquery slideshowMedia Browser - Multiple select with ctrl or shift click
Status:Closed (fixed)» Active

I hope this is not a hijack ^_^ but I'm still really interested in a multiple select (and submit) option.
There are a lot of people searching for something like this. Media_Gallery offers this function but I don't want the Gallery.
I would like this option simply for a Media field with multiple items. Currently we have to click "Add new item" -> "Select media" etc. every time, this is very much work for 100 files.

With plupload I can upload a lot at once (although not through the node/edit form).
I'd like to be able to just select multiple files and them to the media field at once.

Or is this something for media_brower_plus ? (But it's a bit of an unclear mess for me..)
Isn't it possible to use the code of Media_Gallery?

Title:Media Browser - Multiple select with ctrl or shift clickAllow selecting of multiple media items for a multi value media field in the same dialog

Retitling to better represent the request.

I am trying to implement this, but I ran into a problem. My plan is to change Media's Multimedia asset field that way, that is supports this.

I was modifying js code that handles this things. I managed to recognise multivalue field and to send multiselect=true to media browser. That allows user to select multiple items, which are then returned to JS as an array.

My intial plan was to clone field items, which would allow me to add all assets from array. I would then just correct IDs of elements. It turned out that this does not work, as Drupal expects AJAX call for every item that is added.

Second idea was to call that AJAX call from JS code, to create all items I need. I was trying $(add_item_button).trigger('mousedown'), which actually adds another item, which is done asynchronously. The problem is, that I am not able to populate new items with assets from array, since that data is gone when AJAX call is completed.

Any suggestion how to solve that?

I also described my problem in forum: http://drupal.org/node/1138990

I've pushed my work to a sandbox: http://drupal.org/sandbox/slashrsm/1144920. Changes were made to 'javascript/media.js' only.

Hey slashrsm, I have a very ugly solution for this based on your trigger. I've used a timeout to wait for the new item to be added. I think it can be optimized alot, maybe a totaly different approach all together but I need this working in a week so I'll do it with this, for now.
I'm also not too experienced with the git yet, so I'll just post the code here that I made in media.js at the place you had the trigger function.
Download this js for the timeout function (doTimeout): jQuery doTimeout (jquery.ba-dotimeout.js) and add the following line to media.module (line 739) to load it:

$path . '/javascript/jquery.ba-dotimeout.js' => array('group' => JS_LIBRARY),

(more info on the function here: Ben Alman doTimeout)

Here's the code I made (yes quite silly, but it works! :P):

var a = 0;
var b = 0;
$('.field-add-more-submit', $(parent).parent()).trigger('mousedown');
$('body').ajaxComplete(function() {
if (a % 3 == 0 && b == 0) {
$('body').doTimeout( 300, function() {
var n = $('.field-multiple-table tr').last();
$('.media-widget .fid', n).val(mediaFiles[b].fid);
$('.media-widget .preview', n).html(mediaFiles[b].preview);
$('.media-widget .remove', n).show();
a = 0;
} else if (b > 0 && b < mediaFiles.length-1) {
$('body').doTimeout( 300, function() {
var n = $('.field-multiple-table tr').last();
$('.media-widget .fid', n).val(mediaFiles[b].fid);
$('.media-widget .preview', n).html(mediaFiles[b].preview);
$('.media-widget .remove', n).show();
if (b+1 < mediaFiles.length-1) {

The reason of the vars a and b is cos the first time you click 'add item', there are 3 ajax calls being made, so you need to wait till the third one to fill in the fields. Also the parents in the trigger don't work after the first one, so had to change that. Also had to change the n var to find the right tr element for some reason.

Let me know if it works for you, I haven't tested it yet on a clean install.

It works a bit, thanks you two. I used the git version (#7) of media with your changes (#8).
(Though not very clear what to do and added the $path to line 759, not 739)

It only manages to add 3 items at once, also if I add 4 or more.
Side effect: The plupload module started to show up! Uploading multiple items worked, but sending them didn't.

Please if you have anymore progress let us know! Or how I can add more than 3 items at once. This is such an important feature.


I edited the media.js code sample of sanderjp in #8, so that it works with unlimited items. It even works with plupload (uploading multiple files).

It's a very bad solution, because the process of adding items will increase per extra item (i*1000), and your computer needs to be powerful enough. But I needed a solution 2 weeks ago, so I'll take it for now.

$('.field-add-more-submit', $(parent).parent()).trigger('mousedown');
var x = 1;
$('body').doTimeout( i*1000, function() {
  var n = $('.field-multiple-table tr').last();
  $('.media-widget .fid', n).val(mediaFiles[x].fid);
  $('.media-widget .preview', n).html(mediaFiles[x].preview);
  $('.media-widget .remove', n).show();

Hi, I made a module which resolve this issue.

If it is usable, I would like to create a patch to media modul.

I would love to see that integrated in media module instead of media_gallery. Being able to select/upload many medias at once and associate them to a node is definitely an expected behavior.

Any "official statement" about this?

I tried this and It still only adds one of the selected images.

dark11star: thanks, but just a question: Did you click "Select media" or "Add another item" button?

If you used "Select media" please try "Add another item" button instead of it!

Select media for one image, and add another item for add multiple images.


Very interested by this feature, I'd like to download it but 'git clone etc' doesnt mean anything for me.
Is there a possiblity to simply get your module somewhere?

pp's project is a sandbox. Sandbox cannot have any releases you could download, so you must use git.

Check: http://drupal.org/project/1244926/git-instructions

This would be a great feature to add. It looks like the maintainers are now focusing on the 2.x branch, we should probably try to produce a patch for that version.

I don't know why the original media file selector widget still pops up instead of plupload. Is anyone else having this issue?

Sorry, didn't read the comments above. Need to press the Add Media button instead of Select Media.

new131.69 KB

However, I have another problem. Once I have uploaded one item, whenever I press the select media or the add another item again, the formatting of the popup widget is all weird.

Hi hk0023, look at #1228790: Popup browser broken when using "Add another item" on multiple field, there’s a patch in that issue that fixes the last bug you mentioned.

Thank you dboulet, everything's working fine now.


Version:7.x-1.x-dev» 7.x-2.x-dev

#1186516: Allow multiple file upload via plupload on field widget. was marked as a duplicate, so I'm going to watch this issue now



I would also like to see this feature becoming part of Media. I am trying to use Media not as a generic file organizer but as a means to manage multi-value images within a single node.

Is the sandbox project in #12 working with media-7.x.2.x ?

Please don't use crappy 1990's plupload. Who the hell uses flash to upload files? It's almost 2012! HTML 5 is not new anymore.

Use the multiple attribute that ALL browsers (except IE 8-) support. And if the browser doesn't, do whatever you want: plupload, swfupload, other abominations.

@rudiedirkx can you show me an example which I can select(not upload) multiple files?




@moonberry, @neurojavi: Please do not post "subscribe" comments. Use "Follow" button instead.

More info: http://drupal.org/node/1306444

Status:Active» Needs work
new747 bytes

Small patch enables the 'multiselect' flag to be set correctly in the Media browser. Pretty sure we have more work to do though.

Marked #1489370: no multiupload in node image fields as a duplicate of this issue.

Hi All.

Currently i use this Modules:

  • Media 7.x-1.0
  • Media_Browser_plus 7.x-1.x-dev
  • Plupload integration 7.x-1.0-rc1
  • Media and Plupload connector (Sandbox project from user "pp" in #12)

I have my Contentype with image field and the Media Plupload file selector - upload is unlimited.

So.. when i create a node and come to my media image-field widget. I have the button "select media".
I click it and i become my media_browser_plus with plupload widget. OK. I use any pictures. When i click continue - no image thums are in my media-field widget. The Button "add another item" appears instead of "select media". When i klick this Button - its the same problem - no images thumbs.
It doesn't works :-( ...

Any here the same problem?

@Bernsch This patch is for 7.x.2, not 7.x.1. Please read the ticket details.

ok, i test this one with this modules:

  • Media 7.x-2.x-dev (from 19. April 2012) and the Patch from #36
  • Media_Browser_plus 7.x-2.x-dev (from 25. Feb 2012)
  • Plupload integration 7.x-1.x-dev (from 3. April 2012)
  • Media and Plupload connector (Sandbox project from user "pp" in #12)

I become a multiselect' flag. I have the button "select media".
I click it and i become my media_browser_plus with plupload widget. OK. I use any pictures. When i click continue - no image thums are in my media-field widget. The Button "add another item" appears instead of "select media". When i klick this Button - its the same problem - no images thumbs!

My question is: "What do i have to do to upload pictures as multiupload in a node image field" ?????

Marked #1406310: Batch uploading from content edit form as a duplicate of this issue.

Marked #1489060: Plupload on the node edit page as a duplicate of this issue.

I'm working on a generic, stand-alone Media selector widget module that alters the 'add more' button to popup the Media Browser, and then adds the selected items to the field. It's still missing some work (doesn't work with a fixed >1 cardinality, not unlimited; doesn't work with single-value fields; removing media could have a better UX, ...).

In theory similar to what #6 and #8 is talking about, except with a custom ajax-callback and ajax-trigger so it no longer has to trigger mousedown events to fire the ajax event. The AJAX-callback alters the form and form-state to include the newly selected files.

I'll polish it up some more and then publish a sandbox tomorrow. (It currently needs a patched Media, because the Views based tabs doesn't support multiselected, yet)

Great! Can't wait to see this.

Okay, here's the first draft of the module I've done to add the functionality. Use the new 'Media Multiselect' widget for your fields. Any cardinality besides unlimited will result in a standard Media widget.

If you want Multiselect to work properly on the Views-based tabs, you need to patch Media with the patch provided by the module.

I does work kinda like the 'plupload integration' sandbox, except that it tries do less trickery like hiding the built in 'add more' button and replacing it with it's own, then triggering mousedown-events on the original, etc.
It could potentially be benifitial (as in, less code and trickery) to adapt the way that 'plupload integration' sends the new file ids over, except then you wouldn't know which were just added, so it can't add the 'ajax-new-content'-wrappers to enable show/hide effects.


@fangel: do you think your module can also address this issue #1139266: specify directory path ?

Andrea C: Possibly, but I don't see why that shouldn't be solved in Media on a per-field basis.

@fangel: what people is afraid of is that, also if you set a folder for images uploaded in a field, after a while you can have thousand of files in one folder, and this is something not desirable from a site or system administrator.
It would be nice to keep all the images "attached" to one node in a dedicated subfolder of the folder choosed on a per-field basis.
The subfolder could be named using a token variable or date-time of node creation

Andrea C: I completely agree. But I believe it should be solved per-field not per-widget. And to support multi-select for inputs, you only need to change the widget, which is what my, and all the other attempts in this issue, have done.

Hence my "It should be solved in Media on a per-field basis".

Hi fangel,
Thanks for your time and answer.
I'm not so technical to understand how drupal works in deep.
I'm just one of those people who's not able to program on Drupal and wait for a solution to easily create an image gallery like the module Media_Gallery seems to do. The big problem is that all images are stored in the same folder.
I was just hoping your patch could be helpful for that.

Andrea C: No problem. In case you're interested (and it might help explain why the change should be preformed elsewhere), here's the 3-line explanation to the Drupal Field system.

There are fields. Fields is is what contains the data, and governs things like "which file extensions are allowed", "maximum files size allowed" etc. This is where "which folder should the images be stored in" is relevant.

Then there are widgets. Widgets controls how you input data into the field. So if you selected one file at a time, or multiple files at a time is determined by which widget you use. The input-method doesn't have any control over how the field chooses to store the data that is input.

Lastly there are formatters. Formatters is what takes the data from the field and displays it to the user. This is where you control stuff like 'what size to display the user', 'should clicking on the images open them in larger formats', etc.

So when I say that changing the directory the files is stored in should be done on a per-field basis - because fields is what stores the data - and not on a per-widget basis - because widgets only control how you input the data - I hope this now makes sense to you.

@fangel: Thanks again. Your disposability to explain is really appreciated.

#50 |Posted by Andrea C

...and wait for a solution to easily create an image gallery like the module Media_Gallery seems to do. The big problem is that all images are stored in the same folder.

The MODULE Media Gallery Extra provides additional features and improvements for the Media Gallery module. Also including patterns (tokens) and root directory in the file upload directory where gallery media will be stored. :-)

Thank You Bernsch, I will continue the discussion in the dedicated issue #1139266: specify directory path

Marked #1692926: Media Browser not able to show multiple fids as a duplicate of this issue.

Hi ,

Thank you for linking my post to this post but i was referring to the code in media/includes/media.browser.inc which i thought was not working as written in the comments. I do not want any additional dialogs in the UI but i am more interested in how backend can handle taking multiple "fids" and presenting them. It is already said the comments in the code i pasted below that if one or more files have been selected, the files can be handled.

I am pasting some of that code below. I thought i would mention it more clearly

// If one or more files have been selected, the browser interaction is now
  // complete. Return empty page content to the dialog which now needs to close,
  // but populate Drupal.settings with information about the selected files.
  if (isset($params['fid'])) {
  #  $fids = is_array($params['fid']) ? $params['fid'] : array($params['fid']);
    if (!is_numeric($fids[0])) {
      throw new Exception('Error selecting media, fid param is not an fid or an array of fids');
    $files = file_load_multiple($fids);
    foreach ($files as $file) {
    $setting = array('media' => array('selectedMedia' => array_values($files)));
    drupal_add_js($setting, 'setting');
    return $output;

Do you think the above code (which was written in 7.1.2 version) cant handle multiple files ?

Do you know if there are any changes in the -dev version that can handle multiple files in back-end?

Many Thanks,


Is there a working solution with even basic functionality to this yet?

@juves See #45

I have a sandbox-module that implements most of the ideas I've had while thinking of how to solve the multi-select issue. It's located at http://drupal.org/sandbox/fangel/1652676.
Note: it works best with a patch applied, and only works for unlimited-cardinality fields.

There is also a list of modules that implement this on Plupload's integration project page. It would be better to have this implemented in Media, but should work until it is not.

@Andrea C : posted a patch here http://drupal.org/node/1776300#comment-6534426

I am not sure if anyone has taken a look at this or not, but the module, plup is a very easy to use solution for multi-image uploading. It even has drag n' drop functionality built in. I have looked through all of the alternatives out there and either I'm missing something, or this is definitely the best option available.

Priority:Normal» Major

Such is the state regarding this issues in this contribution:
Allow selecting of multiple media items for a multi value media field in the same dialog

Which solution possibility should I pursue?
This one --> http://drupal.org/sandbox/fangel/1652676
Or there are other solving approaches or patches?

The multiupload problem in the media module is somehow a bit confusing...

http://drupal.org/sandbox/fangel/1652676 is quite good, i run it myself in a production site:)

@Bernsch: I agree that this is a major priority issue.
Until a possible solution comes, I'm using Plup module: http://drupal.org/project/plup
I saw rdworianyn has already mentioned it, I agree with him, this is a great module, and provides a really comfortable UI: it provides the abilitiy to drag'n'drop the picture to its appropriate position when reordering, and shows a small but visible delete icon in the top right corner of every images, which is much nicer than the regular "Remove" buttons...
I think even Media module should learn from this module's great solutions. :))

Firstly I tried FileField Sources Plupload: http://drupal.org/project/filefield_sources_plupload, this is also a great module, but unfortunately one of my sites, it doesn't work correctly, the form doesn't get refreshed on the client side after uploading (maybe in connection with jQuery Update (the fresher jQuery) or Field group's accordions or I don't know: I couldn't trace the problem's source).

rootatwc: Sorry to bug you, but since you "admit" to using my sandbox module, do you think I could get you to help review the patch in this issue: #1848506: Media Browser parameters reset after AJAX pagination - it prevents multi-selecting in the Media Browser on anything but the first page. (I'll reroll the patch later today, since it failed testing because it couldn't apply)

@fangel i have seen the issue, but didnt bother much since patch was not applying. i will review it when it passes bot;)

@fangel : I've just tried media_multiselect with Media 7.x-2.0-unstable7+2-dev, switched to "Media multiselect" widget and it doesn't work: after clicking "Add media" button, the Edit page just simply reloads without any JS error messages on the console... So it doesn't work at all, never has - at least for me. Any ideas?
(Btw. Epsa Crop module's "Manage image crops" link also disappears. :) )

Sk8erPeter: Create an issue on the sandbox issue-queue with info on browser, core+module versions and whatever else I need to try and replicate your problem, and I'll look into it..

@fangel: I'm sorry, I just tested on a fresh Drupal install, and it does work.
But it seems like I just don't understand the purpose of your module. When I have "Media multiselect" widget enabled, the node edit looks like this:
when changing it back to "Media file selector", and adding one more image, it looks like this:
I don't understand why it's more comfortable to use your module... I don't really see the real differences. Maybe you could post some screenshots to your project's page or sg. like that. Thanks in advance.
I'm looking for a solution to upload ~50 or more images at once (or even a hundred), but this one doesn't seem to help me in this. :) (or I just missed something)

Sk8terPeter: The difference is that you can select more than one image at a time in the Media Browser (and if you have plupload + multiform enabled, you can upload more than one file at a time too).
So you don't have to press "Add media" N times, just once and then select N files and press "OK".

@fangel : thanks, I'll try that with the earlier versions...
In the meantime, I realized that on the other Drupal site, where it DID work, I had only Media 7.x-1.2 installed... so no wonder it behaved differently than Media 7.x-2.0-unstable7+2-dev... So I reject what I said before :D, and maybe you should test your module with Media 7.x-2.0-unstable7+2-dev installed. Thanks in advance.

EDIT (after multiple edits):
OK, I tested this combo, and this is working perfectly:

Media 7.x-1.2 + plupload (7.x-1.x-dev [7.x-1.0+5-dev]) + multiform (7.x-1.x-dev) + media_multiselect + "Media multiselect" widget

Cool!!! Great work, fangel!
I'll test it also after upgrading to Media 2.x and plupload 7.x-2.x-dev, I'm curious... :)

it seems to work with media 7.x-2.0-unstable7+2-dev + media_multiselect 7.x + multiform 7.x-1.0 + plupload 7.x-1.0+5-dev too.

One really frustrating problem: when trying to upload multiple images at once, and trying to upload an unsupported file type too (which is e.g. not an image) like this:
after clicking "Next", I get an error message that the given file could not be uploaded, and all the images are "lost" even when I tried to upload like 30 images at once. This is not too good, the unsupported file should just not be uploaded, and that's all, but this should not affect the rest of the files.

Is this problem in connection with your widget or with Plupload module?

Hi Sk8erPeter,
I have the test carried out with the same modules as you.

I become a multiselect' flag. I have the button "select media".
I click it and i become my media_browser with plupload widget. OK. I use multible pictures. I use the alt an title tags. When i click continue - no image thumbs displayed. The button "select media" is displayed again. Although the pictures are uploaded but not displayed in my article! I can see the images in content/media!
I test in firefox, chrome and IE9.
hm...i dont understand this..

@Bernsch: the truth is that it only works for me on fresh Drupal installs. I tried to make it work on two other sites, and the "Add media" button did nothing at all, and there were no JavaScript errors either. On one of the sites, I have multiple nested field groups, I don't know if it's related at all.
Can you also test it on a fresh Drupal site?
And can you post a screenshot of the error? I don't know if fangel will see it, but maybe we should continue this discussion about his module on the Issues for Media Multiselect page. :)

Yes, please do take any issues to the proper issue queue. If you can find the specific modules that breaks my module, please list them there. But yes, everything is developed on a clean git-checkout of Drupal, Media, File Entity, etc - and then tested on our production site with ~50 or so contrib modules...

In the meantime, I realized that the problem I mentioned in #68 is related to the new ImageField Tokens 7.x-1.x-dev.
When disabling ImageField Tokens, Media multiselect works correctly!
So I created an issue related to this problem: