Footer About us widget.

<?php
/**
 * new WordPress Widget format
 * Wordpress 2.8 and above
 * @see http://codex.wordpress.org/Widgets_API#Developing_Widgets
 */
class Blogall_About_Widget extends WP_Widget
{
    /**
     * Constructor
     *
     * @return void
     */
    public function __construct()
    {
        $widget_ops = array( 'classname' => 'Blogall_About_Widget', 'description' => esc_html__('Display Your Little Information Using About Widget', 'blogall') );
        parent::__construct('blogall_about', esc_html__('About Widget', 'blogall'), $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
     */
    public function widget($args, $instance)
    {
         $title = (!empty($instance['title']) ? $instance['title'] : esc_html__('About', 'blogall'));
         $textarea = (!empty($instance['about']) ? $instance['about'] : esc_html__('Type Something About You', 'blogall'));
        $aboutimg = (!empty($instance['aboutimage_url']) ? $instance['aboutimage_url'] : '');
        echo $args['before_widget'];
        echo $args['before_title'];
            echo esc_html($title);
        echo $args['after_title']; ?>
        <div class="about-widget">
            <img src="<?php echo esc_url($aboutimg);?>" alt="">
            <div class="description">
                <p><?php echo wp_kses_post( $textarea ); ?></p>
            </div>
        </div>
        <?php
        echo $args['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
     */
    public function update($new_instance, $old_instance)
    {
        // update logic goes here
        $updated_instance = $new_instance;
        return $updated_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 Echoes it's output
     */
    public function form($instance)
    {
        $title = (!empty($instance['title']) ? $instance['title'] : esc_html__('About', 'blogall'));
        $textarea = (!empty($instance['about']) ? $instance['about'] : esc_html__('Type Something About You', 'blogall'));
        $aboutimg = (!empty($instance['aboutimage_url']) ? $instance['aboutimage_url'] : '');
        ?>
        <p>
            <label for="<?php echo esc_attr($this->get_field_id('title')); ?>"><?php esc_html_e('Title', 'blogall'); ?></label>
            <input type="text" id="<?php echo esc_attr($this->get_field_id('title')); ?>" class="widefat" name="<?php echo esc_attr($this->get_field_name('title')); ?>" value="<?php echo esc_attr($title); ?>">
        </p>
        <p>
            <button type="file" id="about_img" class="button button-primary"><?php esc_html_e('Choose Image', 'blogall'); ?></button>
            <input id="about_img_url" type="hidden" name="<?php echo esc_attr($this->get_field_name('aboutimage_url'));?>" placeholder="<?php esc_attr_e('Image url');?>" value="<?php echo esc_url($aboutimg);?>">
           <div class="preview-img">
               <img src="<?php echo esc_url($aboutimg);?>" width="300" height="300" alt="">
           </div>
        </p>
        <p>
            <label for="<?php echo esc_attr($this->get_field_id('about')); ?>"><?php esc_html_e('About', 'blogall'); ?></label>
            <textarea type="text" id="<?php echo esc_attr($this->get_field_id('about')); ?>" class="widefat" name="<?php echo esc_attr($this->get_field_name('about')); ?>"> <?php echo esc_attr($textarea); ?> </textarea>
        </p>
        <?php
    }
}
function blogall_aboutus_wdget()
{
    register_widget('Blogall_About_Widget');
}
add_action('widgets_init', 'blogall_aboutus_wdget');

//admin enqueue scripts wp media

function blogall_admin_scripts()
{
    wp_enqueue_style('blogall-admin-custom', get_template_directory_uri() . '/css/admin/custom.css');
    wp_enqueue_media();
    wp_enqueue_script('blogall-admin-custom', get_template_directory_uri() . '/js/admin/custom.js', array('jquery'), null, true);
}
add_action('admin_enqueue_scripts', 'blogall_admin_scripts');

//custom js code

(function($){
    $(document).ready(function(){
        $('button#about_img').on('click', function(e){
            e.preventDefault();
            var imageuploader = wp.media({
                'title': 'Upload Author Image',
                'button': {
                    'text': 'Set the Image',
                },
                'multiple': false,
            });
            imageuploader.open();

            imageuploader.on('select', function(){
                var image = imageuploader.state().get('selection').first().toJSON();
                var link = image.url;
                $('input#about_img_url').val(link);
                $('.preview-img img').attr('src', link);
            });

        });
    });
})(jQuery);