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>