How to get the image-URL from Media-Upload in a post?

Question

I generated a new MetaBox for all standard posts in WordPress 3.1. There I generate a input:text field with the ID _meta_fotos[pic], which should hould the image url generated by the standard media-uploader. I want to use the standard media-uploader from the standard post window. So I generated the following JavaScript code.

jQuery(document).ready(function() {
  jQuery('#_meta_fotos\\[pic\\]').focusin(function() {
    formfield = jQuery('#_meta_fotos\\[pic\\]').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('#_meta_fotos\\[pic\\]').val(imgURL);
    tb_remove();
  }
});

On the first step all works fine. But I don't get the real image URL. All I get back is a URL to the correct uploads-path with a filename blank.gif.

I checked if the ThickBox is called by the focusin-function: It is alright.

I think the problem ist in the send_to_editor-function. It returns in html the code from the underlaying main-Page and not from the popup-window of the media-uploader/thickbox.

Can anyone help me, to find the mistake? Any help is aprreciated!

Answer 1

I hate it to answer my own question. But after hours of searching and trying I found a solution that works. I offer this solution, because it can't be interesting for others having the same problem. And for discussion, if there is a better way to get rid of the problem. Perhaps it is not very elegant, but it works ;-)

The peak is to change the click-event for the "Insert into Post"-Button in the ThickBox.

edit Because the code worked only for ONE image in the library I had cto chnge the line in the click-function. Now it works with more then one picture

jQuery(document).ready(function() {
  //change click event for insert into post
  (function(){ 
var tb_show_temp = window.tb_show; 
window.tb_show = function() { 
  tb_show_temp.apply(null, arguments); 
  var iframe = jQuery('#TB_iframeContent');
  iframe.load(function() {
    var iframeDoc = iframe[0].contentWindow.document;
    var iframeJQuery = iframe[0].contentWindow.jQuery;
    var buttonContainer = iframeJQuery('td.savesend');
    if (buttonContainer) {
      var btnSubmit = jQuery('input:submit', buttonContainer);
      iframeJQuery(btnSubmit).click(function(){
        fldID = jQuery(this).attr('id').replace('send', '').replace('[', '').replace(']', '');
        var imgurl = iframeJQuery('input[name="attachments\\['+fldID+'\\]\\[url\\]"]').val();
        jQuery('#_meta_fotos\\[pic\\]').val(imgurl);
        jQuery('#picPreview').attr('src', imgurl);
        tb_remove();
      });
    }
  });
   }
  })()
//open uploader
jQuery('#_meta_fotos\\[pic\\]').focusin(function() {
formfield = jQuery('#_meta_fotos\\[pic\\]').attr('name');
tb_show('Use pictures', 'media-upload.php?type=image&tab=library&TB_iframe=1');
return false;
});
});

Answer 2

I did something similar for a theme settings page i helped someone with, it looked a little different to what you have, but i'm going to post the code so you can compare.

jQuery:
Literally just the applicable parts taken from a working script i've used.

jQuery(document).ready( function($) {
    $('img.font').click(function() {    
        form_field = $(this).next().next('input'); 
        tb_show('', 'media-upload.php?tab=type&from=t31os&post_id=0&TB_iframe=true');
        return false;
    })
    .hover(function() {
        $(this).css({'cursor':'pointer'});
    }); 

    window.send_to_editor = function(html) {
        media_url = $(html).attr('href');
        tb_remove();
        $(form_field).val(media_url);
    }
});

In my case i had an image that trigeered the upload window, and passed back the value when the user clicked the Insert into settings field button(see below).

You'll notice that firstly there's a post ID passed in the media upload request, you should need this in order to see an Insert into post button in the window. Secondly there's an additional request parameter from=t31os, this allows me to selectively change the Insert into Post text, like so..

add_filter( 'gettext', 'change_insert_into_post', null, 2 );
function change_insert_into_post( $translation, $original ) {
    if( !isset( $_REQUEST['from'] ) )
        return $translation;

    if( $_REQUEST['from'] == 't31os' && $original == 'Insert into Post' )
        return 'Insert into settings field';

    return $translation;
}

Hope that helps.

Follow-up from comments:
Here's some images of the provided code working inside my theme options page(the arrow is my image to trigger the uploader).

The field.

The uploader window.

The result.

You'll notice i didn't bother with the gettext filter, and that's simply because it's not integral to the code functionality(that's a personal touch and makes no difference here).

Have you correctly enqueued the necessary scripts? Namingly media-upload and thickbox, along with the thickbox stylesheet.