WordPress 3.5 Media Uploader Multiple File Select

2 Views

I’m building a WordPress theme with a custom settings page. Some of the settings require the user to upload/add a set of images (more than 1). The default behavior of the media uploader is to upload and/or select a single image and insert it into a post.

I’ve followed this excellent guide on utilizing the media uploader, and it suggests that I should be able to set multiple to true, but it still only allows for a single file to be uploaded or selected.

Read More

Here’s my code:

Load in the needed scripts since this is a custom settings page: 

if(function_exists( 'wp_enqueue_media' )){
    wp_enqueue_media();
}else{
    wp_enqueue_style('thickbox');
    wp_enqueue_script('media-upload');
    wp_enqueue_script('thickbox');
}

Javascript/jQuery For displaying the media uploader and handling the selected images: 

var tgm_media_frame;

$('.upload-images').click(function() {

  if ( tgm_media_frame ) {
    tgm_media_frame.open();
    return;
  }

  tgm_media_frame = wp.media.frames.tgm_media_frame = wp.media({
    multiple: true,
    library: {
      type: 'image'
    },
  });

  tgm_media_frame.on('select', function(){
    var selection = tgm_media_frame.state().get('selection');
    selection.map( function( attachment ) {
      attachment = attachment.toJSON();
          console.log(attachment);
          // Do something with attachment.id and/or attachment.url here
    });
  });

  tgm_media_frame.open();

});

Has anyone been able to get multiple file selection working properly? Am I missing something? Thanks!

Post Views: 2

Related posts

Leave a Reply

3 comments

  2. Update

    I think media uploader has been updated since question asked and answered. I guess in previous version of wordpress multiple: 'add' option was not present as suggested by other users. I’m not sure enough.

    Everything’s good with your code. Just a small part missing.

    selection.map( function( attachment ) {
    attachment = attachment.toJSON();
    $("#something").after("<img src=" +attachment.url+">");
});

    After attachment converted toJSON you can use it as mentioned in documentation. You can place image urls into some hidden fields posting to server and display selected images to user same time.

    Just a small thing I feel weird is that, we need to press ctrl+click to select images. It should be rather checkboxes or something.

    update

    ctrl+click or shift+click for selecting multiple images is the way wordpress have given. For a closer look, open

    …wp-includesjsmedia-views.js

    There’s a function defined – toggleSelectionHandler. It listens for key combination user has pressed and accordingly calls other function which changes certain classes and cause actual selection.

    After inspecting into firbug, you can see two classes are applied —

    1. selected
    2. details

    details class defines styles for current clicked/active selection ( with blue thick border) and selected actually marks image as selected and returns it in selection array.

    You can alter that behaviour either from that file itself or write your own function to handle selection. First approach is not good though.

    PS : WordPress does not actually use above file. It chooses compressed version of same file. So you might want to load uncompressed file and play around. You can force wordpress to use uncompressed js files by setting 

    define('SCRIPT_DEBUG', true);

    in wp-config.php. This will skip behaviour of load-scripts.php (loading compressed
    version of every js file into single file by merging them ).

  3. In case anyone wants to know how to do this, one way is this. Note that it will completely override the default behavior within the scope it is implemented.

    wp.media.view.Attachment.prototype.toggleSelectionHandler = function( event ) {
    var method = 'between';
    if ( event.shiftKey ) {
        method = 'between';
    } else {
        method = 'toggle';
    }

    this.toggleSelection({
        method: method
    });
};

    If multiple is set to true then this will allow you to select multiple items, like in the gallery screen.