We can insert any media files in our post content by clicking the button ‘Upload/Insert’ from post editor. But If you need to use files for your WordPress plugin or theme settings, you have to either upload new files form your computer or using files from WordPress media library. You can create a file upload system with your plugin easily that will not well organized. But you can use WordPress media upload library instead. There is no documentation/guide for adding this media uploader functionality in your own settings page. Here I am writing a guide to use this media uploader very easily.

Let you have an form input field ‘image_location’ , you want to let user to insert image location in this field or they can be able to upload/use image from media library. Your form will be like following image.

SETP 1: Setting up Your PHP(WP Admin Head)

Call three JavaScript library (jquery, media-upload and thickbox) and one CSS for thickbox in the admin head.
Add following php codes in your plugin main page.

<?php
 function onetarek_wpmut_admin_scripts()
 {
 if (isset($_GET['page']) && $_GET['page'] == 'oneTarek_wpmut_plugin_page')
 {
 wp_enqueue_script('jquery');
 wp_enqueue_script('media-upload');
 wp_enqueue_script('thickbox');
 wp_register_script('my-upload', ONETAREK_WPMUT_PLUGIN_URL.'onetarek-wpmut-admin-script.js', array('jquery','media-upload','thickbox'));
 wp_enqueue_script('my-upload');
 }
 }

 function onetarek_wpmut_admin_styles()
 {
 if (isset($_GET['page']) && $_GET['page'] == 'oneTarek_wpmut_plugin_page')
 {
 wp_enqueue_style('thickbox');
 }
 }
 add_action('admin_print_scripts', 'onetarek_wpmut_admin_scripts');
 add_action('admin_print_styles', 'onetarek_wpmut_admin_styles');
?>

SETP 2: Setting up Your JavaScript(jQuery)

Create a JavaScript file ‘onetarek-wpmut-admin-script.js’ with following codes

/*
Using WordPress Media Uploader System with plugin settings
Author: oneTarek
Author URI: http://onetarek.com
*/
jQuery(document).ready(function() {

    var formfield;

    /* user clicks button on custom field, runs below code that opens new window */
    jQuery('.onetarek-upload-button').click(function() {
        formfield = jQuery(this).prev('input'); //The input field that will hold the uploaded file url
        tb_show('','media-upload.php?TB_iframe=true');

        return false;

    });
    /*
	Please keep these line to use this code snipet in your project
	Developed by oneTarek http://onetarek.com
	*/
    //adding my custom function with Thick box close function tb_close() .
    window.old_tb_remove = window.tb_remove;
    window.tb_remove = function() {
        window.old_tb_remove(); // calls the tb_remove() of the Thickbox plugin
        formfield=null;
    };

    // user inserts file into post. only run custom if user started process using the above process
    // window.send_to_editor(html) is how wp would normally handle the received data

    window.original_send_to_editor = window.send_to_editor;
    window.send_to_editor = function(html){
        if (formfield) {
            fileurl = jQuery('img',html).attr('src');
            jQuery(formfield).val(fileurl);
            tb_remove();
        } else {
            window.original_send_to_editor(html);
        }
    };

});

SETP 3: Setting up Your HTML

Open your php file that represent your plugin page and form field. Put following codes into your form codes.

<input id="image_location" type="text" name="image_location" value="" size="50" />
 <input  class="onetarek-upload-button button" type="button" value="Upload Image" />

That’s all , you are done. Now test your plugin.
I made a simple plugin to test this whole process I explained above.
Download my demo plugin

• Using TinyMCE WYSIWYG Editor in WordPress Plugin
• Custom Meta Field to WordPress User Profile

This Post May Be The Answer of Following Queires

• Add wordpress media uploader to settings page
• WordPress media uploader with my plugin options fields
• Select files for plugin settings via using media uploader
• WordPress media uploader in theme option page
• Set wordpress image/media uploader with an input field
• Using wordpress media uploader in plugin
• Add media uploader library in wordpress plugin
• Multiple Media Upload Inputs Per Page