Profile Picture From the Media Library

add_action( 'admin_enqueue_scripts', function ( $hook ) {
    if ( in_array( $hook, array( 'profile.php', 'user-edit.php' ), true ) && current_user_can( 'upload_files' ) ) {
        wp_enqueue_media();
    }
} );

$wpide_avatar_field = function ( $user ) {
    if ( ! current_user_can( 'upload_files' ) ) {
        return;
    }

    $image_id = (int) get_user_meta( $user->ID, 'wpide_avatar_id', true );
    ?>
    <h2>Profile Picture</h2>
    <table class="form-table" role="presentation">
        <tr>
            <th scope="row">Picture</th>
            <td>
                <div id="wpide-avatar-preview"><?php echo $image_id ? wp_get_attachment_image( $image_id, array( 96, 96 ) ) : ''; ?></div>
                <input type="hidden" name="wpide_avatar_id" id="wpide-avatar-id" value="<?php echo esc_attr( $image_id ); ?>">
                <button type="button" class="button" id="wpide-avatar-choose">Choose image</button>
                <button type="button" class="button-link" id="wpide-avatar-remove">Remove</button>
            </td>
        </tr>
    </table>
    <script>
    jQuery( function ( $ ) {
        var frame;
        $( '#wpide-avatar-choose' ).on( 'click', function () {
            frame = frame || wp.media( { title: 'Profile picture', library: { type: 'image' }, multiple: false } );
            frame.off( 'select' ).on( 'select', function () {
                var image = frame.state().get( 'selection' ).first().toJSON();
                var url = image.sizes && image.sizes.thumbnail ? image.sizes.thumbnail.url : image.url;
                $( '#wpide-avatar-id' ).val( image.id );
                $( '#wpide-avatar-preview' ).html( $( '<img>', { src: url, width: 96, height: 96 } ) );
            } );
            frame.open();
        } );
        $( '#wpide-avatar-remove' ).on( 'click', function () {
            $( '#wpide-avatar-id' ).val( '' );
            $( '#wpide-avatar-preview' ).empty();
        } );
    } );
    </script>
    <?php
};

add_action( 'show_user_profile', $wpide_avatar_field );
add_action( 'edit_user_profile', $wpide_avatar_field );

// WordPress verifies the profile form nonce before these actions run.
$wpide_avatar_save = function ( $user_id ) {
    if ( ! current_user_can( 'edit_user', $user_id ) || ! current_user_can( 'upload_files' ) || ! isset( $_POST['wpide_avatar_id'] ) ) {
        return;
    }

    $image_id = absint( $_POST['wpide_avatar_id'] );

    if ( $image_id && wp_attachment_is_image( $image_id ) ) {
        update_user_meta( $user_id, 'wpide_avatar_id', $image_id );
    } else {
        delete_user_meta( $user_id, 'wpide_avatar_id' );
    }
};

add_action( 'personal_options_update', $wpide_avatar_save );
add_action( 'edit_user_profile_update', $wpide_avatar_save );

add_filter( 'pre_get_avatar_data', function ( $args, $id_or_email ) {
    $user_id = 0;

    if ( is_numeric( $id_or_email ) ) {
        $user_id = (int) $id_or_email;
    } elseif ( $id_or_email instanceof WP_User ) {
        $user_id = $id_or_email->ID;
    } elseif ( $id_or_email instanceof WP_Post ) {
        $user_id = (int) $id_or_email->post_author;
    } elseif ( $id_or_email instanceof WP_Comment ) {
        $user_id = (int) $id_or_email->user_id;
    } elseif ( is_string( $id_or_email ) && is_email( $id_or_email ) ) {
        $user    = get_user_by( 'email', $id_or_email );
        $user_id = $user ? $user->ID : 0;
    }

    $image_id = $user_id ? (int) get_user_meta( $user_id, 'wpide_avatar_id', true ) : 0;
    $url      = $image_id ? wp_get_attachment_image_url( $image_id, array( (int) $args['size'], (int) $args['size'] ) ) : false;

    if ( $url ) {
        $args['url']          = $url;
        $args['found_avatar'] = true;
    }

    return $args;
}, 10, 2 );