Jquery window.send_to_editor

Question

Couldn't come up with a good title for this.

I've got a build in WordPress where I have multiple image uploads using the built in WordPress media uploader. How it's working is, after you upload and choose "insert", jQuery is inserting the image path into a text field, which contains the ID. Once you save, the text field is saved in the options table.

Works perfectly if you only have 1 upload field. Once you add more uploads, every upload field gets saved with the same image path. Just need each upload button to only insert the value for it's associated text field.

I've tried to use .each but couldn't get it working correctly. Also tried using .attr('id') to the value insert, but nothing doing there.

Here is my jQuery and the markup:

jQuery('.upload-button').click(function() {
    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');
    jQuery('.upload').val(imgurl);
    tb_remove();
};

<div class="upload_field"
    <input type="text" name="upload_one" id="upload_one" class="upload" value="" />
    <input type="button" class="upload-button" value="Upload Image" />
</div>

<div class="upload_field"
    <input type="text" name="upload_two" id="upload_two" class="upload" value="" />
    <input type="button" class="upload-button" value="Upload Image" />
</div>

<div class="upload_field"
    <input type="text" name="upload_three" id="upload_three" class="upload" value="" />
    <input type="button" class="upload-button" value="Upload Image" />
</div>

For further info, here is the uploader setup I'm using: http://www.webmaster-source.com/2010/01/08/using-the-wordpress-uploader-in-your-plugin-or-theme/

Any help, as always, is greatly appreciated.

Answer 1

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

Answer 2

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.

<?php
function 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&amp;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..."/>

Answer 3

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>

Answer 4

This example restores the window.send_to_editor() func by binding the tb_unload event as soju mentioned above.

var targetfield = '';
var orig_send_to_editor = window.send_to_editor;
jQuery('.fwb_uploadbtn').click(function() {
      targetfield = jQuery(this).prev('.fwb_uploadimg');
      tb_show('', 'media-upload.php?type=image&TB_iframe=true');

      //restore send_to_editor() when tb closed
      jQuery("#TB_window").bind('tb_unload', function () {
        window.send_to_editor = orig_send_to_editor;
      });

      //temporarily redefine send_to_editor()
      window.send_to_editor = function(html) {
        imgurl = jQuery('img',html).attr('src');
        jQuery(targetfield).val(imgurl);
        tb_remove();
      }
      return false;
});