Override the template for the Attachment “thumbnails” in the Media Grid

I’m trying to customize the template of the Media Browser (when clicking on “Add Media” button within Edit Post page), by adding a caption with the filename on each thumbnail so I don’t need to select the image to check its filename on the Attachment Details panel.

What I have done so far is a version of the solution described in here: https://stackoverflow.com/a/25948448/8717608

I’m using the “tmpl-attachment” template, from line 506 of media-template.php which is exactly what I need to customize: https://github.com/WordPress/WordPress/blob/master/wp-includes/media-template.php

By clicking the Add Media button I was expecting to see all the thumbs with its filename in a black background on the bottom of the image, but nothing is happening. Looks like I’m missing something and I would appreciate any help to find out what is wrong.

add_action( 'wp_enqueue_media', 'add_media_overrides' );
function add_media_overrides() {
    add_action( 'admin_footer-post.php', 'override_media_templates' );
}
function override_media_templates(){
    ?> 
    <script type="text/html" id="tmpl-attachment_custom">
        <div class="attachment-preview js--select-attachment type-{{ data.type }} subtype-{{ data.subtype }} {{ data.orientation }}">
            <div class="thumbnail">
                <# if ( data.uploading ) { #>
                    <div class="media-progress-bar"><div style="width: {{ data.percent }}%"></div></div>
                <# } else if ( 'image' === data.type && data.sizes ) { #>
                    <div class="centered">
                        <img src="{{ data.size.url }}" draggable="false" alt=""  style="height: 90%; transform: translate(-50%,-55%);"/>
                        <div style="
                            transform: translate(-50%,-100%);
                            background-color: black;
                            color: white;
                            margin-top: 50%;
                            font-size: 80%;
                            z-index: 9999;
                            position: relative;
                            vertical-align: middle;
                        ">{{ data.filename }}</div>
                    </div>
                <# } else { #>
                    <div class="centered">
                        <# if ( data.image && data.image.src && data.image.src !== data.icon ) { #>
                            <img src="{{ data.image.src }}" class="thumbnail" draggable="false" alt="" />
                        <# } else if ( data.sizes && data.sizes.medium ) { #>
                            <img src="{{ data.sizes.medium.url }}" class="thumbnail" draggable="false" alt="" />
                        <# } else { #>
                            <img src="{{ data.icon }}" class="icon" draggable="false" alt="" />
                        <# } #>
                    </div>
                    <div class="filename">
                        <div>{{ data.filename }}</div>
                    </div>
                <# } #>
            </div>
            <# if ( data.buttons.close ) { #>
                <button type="button" class="button-link attachment-close media-modal-icon"><span class="screen-reader-text"><?php _e( 'Remove' ); ?></span></button>
            <# } #>
        </div>
        <# if ( data.buttons.check ) { #>
            <button type="button" class="check" tabindex="-1"><span class="media-modal-icon"></span><span class="screen-reader-text"><?php _e( 'Deselect' ); ?></span></button>
        <# } #>
        <#
        var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly';
        if ( data.describe ) {
            if ( 'image' === data.type ) { #>
                <input type="text" value="{{ data.caption }}" class="describe" data-setting="caption"
                    placeholder="<?php esc_attr_e( 'Caption this image&hellip;' ); ?>" {{ maybeReadOnly }} />
            <# } else { #>
                <input type="text" value="{{ data.title }}" class="describe" data-setting="title"
                    <# if ( 'video' === data.type ) { #>
                        placeholder="<?php esc_attr_e( 'Describe this video&hellip;' ); ?>"
                    <# } else if ( 'audio' === data.type ) { #>
                        placeholder="<?php esc_attr_e( 'Describe this audio file&hellip;' ); ?>"
                    <# } else { #>
                        placeholder="<?php esc_attr_e( 'Describe this media file&hellip;' ); ?>"
                    <# } #> {{ maybeReadOnly }} />
            <# }
        } #>
    </script>
    <script>
        jQuery(document).ready( function($) {
            if( typeof wp.media.view.Attachment != 'undefined' ){
                wp.media.view.Attachment.prototype.template = wp.media.template( 'attachment-custom' );
            }
        });
    </script>
    <?php
}

The page I need help with: [log in to see the link]