image-upload-widget.php

<?php
/*
* Plugin Name: Media Upload Widget
* Plugin URI: http://wordpress.melissacabral.com
* Description: A widget that allows you to upload media from a widget
* Version: 1.0
* Author: Melissa Cabral
* Author URI: http://wordpress.melissacabral.com
* License: GPLv3
*/

/**
 * Upload the Javascripts for the media uploader
 */
add_action('admin_enqueue_scripts', 'rad_upload_scripts');

function rad_upload_scripts(){
    wp_enqueue_script('media-upload');
    wp_enqueue_script('thickbox');
    wp_enqueue_script('upload_media_widget', plugins_url('upload-media.js', __FILE__), array('jquery'));
    wp_enqueue_style('thickbox');
}

/**
 * Register the Widget
 */
add_action( 'widgets_init', 'rad_media_upload_widget');
function rad_media_upload_widget(){
    register_widget( 'rad_media_upload_widget' );
}

class rad_media_upload_widget extends WP_Widget{
    /**
     * Constructor
     **/
    function __construct(){
        $widget_ops = array(
            'classname' => 'rad_media_upload',
            'description' => 'Widget that uses the built in Media library.'
            );
                                //id base           title               ops
        parent::__construct( 'rad_media_upload', 'Media Upload Widget', $widget_ops );        
    }

    /**
     * Outputs the HTML for this widget.
     *
     * @param array  An array of standard parameters for widgets in this theme
     * @param array  An array of settings for this widget instance
     * @return void Echoes it's output
     **/
    function widget( $args, $instance ){
        extract($args);
    
        $title = apply_filters( 'widget_title', $instance['title'] );
        echo $before_widget;
        if ( ! empty( $title ) ){
            echo $before_title . $title . $after_title;
        }

        ?>
        <img src="<?php  echo esc_url($instance['image']); ?>">
        <?php

        echo $after_widget;

    }

    /**
     * Deals with the settings when they are saved by the admin. Here is
     * where any validation should be dealt with.
     *
     * @param array  An array of new settings as submitted by the admin
     * @param array  An array of the previous settings
     * @return array The validated and (if necessary) amended settings
     **/
    function update( $new_instance, $old_instance ){        
        $instance = array();

        // sanitize all fields
        $instance['title'] = wp_filter_nohtml_kses( $new_instance['title'] );
        $instance['image'] = esc_url_raw( $new_instance['image'] );
        return $instance;
    }

    /**
     * Displays the form for this widget on the Widgets page of the WP Admin area.
     *
     * @param array  An array of the current settings for this widget
     * @return void
     **/
    function form( $instance ){
        $title = 'Widget Image';
        if(isset($instance['title'])){
            $title = $instance['title'];
        }

        $image = '';
        if(isset($instance['image'])){
            $image = $instance['image'];
        }
        ?>
        <p>
            <label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:' ); ?></label>
            <input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>" />
        </p>

        <p>
            <label for="<?php echo $this->get_field_name( 'image' ); ?>"><?php _e( 'Image:' ); ?></label>
            <br>
            <input class="upload_image_button" type="button" value="Choose Image" />

            <input name="<?php echo $this->get_field_name( 'image' ); ?>" id="<?php echo $this->get_field_id( 'image' ); ?>" class="widefat" type="text" size="36"  value="<?php echo esc_url( $image ); ?>" />
        </p>

          <img src="<?php  echo esc_url($image); ?>">
        <?php
    }
}
?>

upload-media.js

jQuery(document).ready(function($) {
    $(document).on("click", ".upload_image_button", function() {

        jQuery.data(document.body, 'nextElement', $(this).next());

        window.send_to_editor = function(html) {
            var imgurl = jQuery('img',html).attr('src');
            var inputText = jQuery.data(document.body, 'nextElement');

            if(inputText != undefined && inputText != '')
            {
                inputText.val(imgurl);
            }

            tb_remove();
        };

        tb_show('', 'media-upload.php?type=image&TB_iframe=true');
        return false;
    });
});