WordPress Upload Multiple images to an input using Media uploader 3.5

So I’m using WordPress Media Upload 3.5 to upload image(s) to an input field (text, tried hidden doesn’t work). Now my goal here is to get the user to select a couple of image via the Media-Upload 3.5 and then once you press upload it pulls the image attributes to the input field, from there it gets uploaded.

This is my code to pull up the Media-Upload Iframe. You will see I’ve tried quite a number of options:

Read More
  jQuery(document).ready(function(){

var file_frame;
var wp_media_post_id = wp.media.model.settings.post.id; // Store the old id
var set_to_post_id = 10; // Set this

  jQuery('.upload_image_button').live('click', function( event ){

    event.preventDefault();

    // If the media frame already exists, reopen it.
    if ( file_frame ) {
      // Set the post ID to what we want
      file_frame.uploader.uploader.param( 'post_id', set_to_post_id );
      // Open frame
      file_frame.open();
      return;
    } else {
      // Set the wp.media post id so the uploader grabs the ID we want when initialised
      wp.media.model.settings.post.id = set_to_post_id;
    }

    // Create the media frame.
    file_frame = wp.media.frames.file_frame = wp.media({
      title: jQuery( this ).data( 'uploader_title' ),
      button: {
        text: jQuery( this ).data( 'uploader_button_text' ),
      },
      multiple: true  // Set to true to allow multiple files to be selected
    });

    // When an image is selected, run a callback.
    file_frame.on( 'open', function() {
      // We set multiple to false so only get one image from the uploader
      //attachment = file_frame.state().get('selection').first().toJSON();
//$("#image99").after("<img src=" +attachment.url+">");
      // Do something with attachment.id and/or attachment.url here
       var selection = file_frame.state().get('selection');
  ids = jQuery('#image99').val().split(',');
    ids.forEach(function(id) {
  attachment = wp.media.attachment(id);
  attachment.fetch();
  selection.add( attachment ? [ attachment ] : [] );
});
      // Restore the main post ID
      //wp.media.model.settings.post.id = wp_media_post_id;
    });

    // Finally, open the modal
    file_frame.open();
  });

  // Restore the main ID when the add media button is pressed
  jQuery('a.add_media').on('click', function() {
    wp.media.model.settings.post.id = wp_media_post_id;
  });   

 });

This is my input text code:

    <input id="image99" name="images[99][image]" type="text"  value="" /> 
<input class="upload_image_button" id="images[99][image]" type="button" value="Upload">

So the upload process works great however it only pulls the first image that was selected through and not the rest.

Related posts

Leave a Reply