My jQuery script works just fine for opening the wp.media uploader, selecting or uploading a single image, and both displaying the image and adding its attachment ID to an existing options array via hidden input (on my plugins settings page). My objective is to re-produce the identical results, but for multiple images at a time.
Like many before me, I have hit a block on using wp.media for such purposes.
First, I'll present the full working script: It opens the media frame, allows me to select an image, captures the image attachment ID for the hidden input (the most crucial function) and also happens to provide a preview image prior to a save action that, on page refresh, displays the image via its attachment ID just where I want it. Most of it will be familiar to anyone who has researched and written routines for using wp.media, and this particular usage (setting aside peculiarities of my plugin's set-up) is well-documented by now, at least in comparison to multiple files usage.
WORKING SINGLE IMAGE CODE
jQuery(document).ready( function($) {
var myplugin_media_upload;
$('#myplugin-change-image').click(function(e) {
e.preventDefault();
// If the uploader object has already been created, reopen the dialog
if( myplugin_media_upload ) {
myplugin_media_upload.open();
return;
}
// Extend the wp.media object
myplugin_media_upload = wp.media.frames.file_frame = wp.media({
title: button_text.title,
button: { text: button_text.button },
multiple: false
});
//When a file is selected, grab the URL and set it as the text field's value
myplugin_media_upload.on( 'select', function() {
attachment = myplugin_media_upload.state().get(
'selection' ).first().toJSON();
console.log(attachment); //irrelevant to functionality but useful
//adds the ID to the hidden input
$('#myplugin-featured-image').val( attachment.id );
//provides the preview image
$('#myplugin-thumbnail').empty();
$('#myplugin-thumbnail').append(
'<img src="' + attachment.url +
'" class="attachment-thumbnail myplugin-preview" />' );
$('#myplugin-new-global').show();
});
//Open the uploader dialog
myplugin_media_upload.open();
});
});
MOSTLY DYSFUNCTIONAL MULTIPLE IMAGES ATTEMPT
Combining snippets of multiple selection routines from here and there, I tried various adaptations. The following segment from one such try focuses on the key sequence. I present it not because it had a ghost of a chance of being completely successful, but because it is partly successful and does yield some possibly useful and interesting info:
// Extend the wp.media object
myplugin_media_upload = wp.media.frames.file_frame = wp.media({
title: button_text.title,
button: { text: button_text.button },
multiple: true //get multiple images
});
//When a file is selected, grab the URL and set it as the text field's value
myplugin_media_upload.on( 'select', function() {
var selection = myplugin_media_upload.state().get( 'selection' );
selection.map( function( attachment ) {
attachment.toJSON();
//shows each attachment ID:
console.log(attachment.id);
//last is captured for:
$('#myplugin-featured-image').val( attachment.id );
//captures code fragment (see notes)
console.log(attachment.url);
});
});
Though the last, "attachment-thumbnail"-related stuff from the prior example doesn't work at all, so hasn't been included, this code DOES capture the last attachment ID of however many images were selected, and appends it as the needed "val" for the hidden input.
Looking at the console, I find that however many images selected are in fact collected, ID by ID. However, attachment.url turns out to register as a snippet of dysfunctional URL-deriving code apparently from wp-includes/js/backbone.min.js. Maybe someone will find a clue here, or at least find it a little amusing (!?).
I think I want to capture the IDs as they are exposed, assemble them in an array, and foreach-loop them into a different type of image display, probably with incremented html IDs, and I likewise need to be able to capture the array for PHP processing.
I'm pretty sure I could handle the last two parts (display and PHP processing) once the "assemble and access array" parts were handled, but at this point my facility with jQuery becomes woefully inadequate. It's led to hours of bad trial and error, with lots of "undefined" notices when I try to access variables that I think really ought to be arrays of IDs. So far nothing that I have tried has done much more than decorate the console and at best give me one usable value as already described.
I'm hoping that someone can provide an answer that, in addition to solving this particular problem, will amount to a working template for getting and using multiple image selection in plug-ins, themes, and functions.
PPS: Hold the Phone I think I've almost got an answer, shockingly enough.
Though I'd still be curious to see what a real jQuery master came up with... ;)
