How to use wordpress default media uploader at front end for user images upload

For add wordpress default media uploader at your site front end . just copy and paste below code into your theme's functions.php file or in your custom plugins file

For use media uploader first need to add media js file so paste below code into your file
function rj_wp_enqueue_media() {
 if ( ! is_admin()  ) {
        wp_enqueue_media();
}
}
add_action( 'wp_enqueue_scripts', 'rj_wp_enqueue_media' );


// For give permission to user upload images or file you must need to assign capability to user so add below code into file and change user role as per your requirement
add_action('init', 'rj_allow_customer_uploads', 20);
add_action('admin_init', 'rj_allow_customer_uploads', 20);

function rj_allow_customer_uploads() {
    global $wpdb;
    if ( current_user_can('customer') || current_user_can('subscriber') ) {
    $customer = get_role('customer');
    $customer->add_cap('upload_files');
    $customer->add_cap('unfiltered_upload');
    $subscriber = get_role('subscriber');
    $subscriber->add_cap('upload_files');
    $subscriber->add_cap('unfiltered_upload');
    }
}
I added below script for user profile image upload in user account profile page


<img src="<?php echo $prof_img; ?>" id="user_prof_img" style="width:150px;" /><br />
<input type="hidden" name="user_profile_img" id="user_profile_img" value="<?php echo esc_url( get_the_author_meta( '_user_profile_image', $user->ID ) ); ?>" />


// below code is for to assign media uploader

jQuery(document).ready(function($){
var file_frame;

  $('#user_prof_img').on('click', function( event ){

    event.preventDefault();

 
    if ( file_frame ) {
      file_frame.open();
      return;
    }

 
    file_frame = wp.media.frames.file_frame = wp.media({
      title: $( this ).data( 'uploader_title' ),
      button: {
        text: $( this ).data( 'uploader_button_text' ),
      },
      multiple: false
    });

 
    file_frame.on( 'select', function() {
       
      attachment = file_frame.state().get('selection').first().toJSON();
        $('#user_prof_img').attr('src',attachment.url);  // here i instantly update user profile image
        $('#user_profile_img').val(attachment.url); // this is for store in database when user click on submit
   
    });

   
    file_frame.open();
  });

});

// below script for restrict user to see all media images or file so  i setted autor as current login user for display current user images or files into media library tab
add_filter( 'ajax_query_attachments_args', 'rj_show_current_user_attachments', 10, 1 );

function rj_show_current_user_attachments( $query = array() ) {
    global $wpdb,$current_user;
    if(!current_user_can('administrator')){
    $user_id = get_current_user_id();
    if( $user_id ) {
        $query['author'] = $user_id;
    }
    }
    return $query;
}