Wp media gallery metabox Cannot read property ‘state’ of undefined

I have a task to create media gallery images in post type as like “woocommerce product gallery images” without any plugin, It’s all custom with meta box. I have created metabox “Gallery Images” and also have JS, but when i click on Add image button then it’s not opening gallery to select images, It’s returning errors in console

Uncaught TypeError: Cannot read property ‘state’ of undefined

I found this code from here source

Here are some screenshots:
In 2nd pic, I did console these:

console.log(wp); console.log(wp.media); console.log(wp.media.gallery); console.log(wp.media.gallery.edit(‘[ gallery ids=”‘ + val + ‘” ]’)+ ” — frame”);

Now, here is my code:

/*
 * Add a meta box
*/
function post_gallery_images_metabox() {
    add_meta_box(
        'post_gallery_images',
        'Gallery Images',
        'post_gallery_images_metabox_callback',
        'inject_template',
        'side',
        'default'
    );
}
add_action( 'add_meta_boxes', 'post_gallery_images_metabox' );

/*
 * Meta Box Callback function
*/
function post_gallery_images_metabox_callback( $post ) {

    wp_nonce_field( 'save_feat_gallery', 'inject_feat_gallery_nonce' );

    $meta_key = 'template_gallery_images';
    echo inject_image_uploader_field( $meta_key, get_post_meta($post->ID, $meta_key, true) );
}

function inject_image_uploader_field( $name, $value = '' ) {

    $image = 'Upload Image';
    $button = 'button';
    $image_size = 'full';
    $display = 'none';

?>

    <p><?php
        _e( '<i>Choose Images</i>', 'mytheme' );
    ?></p>

    <label>
        <div class="gallery-screenshot clearfix">
            <?php
            {
                $ids = explode(',', $value);
                foreach ($ids as $attachment_id) {
                    $img = wp_get_attachment_image_src($attachment_id, 'thumbnail');
                    echo '<div class="screen-thumb"><img src="' . esc_url($img[0]) . '" /></div>';
                }
            }
            ?>
        </div>
        <input id="edit-gallery" class="button upload_gallery_button" type="button"
               value="<?php esc_html_e('Add/Edit Gallery', 'mytheme') ?>"/>
        <input id="clear-gallery" class="button upload_gallery_button" type="button"
               value="<?php esc_html_e('Clear', 'mytheme') ?>"/>
        <input type="hidden" name="<?php echo esc_attr($name); ?>" id="<?php echo esc_attr($name); ?>" class="gallery_values" value="<?php echo esc_attr($value); ?>">
    </label>
<?php   
}

/*
 * Save Meta Box data
*/
function template_img_gallery_save( $post_id ) {
    if ( !isset( $_POST['inject_feat_gallery_nonce'] ) ) {
        return $post_id;
    }

    if ( !wp_verify_nonce( $_POST['inject_feat_gallery_nonce'], 'save_feat_gallery') ) {
        return $post_id;
    } 

    if ( isset( $_POST[ 'template_gallery_images' ] ) ) {
        update_post_meta( $post_id, 'template_gallery_images', esc_attr($_POST['template_gallery_images']) );
    } else {
        update_post_meta( $post_id, 'template_gallery_images', '' );
    }
}
add_action('save_post', 'template_img_gallery_save');

JS:

jQuery(document).ready(function(jQuery) {
    jQuery('.upload_gallery_button').click(function(event){
        var current_gallery = jQuery( this ).closest( 'label' );
        console.log(current_gallery);


        if ( event.currentTarget.id === 'clear-gallery' ) {
            //remove value from input
            current_gallery.find( '.gallery_values' ).val( '' ).trigger( 'change' );

            //remove preview images
            current_gallery.find( '.gallery-screenshot' ).html( '' );
            return;
        }

        // Make sure the media gallery API exists
        if ( typeof wp === 'undefined' || !wp.media || !wp.media.gallery ) {
            return;
        }
        event.preventDefault();

        // Activate the media editor
        var val = current_gallery.find( '.gallery_values' ).val();
        var final;

        if ( !val ) {
            final = '[ gallery ids="0" ]';
        } else {
            final = '[ gallery ids="' + val + '" ]';
        }
        var frame = wp.media.gallery.edit( final );
        console.log(wp);
        console.log(wp.media);
        console.log(wp.media.gallery);
        console.log(frame + " -- frame");


        frame.state( 'gallery-edit' ).on('update', function( selection ) {
            console.log('coming');

                //clear screenshot div so we can append new selected images
                current_gallery.find( '.gallery-screenshot' ).html( '' );

                var element, preview_html = '', preview_img;
                var ids = selection.models.map(
                    function( e ) {
                        element = e.toJSON();
                        preview_img = typeof element.sizes.thumbnail !== 'undefined' ? element.sizes.thumbnail.url : element.url;
                        preview_html = "<div class='screen-thumb'><img src='" + preview_img + "'/></div>";
                        current_gallery.find( '.gallery-screenshot' ).append( preview_html );
                        return e.id;
                    }
                );

                current_gallery.find( '.gallery_values' ).val( ids.join( ',' ) ).trigger( 'change' );
            }
        );
        return false;
    });
});

I don’t know what to do, why this error is occurring. Please help me.

Answer

Replace [ gallery ids="0" ] with , and [ gallery ids="' + val + '" ] with

Advertisement

Answer