jquery window.send_to_editor.. Can’t insert File URL in the text field

1 Views

I have created a WordPress file uploader. Its like when i click on add media button it takes me to add media uploader. But when i choose the image it doesn’t get inserted into the field. I want whenever i choose an image and click on insert button, image URL should get inserted into the text editor. 

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

Related posts

1 comment

  1. Include jquery library if you dn’t have.

    https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"

    Please include the below jquery code, where you are adding the HTML code.

    Jquery:

    jQuery(document).ready(function() {
   jQuery('#upload_image_button').click(function() {
   formfield = jQuery('#upload_image').attr('name');
   tb_show('', 'media-upload.php?type=image&TB_iframe=true');

   window.send_to_editor = function(html) {
      imgurl = jQuery('img',html).attr('src');
      jQuery('#upload_image').val(imgurl);
      tb_remove();
   }
   return false;
});

    HTML:

    <tr valign="top">
  <td>Upload Menu Icon:</td>
  <td><label for="upload_image">
      <input id="upload_image" type="text" size="36" name="menu_icon" value="" required="" />
      <input id="upload_image_button" type="button" value="Upload Image" />
      <br />Enter an URL or upload an image from media.
      </label>
   </td>
</tr>

    Include the below PHP code in your theme function.php file.

    PHP:

    function wp_gear_manager_admin_scripts() {
    wp_enqueue_script('media-upload');
    wp_enqueue_script('thickbox');
    wp_enqueue_script('jquery');
}

function wp_gear_manager_admin_styles() {
    wp_enqueue_style('thickbox');
}

add_action('admin_print_scripts', 'wp_gear_manager_admin_scripts');
add_action('admin_print_styles', 'wp_gear_manager_admin_styles');

    Important Note:

    Before click insert button. Please confirm the Image URL is displaying in the text filed. Please see the screenshot

    enter image description here

Comments are closed.