Get image post ID in media upload

Question

I am developing a plugin that adds a Custom Post Type to my theme. It's a retail directory and the post type is a retail listing.

Everything is working fine. I can upload content to the DB and then print in a customized CSS framework I have developed. However, when i want to upload and display an image, that's when I have problems.

The problem occurs when the image is uploaded. I use the update_post_meta() to update the meta information of the image which is related it to the post ID and post it to the database table "wp_postmeta" under column "meta_value". I also use the WP media upload JQuery Code to select the image. I'm not sure where the problem is exactly, but I know it's with the upload because when the image goes into the "meta_value" column has value NaN and not the ID value that it should be.

Here's the upload code:

add_action( 'save_post', 'process_image_meta', 10, 2 );

function process_image_meta( $post_id, $post ) {
        update_post_meta( $post_id, '_image_id', $_POST['upload_image_id'] );
    }

And the wp media uploader code:

And finally, the display code:

function display_retail_listing_meta_box($retail_listing) {
    // Retrieve current shop details based on retail lisitng ID

    global $post;

        $image_src = '';
    $image_id = get_post_meta( $post->ID, '_image_id', true);
    $image_src = wp_get_attachment_url( $image_id );
?>

<table>
<tr>
<td style="width: 100%">Image Upload</td>
<td><img id="shop_image" src="<?php echo $image_src; ?>" style="max-width:100%;" />
<input type="text" name="upload_image_id" id="upload_image_id" value="<?php echo $image_id; ?>" />
<a title="<?php esc_attr_e( 'Upload Image' ) ?>" href="#" id="upload-image"><?php _e( 'Upload Image' ) ?></a>
<a title="<?php esc_attr_e( 'Remove Image' ) ?>" href="#" id="remove-image" style="<?php echo ( ! $image_id ? 'display:none;' : '' ); ?>"><?php _e( 'Remove Image' ) ?></a>
</tr>
</table>

Followed by the WP Media Upload Code:

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

        // save the send_to_editor handler function
        window.send_to_editor_default = window.send_to_editor;

        $('#upload-image').click(function(){

            // replace the default send_to_editor handler function with our own
            window.send_to_editor = window.attach_image;
            tb_show('', 'media-upload.php?$post_id=<?php echo $post->ID ?>&amp;type=image&amp;TB_iframe=true');

            return false;
        });

        $('#remove-image').click(function() {

            $('#upload_image_id').val('');
            $('img').attr('src', '');
            $(this).hide();

            return false;
        });

        // handler function which is invoked after the user selects an image from the gallery popup.
        // this function displays the image and sets the id so it can be persisted to the post meta
        window.attach_image = function(html) {

            // turn the returned image html into a hidden image element so we can easily pull the relevant attributes we need
            $('body').append('<div id="temp_image">' + html + '</div>');

            var img = $('#temp_image').find('img');

            imgurl   = img.attr('src');
            imgclass = img.attr('class');
            imgid    = parseInt(imgclass.replace(/\D/g, ''), 10);

            $('#upload_image_id').val(imgid);
            $('#remove-image').show();

            $('img#shop_image').attr('src', imgurl);
            try{tb_remove();}catch(e){};
            $('#temp_image').remove();

            // restore the send_to_editor handler function
            window.send_to_editor = window.send_to_editor_default;

        }

    });
    </script>

Answer 1

The action sends the $post_id just like you have so that's not the problem.

Have you tried a var_dump of $_POST to make sure it's actually posting something other than null?

Also, using the save_post action is going to be called every time a post is saved, so you probably need to use the save_post_{custom_post_type} action, replacing {custom_post_type} with your actual custom post type (if it is one).

You could try this:

function process_image_meta( $post_id, $post ) {
        error_log('POSTED: ' . $_POST['upload_image_id']);
        $result = update_post_meta( $post_id, '_image_id', $_POST['upload_image_id'] );
        error_log('Image Meta Added: ' . $result);
    }

Make sure you have this in your wp-config.php:

define('WP_DEBUG', true);
define('WP_DEBUG_LOG', true);

Then check the /wp-content/debug.log file for the output

Answer 2

i think the problem is in your save meta values function, try with global $post;

function process_image_meta() {
    global $post, $post_id;
    update_post_meta( $post_id, '_image_id', $_POST['upload_image_id'] );
}