<?php
/* Add WP Media Uploader in Plugin */
add_action('admin_enqueue_scripts', 'custom_admin_media_scripts');

function custom_admin_media_scripts() {
    if (isset($_GET['page']) && $_GET['page'] == 'custom-icons-settings-page') {
        wp_enqueue_media();
        wp_register_script('custom-media-uploader-js', WP_PLUGIN_URL.'/custom-theme-settings-plugin/js/media.js', array('jquery'));
        wp_enqueue_script('custom-media-uploader-js');
    }
}
/* Add WP Media Uploader in Plugin End */
?>

<!-- Add JS code in media.js file of plugin -->
<script>
jQuery(document).ready(function($){


    var custom_uploader;


    $('#upload_image_button').click(function(e) {

        e.preventDefault();

        //If the uploader object has already been created, reopen the dialog
        if (custom_uploader) {
            custom_uploader.open();
            return;
        }

        //Extend the wp.media object
        custom_uploader = wp.media.frames.file_frame = wp.media({
            title: 'Choose Image',
            button: {
                text: 'Choose Image'
            },
            multiple: false
        });

        //When a file is selected, grab the URL and set it as the text field's value
        custom_uploader.on('select', function() {
            attachment = custom_uploader.state().get('selection').first().toJSON();
            $('#upload_image').val(attachment.url);
        });

        //Open the uploader dialog
        custom_uploader.open();

    });


});
</script>
<!-- Add JS code in media.js file of plugin End -->

<!-- Add button code in Template file -->
<label for="upload_image">
        <input id="add_icon_image" type="text" name="add_icon_image" value="" />
        <input id="upload_image_button" class="button" type="button" value="Upload Image" />
        <br />Enter a URL or upload an image
</label>
<!-- Add button code in Template file -->