How can I receive the image id using the media box?

Question

The code below allows me to retrieve the image string, when Insert to Post has been pressed, but what would be the correct way to retrieve the ID of the image? So I can retrieve all information through wp_get_attachment_image_src?

jQuery(document).ready(function() {

    var form_field;
    var upload_field_ID = '';

    jQuery( '.upload_image_button' ).click( function() {

        jQuery( 'html').addClass( 'Image' );

        upload_field_ID = jQuery(this).prev('input');
        form_field      = upload_field_ID.attr( 'name' );

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

        return false;

    });

    window.original_send_to_editor = window.send_to_editor;
    window.send_to_editor = function( html ) {

        if (form_field) {
            var image_url = jQuery( 'img', html ).attr( 'src' );
            upload_field_ID.val( image_url );
            tb_remove();
            jQuery( 'html').removeClass( 'Image' );
        } else {
            window.original_send_to_editor( html );
        }

    }

});

Answer 1

check it out works find for me. the thing is that the function tb_show need to know to who pitch the return. So you just go get the post_id and put it in the url pass to tb_show, if its a new one then you pass it like its a new one.

so i show you my solution just so you can understand better but hey.. easy when you know how

jQuery('#uploadPDF').click(
        function() 
        {

             window.send_to_editor = function(html){
                 fileurl = html.toString();
                 jQuery('#path_PDF').val(fileurl);                  
                 tb_remove(); 
            }
             var postId = location.href;
             var startPosition = postId.indexOf("post=");
             var url;

             if (startPosition != -1)
             {
                var postId = postId.substr(startPosition);
                var endPosition = postId.indexOf("&");
                var postId = postId.substring(5, endPosition);//5 POUR POST=

                url = 'media-upload.php?post_id=';

                url = url.concat(postId,'&type=image&TB_iframe=true');
             }
             else
             {
                url = 'media-upload.php?post-new.php?&type=image&TB_iframe=true';
             }


             tb_show( '', url);
             return false;
        }
    );

Answer 2

You can also add in a filter that can add the ID as a html5 data attribute to the returned HTML fragment from send_to_editor.

public function image_to_editor($html, $id, $caption, $title, $align, $url, $size, $alt){
        $dom = new DOMDocument();
        @$dom->loadHTML($html);

        $x = new DOMXPath($dom);        
        foreach($x->query("//img") as $node){   
            $node->setAttribute("data-id", $id);
        }

        if($dom->getElementsByTagName("a")->length == 0){
            $newHtml = $dom->saveXML($dom->getElementsByTagName('img')->item(0));
        }else{
            $newHtml = $dom->saveXML($dom->getElementsByTagName('a')->item(0));
        }

        return $newHtml;
}

add_filter('image_send_to_editor', array(&$this,'image_to_editor'), 1, 8);

Then in your javascript handler for window.send_to_editor;

$('img',html).data('id'));

You can do the same thing for media uploads as well.

Answer 3

jQuery(document).ready(function() {

    var form_field;
    var upload_field_ID = '';

    jQuery( '.upload_image_button' ).click( function() {

        jQuery( 'html').addClass( 'Image' );

        upload_field_ID = jQuery(this).prev('input');
        form_field      = upload_field_ID.attr( 'name' );

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

        return false;

    });

    window.original_send_to_editor = window.send_to_editor;
    window.send_to_editor = function( html ) {

        if (form_field) {
            var class_string    = jQuery( 'img', html ).attr( 'class' );
            var image_url       = jQuery( 'img', html ).attr( 'src' );
            var classes         = class_string.split( /\s+/ );
            var image_id        = 0;

            for ( var i = 0; i < classes.length; i++ ) {
                var source = classes[i].match(/wp-image-([0-9]+)/);
                if ( source && source.length > 1 ) {
                    image_id = parseInt( source[1] );
                }
            }

            alert(image_id); // <---- THE IMAGE ID

            upload_field_ID.val( image_url );
            tb_remove();
            jQuery( 'html').removeClass( 'Image' );
        } else {
            window.original_send_to_editor( html );
        }

    }

});

Answer 4

<input type="submit" name="send[79]" id="send[79]" class="button" value="Insert into Post">

Above is an example mark-up of that button. Notice how name and id fields both contain the image ID.

So with jQuery you can read that.

$("...").click(function(){
    var buttonID = $(this).attr("name");
    buttonID = parseInt(buttonID.replace("send[", "").replace("]", ""));
});