I have created a metabox to upload images. Whenever I click on the "Select Image" button the Image Uploader Box successfully pops up but when I select an image and click the "Insert" button the image URL doesn't get inserted in the text field. Please tell me what to do so that whenever I insert an image the image URL gets inserted into the correct field.

var image_field;

jQuery( function( $ ) {
    $( document ).on( 'click', 'input.select-img', function( evt ) {
        image_field = $( this ).siblings( '.img' );
        check_flag  = 1;

        tb_show( '', 'media-upload.php?type=image&TB_iframe=true' );

        window.send_to_editor = function( html ) {
            imgurl = $( 'img', html ).attr( 'src' );
            image_field.val( imgurl );
            tb_remove();
        }

        return false;
    } );
} );

I have created a metabox to upload images. Whenever I click on the "Select Image" button the Image Uploader Box successfully pops up but when I select an image and click the "Insert" button the image URL doesn't get inserted in the text field. Please tell me what to do so that whenever I insert an image the image URL gets inserted into the correct field.

var image_field;

jQuery( function( $ ) {
    $( document ).on( 'click', 'input.select-img', function( evt ) {
        image_field = $( this ).siblings( '.img' );
        check_flag  = 1;

        tb_show( '', 'media-upload.php?type=image&TB_iframe=true' );

        window.send_to_editor = function( html ) {
            imgurl = $( 'img', html ).attr( 'src' );
            image_field.val( imgurl );
            tb_remove();
        }

        return false;
    } );
} );

• php
• jquery
• javascript

2 Answers 2

It is just a little syntax error in your window.send_to_editor function:

imgurl = $( 'img', html ).attr( 'src' );

should be

imgurl = $( 'img', $( html ) ).attr( 'src' );

because your html variable is neither a valid DOM nor a jQuery Element.

Additional Note: If you want to use the Thickbox on multiple text fields, I'd recommend storing and creating your send_to_editor function:

var image_field,
    store_send_to_editor = null,
    new_send_to_editor = null;

jQuery( function( $ ) {
    store_send_to_editor = window.send_to_editor;
    new_send_to_editor = function(html) {
        imgurl = $( 'img', $( html ) ).attr( 'src' );
        image_field.val( imgurl );
        tb_remove();
        window.send_to_editor = store_send_to_editor;
    };
    $( document ).on( 'click', 'input.select-img', function( evt ) {
        image_field = $( this ).siblings( '.img' );
        check_flag  = 1;
        tb_show( '', 'media-upload.php?type=image&TB_iframe=true' );
        window.sent_to_editor = new_send_to_editor;
        return false;
    } );
} );

I was also recently having issues with window.send_to_editor and I'm using very similar code. I noticed that when the selected image has the "Link URL" field filled in it worked but when empty it didn't. I then noticed that if the html variable only has the image markup the original code returns undefined when you try to get the src attribute. I came up with the following check and repurposed it to match your code.

window.send_to_editor = function(html) {
    var imgurl,
        srcCheck = $(html).attr('src');

    if (srcCheck && typeof srcCheck !== 'undefined') {
        imgurl = srcCheck;
    } else {
        imgurl = $('img', html).attr('src');
    }

    image_field.val( imgurl );
    tb_remove();
};

The caveat with the above code is that it basically just grabs the first src attribute value if the conditional is true though I don't think there would be a case where there could be multiple image tags returned. Anyway, the above is working for my purposes.