How to use media uploader in WordPress custom plugin

Reading Time: 2 minutes

If you’re developing own wordpress plugin may be you have to use upload image in the custom field.So in here i’m going to explain all how to use media uploader in your wordpress settings page.


This is my folder structure.

My main file is index.php.There I’m adding wordpress code functions to fetch related files.

wp_enqueue_style( 'thickbox' ); 
wp_enqueue_script( 'thickbox' ); 
wp_enqueue_script( 'media-upload' );

 

Now I’m adding my js file named admin_script.js into settings page.

 
// load script to admin
function wpss_admin_js() {
     $siteurl = get_option('siteurl');
        $url = $siteurl . '/wp-content/plugins/' . basename(dirname(__FILE__)) . '/js/admin_script.js';
        echo "<script type='text/javascript' src='$url'></script>";
}
add_action('admin_head', 'wpss_admin_js');

 

 

Okay.Next step is adding html fields to settings page(settins.php) of my plugin page.

<div id="wpss_upload_image_thumb" class="wpss-file">
<?php if(isset($record->security_image) && $record->security_image !='') { ?> 
     <img src="<?php echo $record->security_image;?>" width="65" /><?php 
} else { 
?>
</div>
<input id="wpss_upload_image" class="wpss_text wpss-file" name="wpss_upload_image" size="36" type="text" value="" /> 
<input id="wpss_upload_image_button" class="wpss-filebtn" type="button" value="Upload Image" />

 

 

Now add the js into the admin_script.js file.

jQuery.noConflict();
jQuery(document).ready(function ($) {
    jQuery('#wpss_upload_image_button').click(function() {
     	formfield = jQuery('#wpss_upload_image').attr('name');
     	tb_show('', 'media-upload.php?type=image&TB_iframe=true');
     	return false;
    });
    window.send_to_editor = function(html) {
     imgurl = jQuery('img',html).attr('src');
     jQuery('#wpss_upload_image').val(imgurl);
     tb_remove();
     jQuery('#wpss_upload_image_thumb').html("");
    }
});

 

After added all you can see it in admin page as following.