Upload File path not shown in field using wp media uploader

Question

I am using custom media upload in my plugin. In my previous (before 4.0) WordPress versions its working perfectly. When I upload audio or image file its upload successfully

and when i click on "Insert Into Post" the path of uploaded file shown in the text field.

But when I upgrade my WordPress into 4.4.2 and upload any file its upload successfully

and when I click on "Insert Into Post" the file path of uploaded file not shown in my text field.

In both WordPress's the code is 100% same.

Here is my HTML Code:

<input type="text" size="50" name="mp3" id="mp3" class="upload-url" />
<input id="st_upload_button" class="st_upload_button" type="button" name="upload_button" value="Upload">

And here is my Functions.php Code:

function pro_scripts_method() {
    wp_enqueue_script('media-upload');
    wp_enqueue_script('thickbox');

    wp_register_script( 'custom-js', plugin_dir_url( __FILE__ )."js/custom.js");
    wp_enqueue_script( 'custom-js' );
}
add_action('admin_enqueue_scripts', 'pro_scripts_method');

And here is my JS Code:

jQuery('.st_upload_button').click(function() {
    targetfield = jQuery(this).prev('.upload-url');
    tb_show('', 'media-upload.php?type=image&TB_iframe=true');
    return false;
});

window.send_to_editor = function(html) {
    fileurl = jQuery(html).attr('href');
    //alert(fileurl);
    jQuery(targetfield).val(fileurl);
    tb_remove();
}

I alert fileurl variable but it gives me undefined value. So please help me for fix that problem

Answer 1

The change that new WordPress made to their media upload is the empty Link URL field.

But if you click file url button below that field and then click Insert Into Post your code works well :)

So we need a simple way to automatically put the file url value in the Link URL. I don't know about it whether there is a setting for that in wordpress or not but there is a simple code I wrote in jQuery to achieve it and it works really well for me.

What I'm really doing is:

When user hit the Insert into Post button. My jQuery check the parent of that Insert into Post button and find the file url value and insert it into Link URL field. That's it! Simple right?

jQuery('.savesend input[type=submit]').click(function(){  
         var url = jQuery(this).parents('.describe').find('.urlfile').data('link-url');
         var field = jQuery(this).parents('.describe').find('.urlfield');
         field.val(url);
     });

So try it out and let me know :)

Answer 2

Why aren't you using wp.media?

Try with this:

jQuery(document).ready(function($) {
    "use strict";

    $('.st_upload_button').on('click', function(e){
        e.preventDefault();
        var $input_field = $(this).prev();
        var custom_uploader = wp.media.frames.file_frame = wp.media({
            title: 'Add Audio',
            button: {
                text: 'Add Audio'
            },
            multiple: false
        });
        custom_uploader.on('select', function() {
            var attachment = custom_uploader.state().get('selection').first().toJSON();
            $input_field.val(attachment.url);
        });
        custom_uploader.open();
    });

});

This will open the media screen on button click, and put the url to the input field.