How to Add Media Uploader to WordPress Dashboard

By following the tutorial below, you can add as many media uploader field on your wordpress dashboard form.

Step 1. call wp_enqueue_media() on your php file.

Step 2. Create the button field by adding the codes below:

<div class="uploader"><input id="image_url" name="image_url" type="text" value="" /> <input class="button media-uploader" type="button" value="Upload" rel="image_url" /></div>
Note: the id of the url field and the rel of the button should be the same. add the media_uploader class to the button

Step 3. add the ff. script

$jx('.media-uploader').live('click', function(){
var send_attachment_bkp = wp.media.editor.send.attachment;
var button = $jx(this);
var rel = $jx(this).attr('rel');
_custom_media = true;

wp.media.editor.send.attachment = function(props, attachment){
if ( _custom_media ) {
$jx("#" + rel).val(attachment.url);
}
else {
return _orig_send_attachment.apply( this, [props, attachment] );
}
}

wp.media.editor.open(button);
});

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPrint this pageEmail this to someone

Leave a Reply

Your email address will not be published. Required fields are marked *