Jquery window.send_to_editor
Just need to be able to specify the input field that the value is inserted into.
var uploadID = ''; /*setup the var*/jQuery('.upload-button').click(function() { uploadID = jQuery(this).prev('input'); /*grab the specific input*/ formfield = jQuery('.upload').attr('name'); tb_show('', 'media-upload.php?type=image&TB_iframe=true'); return false;});window.send_to_editor = function(html) { imgurl = jQuery('img',html).attr('src'); uploadID.val(imgurl); /*assign the value to the input*/ tb_remove();};
I use this to ensure other functionality works too for the editor and I also pass the id of the input field that I want the image in.
<?phpfunction customPostTypeUploader() { if(isset($_GET["post_type"])) {?> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"> var uploadID = ''; var storeSendToEditor = ''; var newSendToEditor = ''; jQuery(document).ready(function() { storeSendToEditor = window.send_to_editor; newSendToEditor = function(html) { imgurl = jQuery('img',html).attr('src'); $("#" + uploadID.name).val(imgurl); tb_remove(); window.send_to_editor = storeSendToEditor; }; }); function Uploader(id) { window.send_to_editor = newSendToEditor; uploadID = id; formfield = jQuery('.upload').attr('name'); tb_show('', 'media-upload.php?type=image&TB_iframe=true'); return false; } </script><?php }}add_action("admin_head", "customPostTypeUploader");?>
Then use the input fields of a form in your meta box like this...
<input type="text" id="image_1" name="uploaded_image_1" value="" size="40" /><input type="button" onclick="Uploader(image_1);" title="Upload image" class="upload-button" id="add_image" value="Browse..."/>
The problem with these solutions is that you won't be able to insert images into posts as the function to do so has been overridden. Here is a modification to the above code that will allow images to still be inserted into the post content through the editor.
jQuery(document).ready(function() {var orig_send_to_editor = window.send_to_editor;jQuery('.upload_image_button').click(function() { formfield = jQuery(this).prev('input'); tb_show('', 'media-upload.php?type=image&TB_iframe=true'); window.send_to_editor = function(html) { var regex = /src="(.+?)"/; var rslt =html.match(regex); var imgurl = rslt[1]; formfield.val(imgurl); tb_remove(); jQuery('#show_'+formfield.attr('name')).html('<img src="'+imgurl+'" width="150" />') window.send_to_editor = orig_send_to_editor; } return false; });});
The main difference is that this code saves the original function and reassigns it back to send_to_editor.
Here is the HTML to go with it as an example:
<input type="hidden" name="image_1" /><?php $post_img = get_post_meta($post->ID,'item_image',true); ?><input class="upload_image_button" type="button" value="<?php echo (empty($post_img)?'Upload Image':'Change Image') ?>" /><div id="show_image_1"><?php echo (!empty($post_img)?"<img src='$post_img' width='100' />":'')?></div>