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();
    }
} );

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();
    }
} );

• custom-post-types
• metabox
• uploads
• javascript
• errors

1 Answer 1

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

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