wp media uploader added

Author: tareq1988

class.settings-api.php

@@ -42,12 +42,10 @@ public function __construct() {
      */
     function admin_enqueue_scripts() {
         wp_enqueue_style( 'wp-color-picker' );
-        wp_enqueue_style( 'thickbox' );
 
+        wp_enqueue_media();
         wp_enqueue_script( 'wp-color-picker' );
         wp_enqueue_script( 'jquery' );
-        wp_enqueue_script( 'media-upload' );
-        wp_enqueue_script( 'thickbox' );
     }
 
     /**
@@ -293,27 +291,10 @@ function callback_file( $args ) {
         $value = esc_attr( $this->get_option( $args['id'], $args['section'], $args['std'] ) );
         $size = isset( $args['size'] ) && !is_null( $args['size'] ) ? $args['size'] : 'regular';
         $id = $args['section']  . '[' . $args['id'] . ']';
-        $js_id = $args['section']  . '\\\\[' . $args['id'] . '\\\\]';
-        $html = sprintf( '<input type="text" class="%1$s-text" id="%2$s[%3$s]" name="%2$s[%3$s]" value="%4$s"/>', $size, $args['section'], $args['id'], $value );
-        $html .= '<input type="button" class="button wpsf-browse" id="'. $id .'_button" value="Browse" />
-        <script type="text/javascript">
-        jQuery(document).ready(function($){
-            $("#'. $js_id .'_button").click(function() {
-                tb_show("", "media-upload.php?post_id=0&amp;type=image&amp;TB_iframe=true");
-                window.original_send_to_editor = window.send_to_editor;
-                window.send_to_editor = function(html) {
-                    var url = $(html).attr(\'href\');
-                    if ( !url ) {
-                        url = $(html).attr(\'src\');
-                    };
-                    $("#'. $js_id .'").val(url);
-                    tb_remove();
-                    window.send_to_editor = window.original_send_to_editor;
-                };
-                return false;
-            });
-        });
-        </script>';
+
+        $html  = sprintf( '<input type="text" class="%1$s-text wpsa-url" id="%2$s[%3$s]" name="%2$s[%3$s]" value="%4$s"/>', $size, $args['section'], $args['id'], $value );
+        $html .= '<input type="button" class="button wpsa-browse" value="'.__( 'Browse' ).'" />';
+
         $html .= sprintf( '<span class="description"> %s</span>', $args['desc'] );
 
         echo $html;
@@ -472,6 +453,7 @@ function script() {
             jQuery(document).ready(function($) {
                 //Initiate Color Picker
                 $('.wp-color-picker-field').wpColorPicker();
+
                 // Switches option sections
                 $('.group').hide();
                 var activetab = '';
@@ -511,7 +493,38 @@ function(){
                     $(clicked_group).fadeIn();
                     evt.preventDefault();
                 });
-            });
+
+                var file_frame = null;
+                $('.wpsa-browse').on('click', function (event) {
+                    event.preventDefault();
+
+                    var self = $(this);
+
+                    // If the media frame already exists, reopen it.
+                    if ( file_frame ) {
+                        file_frame.open();
+                        return false;
+                    }
+
+                    // Create the media frame.
+                    file_frame = wp.media.frames.file_frame = wp.media({
+                        title: self.data('uploader_title'),
+                        button: {
+                            text: self.data('uploader_button_text'),
+                        },
+                        multiple: false
+                    });
+
+                    file_frame.on('select', function () {
+                        attachment = file_frame.state().get('selection').first().toJSON();
+
+                        self.prev('.wpsa-url').val(attachment.url);
+                    });
+
+                    // Finally, open the modal
+                    file_frame.open();
+                });
+        });
         </script>
 
         <style type="text/css">