Image media upload metabox

Question

I've created my first image upload metabox but seem to be having problems.

1. The data doesn't get saved when I add an image then update the page - I'm sure this is a typo on my end which I'm failing to see.

2. The second input box's upload image button doesn't load the media library box like the first one does - Js issue possibly?

Here is my code

<?php

/*
Plugin Name: Meta Box Media Library Image 
Plugin URI: 
Description: Adds the ability to select an image from the media library
Version: 1.0
Author: Danny Wardle
Author URI: www.thevisionists.com
License: GPLv2
*/

//second metabox

?>
<?php 
add_action( 'add_meta_boxes', 'dd_image_create' );

function dd_image_create() {

//create a custom meta image box
add_meta_box ( 'dd-meta-image', 'Display chosen image', 'dd_image_function', 'page', 'normal', 'high' );

}

?>

<?php

function dd_image_function( $post ) {
$dd_image_one = get_post_meta ($post->ID, 'dd_image_one', true);
$dd_image_two = get_post_meta($post->ID, 'dd_image_two', true);
?>
Image One
<input id="dd_image_one" type="text" size="75" name="dd_image_one" value="<?php echo esc_url( $dd_image_one ); ?>" />
<input id="upload_image_button" value="Media Library Upload" class="button-secondary" />
<br /> Enter an image URL or use an image from the Media Library
<br />
<br />
Image Two
<input id="dd_image_two" type="text" size="75" name="dd_image_two" value="<?php echo esc_url( $dd_image_two ); ?>" />
<input id="upload_image_button" value="Media Library Upload" class="button-secondary" />
<br /> Enter an image URL or use an image from the Media Library

<?php

}

//script actions with page detection
add_action('admin_print_scripts-post.php', 'dd_image_admin_scripts');
add_action('admin_print_scripts-post-new.php', 'dd_image_admin_scripts');

function dd_image_admin_scripts() {
wp_enqueue_script( 'boj-image-upload',
plugins_url( '/dd-meta-box/dd-meta-image.js' ),
array( 'jquery', 'media-upload', 'thickbox' ) );
}

//style actions with page detection
add_action('admin_print_styles-post.php', 'dd_image_admin_styles');
add_action('admin_print_styles-post-new.php', 'dd_image_admin_styles');

function dd_image_admin_styles() {
wp_enqueue_style( 'thickbox' );
}

// hook to save the meta data 

add_action ( 'save_post', 'dd_image_save_meta' );

function dd_image_save_meta( $post_id ) {
//save the metadata

//verify the metadata is set
if ( isset ($_POST['dd_image_one'])) {
//save the metadata
update_post_meta( $post_id, 'dd_image_one', esc_url_raw( $_POST['dd_image']));

}

if ( isset ($_POST['dd_image_two'])) {
    update_post_meta( $post_id, 'dd_image_two', esc_url_raw( $_POST['dd_image']));
}

}

?>

js file code

jQuery(document).ready(function($) {
var formfield = null;

$('#upload_image_button').click(function() {
$('html').addClass('Image');
formfield = $('#dd_image').attr('name');
tb_show('', 'media-upload.php?type=image&TB_iframe=true');
return false;
});

// user inserts file into post.
//only run custom if user started process using the above process
// window.send_to_editor(html) is how wp normally handle the received data

window.original_send_to_editor = window.send_to_editor;
window.send_to_editor = function(html){
var fileurl;

if (formfield != null) {
fileurl = $('img',html).attr('src');
$('#dd_image').val(fileurl);
tb_remove();
$('html').removeClass('Image');
formfield = null;
} else {
window.original_send_to_editor(html);
}
};
});

Answer 1

In your JS you have twice the call to $('#dd_image')and in your HTML you have no input named dd_image, but dd_image_one and dd_image_two...

And also in your HTML you have twice id="upload_image_button"and it's bad :-). This way when you click on the first or the second button you do the same exact call and modify only one non-existent input (#dd_image)

Your button must have two different ids.

Once you've changed the ids, the simplest way to make both button work is to duplicate your JS call and change the ids where it should (button and image input)

Hope it'll work for you.