0

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

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

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.