PHP CODE

/*
* Load style & scripts
*/
function itclanbd_admin_load_scripts( $hook ) {
    $allowed = [\'profile.php\', \'user-new.php\', \'user-edit.php\'];
    if ( ! in_array( $hook, $allowed ) ) {
        return;
    }
    wp_enqueue_media();
    wp_enqueue_style(\'finance2sell\', plugins_url(\'css/style.css\', __FILE__), array(), null);
    wp_enqueue_script(\'finance2sell\', plugins_url(\'js/scripts.js\', __FILE__), array(), \'1.3\', true);
}
add_action( \'admin_enqueue_scripts\', \'itclanbd_admin_load_scripts\' );

/**
 * Create custom fields
 * @param $user
 */
function itclanbd_add_custom_user_profile_fields($user) {
    $itclanbd_attachment_id = (int)get_user_meta( (int)$user->ID, \'itclanbd_attachment_id\', true );
    ?>
    <table class="form-table">
        <tbody>
            <tr>
                <th>
                    <label for="itclanbd-add-media"><?php _e(\'Avatar\', \'finance2sell\'); ?></label>
                </th>
                <td>
                    <input type="number" name="itclanbd_attachment_id" class="itclanbd-attachment-id" value="<?php echo $itclanbd_attachment_id; ?>" />
                    <div class="itclanbd-attachment-image">
                        <?php echo get_avatar($user->ID); ?>
                    </div>
                    <div class="wp-media-buttons">
                        <button class="button itclanbd-add-media" id="itclanbd-add-media"><?php _e(\'Select\', \'finance2sell\'); ?></button>
                        <button class="button itclanbd-remove-media"><?php _e(\'Remove\', \'finance2sell\'); ?></button>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
    <?php
}
add_action( \'show_user_profile\', \'itclanbd_add_custom_user_profile_fields\' );
add_action( \'edit_user_profile\', \'itclanbd_add_custom_user_profile_fields\' );
add_action( \'user_new_form\', \'itclanbd_add_custom_user_profile_fields\' );

/** 
 * Update custom fields
 * @param $user_id
 * @return bool
 */
function itclanbd_update_custom_user_profile_fields($user_id) {
    if( !current_user_can(\'edit_user\', (int)$user_id) ) return false;

    delete_user_meta( (int)$user_id, \'itclanbd_attachment_id\') ; //delete meta

    if( //validate POST data
        isset($_POST[\'itclanbd_attachment_id\'])
        && is_numeric($_POST[\'itclanbd_attachment_id\'])
        && $_POST[\'itclanbd_attachment_id\'] > 0
    ) {
        add_user_meta( (int)$user_id, \'itclanbd_attachment_id\', (int)$_POST[\'itclanbd_attachment_id\'] ); //add user meta
    } else {
        return false;
    }

    return true;
}
add_action(\'user_register\', \'itclanbd_update_custom_user_profile_fields\');
add_action(\'profile_update\', \'itclanbd_update_custom_user_profile_fields\');


// Get custom field value
$attachment_id = get_user_meta( (int)$user_id, \'itclanbd_attachment_id\', true );
$image = wp_get_attachment_image_src((int)$attachment_id, \'thumbnail\');
echo $image[0]; // image url

function wpMediaEditor() {
    wp.media.editor.open();
    wp.media.editor.send.attachment = function(props, attachment) {
        jQuery(\'input.itclanbd-attachment-id\').val(attachment.id);
        jQuery(\'div.itclanbd-attachment-image img\').remove();
        jQuery(\'div.itclanbd-attachment-image\').append(
            jQuery(\'<img>\').attr({
                \'src\': attachment.sizes.thumbnail.url,
                \'class\': \'itclanbd-attachment-thumb\',
                \'alt\': attachment.title
            })
        );
        jQuery(\'button.itclanbd-remove-media\').fadeIn(250);
    };
}

function simpleUserAvatar() {
    var buttonAdd = jQuery(\'button.itclanbd-add-media\');
    var buttonRemove = jQuery(\'button.itclanbd-remove-media\');

    buttonAdd.on(\'click\', function(event) {
        event.preventDefault();
        wpMediaEditor();
    });

    buttonRemove.on(\'click\', function(event) {
        event.preventDefault();
        jQuery(\'input.itclanbd-attachment-id\').val(0);
        jQuery(\'div.itclanbd-attachment-image img\').remove();
        jQuery(this).fadeOut(250);
    });

    jQuery(document).on(\'click\', \'div.itclanbd-attachment-image img\', function() {
        wpMediaEditor();
    });

    if(
        jQuery(\'input.itclanbd-attachment-id\').val() === 0
        || !jQuery(\'div.itclanbd-attachment-image img\').length
    ) buttonRemove.css( \'display\', \'none\' );
}

jQuery(document).ready(function() {
    simpleUserAvatar();

    jQuery(\'table.form-table tr.user-profile-picture\').remove();
});

@charset "UTF-8";

table.form-table tr.user-profile-picture,
input.itclanbd-attachment-id {
    display: none;
}

div.itclanbd-attachment-image img {
    background-color: white;
    border: 1px solid #e1e1e1;
    border-radius: 2px;
    cursor: pointer;
    height: auto;
    margin-bottom: 10px;
    padding: 3px;
    width: 96px;
}

button.button.itclanbd-remove-media:hover,
button.button.itclanbd-remove-media {
    background-color: #990000;
    border-color: #560303;
    box-shadow: 0 1px 0 #560303;
    color: white;
}

button.button.itclanbd-remove-media:hover {
    background-color: #b40000;
}

It should look like: