2

I'm trying to create a custom media uploader in a custom meta box on a custom post type. That's a lot of custom. I have a javascript file enqueued which runs the wp.media class when the Add Image button is clicked. When I tested the button I receive the following error: "Uncaught ReferenceError: wp is not defined" I found several resources that solved this problem by adding wp_enqueue_media(); but when I attempt to do so it doesn't fix the problem. Please help?

Meta box creation/enqueued script:

function cns_add_custom_metabox(){
    add_meta_box( 'fet-media-fields', 'Listing Media', 'cns_display_media' );
}
add_action( 'add_meta_boxes', 'cns_add_custom_metabox' ); 

function cns_display_media( $post ){ 

    ?>

    <div id="metabox-wrapper">
        <img id="image-tag">
        <input type="hidden" id="img-hidden-field" name="custom_image_data">
        <input type="button" id="image-upload-button" class="button" value="Add Image">
        <input type="button" id="image-delete-button" class="button" value="Remove Image">

    </div>


    <?php
}

function register_admin_script() {
    wp_enqueue_script( 'cns-image-upload.js', get_stylesheet_directory_uri() . '/js/cns-image-upload.js', array('jquery') );
}

add_action( 'admin_enqueue_scripts', 'register_admin_script' );

Javascript file - cns-image-upload.js:

var addButton = document.getElementById( 'image-upload-button' );
var deleteButton = document.getElementById( 'image-delete-button' );
var img = document.getElementById( 'image-tag' );
var hidden = document.getElementById( 'img-hidden-field' );
var customUploader = wp.media({
    title: 'Select and Image',
    button:{
        text: 'User this Image'
    },
    multiple: false
});

addButton.addEventListener( 'click', function(){
    if( customUploader ){
        customUploader.open();
    }
} );

1 Answer 1

3

Figured it out! I didn't have the javascript code wrapped with the following:

jQuery(document).ready( function($){ });

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.