Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
// Uploading files
var file_frame;
jQuery('.upload_image_button').live('click', function( event ){
event.preventDefault();
// If the media frame already exists, reopen it.
if ( file_frame ) {
file_frame.open();
return;
}
// 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: false // Set to true to allow multiple files to be selected
});
// When an image is selected, run a callback.
file_frame.on( 'select', function() {
// We set multiple to false so only get one image from the uploader
attachment = file_frame.state().get('selection').first().toJSON();
// Do something with attachment.id and/or attachment.url here
});
// Finally, open the modal
file_frame.open();
});
@pippinsplugins
Copy link

Just a small note: the .live() method is deprecated as of jQuery 1.7.

@pippinsplugins
Copy link

You will want to use .on('click' instead: https://gist.github.com/29bebb740e09e395dc06

@zanematthew
Copy link

I'd assume .live('click') was probably used because the DOM element was added via ajax, that being said the syntax for .on() is a little different.

jQuery(document).on('click', '.upload_image_button', function(){ // your code });

@anastaciaeg
Copy link

Just curious if others are seeing the media-toolbar-secondary content (filter dropdown) disappear in the uploader when using this method? An otherwise flawless result for me.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment