wordpress uploader trigger

adb.css

 span.delete,
 span.delete,
span.delete_media {
    position: absolute;
    top: 0;
    right: 0;
    display: none;
    cursor: pointer;
    z-index: 1;
    color: #555555;
    float: right;
    font-size: 14px;
    font-family: Tahoma, sans-serif;
    background: #fff;
    padding: 7px 12px;
    font-weight: bold;
}

 span.delete,
span.delete,
span.delete_media {
    display: block;
}



 .images-container .single-image img,
 .images-containerBG .single-imageBG img {
    float: left;
    clear: both;
    position: relative;
    z-index: 0;
    width: 100%;
    height: 100%
}

admin.js

    jQuery(document).on('click', '.page_upload_trigger_element', function(e) {
    
        var _custom_media = true;
        var _orig_send_attachment = wp.media.editor.send.attachment;
        var send_attachment_bkp = wp.media.editor.send.attachment;
        var button = jQuery(this);
        var id = button.attr('id').replace('_extra', '');
  
        _custom_media = true;
        wp.media.editor.send.attachment = function (props, attachment) {
            if (_custom_media) {

                jQuery("#" + id).val(attachment.url);
           
                var filename = attachment.url;
                var file_extension = filename.split('.').pop();//find extension
                if (file_extension == "jpg" || file_extension == "jpeg" || file_extension == "png" || file_extension == "gif"  || file_extension == "webp") {
                    console.log ("dsdsd")
                    jQuery("#" + id + '_li .background_attachment_metabox_container').html('<div class="images-containerBG"><div class="single-imageBG"><span class="delete">X</span>  <img data-targetid="wow_pageSetting_backgroundImage" class="attachment-100x100 wp-post-image" witdh="100" height="100" src="' + attachment.url + '"></div></div>');
                } else {
                    jQuery("#" + id + '_li .background_attachment_metabox_container').html('<div class="images-containerBG">' +
                        '<div style="width: 53px; height: 53px;" class="single-imageBG"><span data-targetid="wow_pageSetting_backgroundImage"  class="delete_media">X</span> ' +
                        '<span style="font-size: 46px" class="info dashicons dashicons-admin-media"></span> </div></div>');
                }
                /* important notes jQuery("#" + id + '_li .background_attachment_metabox_container').html('<div class="images-containerBG">' +
                 '<div class="single-imageBG_"><span class="info">'+attachment.url+'</span></div></div>');*/

            } else {
                return _orig_send_attachment.apply(this, [props, attachment]);
            }
        };
        wp.media.editor.open(button);
        return false;
    });

index.html

 <div class="column column-25 ">
                                    <label for="stnc_wp_kiosk_Metabox_video"></label>
                                    <input type="text" value="" class="" style="display:none;" name="stnc_wp_kiosk_Metabox_video"
                                        id="stnc_wp_kiosk_Metabox_video">

                                    <input id="stnc_wp_kiosk_Metabox_video_extra"
                                        class="page_upload_trigger_element button button-primary button-large"
                                         name="videos[0][picture]" type="button" value="Select Picture">
                                        
                                    <!-- <span class="form_hint">Etc</span> -->
                                    <br>
                                    <div id="stnc_wp_kiosk_Metabox_video_li">
                                    <div class="background_attachment_metabox_container">
                                      
                                      </div>

                                    </div>
                                   
                                    
                                </div>