Way to display media library in frontend

As far I’ve understood with those I’ve written a simple system for you. Please put the below codes in your functions.php–

add_action( 'wp_enqueue_scripts', 'the_dramatist_enqueue_scripts' );
add_filter( 'ajax_query_attachments_args', 'the_dramatist_filter_media' );
add_shortcode( 'the_dramatist_front_upload', 'the_dramatist_front_upload' );

/**
 * Call wp_enqueue_media() to load up all the scripts we need for media uploader
 */
function the_dramatist_enqueue_scripts() {
    wp_enqueue_media();
    wp_enqueue_script(
        'some-script',
        get_template_directory_uri() . '/js/media-uploader.js',
        // if you are building a plugin
        // plugins_url( "https://wordpress.stackexchange.com/", __FILE__ ) . '/js/media-uploader.js',
        array( 'jquery' ),
        null
    );
}
/**
 * This filter insures users only see their own media
 */
function the_dramatist_filter_media( $query ) {
    // admins get to see everything
    if ( ! current_user_can( 'manage_options' ) )
        $query['author'] = get_current_user_id();
    return $query;
}
function the_dramatist_front_upload( $args ) {
    // check if user can upload files
    if ( current_user_can( 'upload_files' ) ) {
        $str = __( 'Select File', 'text-domain' );
        return '<input id="frontend-button" type="button" value="' . $str . '" class="button" style="position: relative; z-index: 1;"><img id="frontend-image" />';
    }
    return __( 'Please Login To Upload', 'text-domain' );
}

And inside your theme folder create a folder called js and inside the folder create a file called media-uploader.js. Inside the media-uploader.js file place the below code-

(function($) {
    // When the DOM is ready.
    $(function() {
        var file_frame; // variable for the wp.media file_frame

        // attach a click event (or whatever you want) to some element on your page
        $( '#frontend-button' ).on( 'click', function( event ) {
            event.preventDefault();

            // if the file_frame has already been created, just reuse it
            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 // set this to true for multiple file selection
            });

            file_frame.on( 'select', function() {
                attachment = file_frame.state().get('selection').first().toJSON();

                // do something with the file here
                $( '#frontend-button' ).hide();
                $( '#frontend-image' ).attr('src', attachment.url);
            });

            file_frame.open();
        });
    });

})(jQuery);

Actually the whole above thing is ultimately giving you a shortcode called the_dramatist_front_upload. Place this shortcode there, where you want to see your media manager. And it will show the media manager only to the logged in user. Hope that thing helps you. I borrowed the scripts from here