tb_show not showing a media upload window . custom plugin

Question

I can't figure out why the media uploader doesn't show. I'm trying to do a media upload window so the user can upload a file. The problem is, when I click on the Upload button, nothing happens, the window is not shown and I don't know why. I think it has something to do that the submenu in which I want to add the uploader is in a custom post type. The js code for the media upload:

    $('#csv_file_button').click(function() {
    formfield = $('#csv_file').attr('name');
    tb_show('', 'media-upload.php?type=file&TB_iframe=true');
    return false;
});

window.send_to_editor = function(html) {  // Send WP media uploader response
    url = $(html).attr('href');
    $('#csv_file').val(url);
    tb_remove(); 
}

Any ideas?

Answer 1

I couldn't find what was wrong with the code, so I used a different code which I found on the internet and now the window is opening.

var file_frame;
$('#csv_file_button').on('click', function(event){
    event.preventDefault();
    if ( file_frame ) {
        file_frame.open();
  return;
}
// Create the media frame.
file_frame = wp.media.frames.file_frame = wp.media({
  title: $( this ).data( 'File upload' ),
  button: {
    text: $( this ).data( 'Upload' ),
  },
  multiple: false  // Set to true to allow multiple files to be selected
});
// When an image is selected, run a callback.
file_frame.on( 'select', function() {
  // We set multiple to false so only get one image from the uploader
  attachment = file_frame.state().get('selection').first().toJSON();
    $('#csv_file').attr('value',attachment.url);
});

// Finally, open the modal
file_frame.open();
});

Answer 2

Unable to identify where the issue is. So we need to trace your code and for that you need to replace below JS code with your first one:

$('#csv_file_button').click(function() {
    alert('Button clicked');
        formfield = $('#csv_file').attr('name');
        alert('formfield name is >> ' + formfield);
    tb_show('', 'media-upload.php?type=file&TB_iframe=true');
        alert('Finally thick box randered..! No issue here');
    return false;
}); 

Let me know what you facing after replacing this code and click on Upload button..!

Feel free to contact me if you still face the same issue.

Thanks!

Answer 3

First you need to include thickbox into your theme to use tb_show popup

function include_thickbox_scripts()    
{
    // include the javascript    
    wp_enqueue_script('thickbox', null, array('jquery'));

    // include the thickbox styles    
    wp_enqueue_style('thickbox.css', '/'.WPINC.'/js/thickbox/thickbox.css', null, '1.0');

}

add_action('wp_enqueue_scripts', 'include_thickbox_scripts');