Upload File path not shown in field using wp media uploader

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

4 Answers

Answers 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 :)

Answers 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.

Answers 3

Their is a new version of the wordpress uploader since Wordpress 3.5. Maybe the way you did it is not available in Wordpress 4.0

You could find a basic tutorial here: http://www.webmaster-source.com/

jQuery(document).ready(function($){       var custom_uploader;       $('#upload_image_button').click(function(e) {          e.preventDefault();          //If the uploader object has already been created, reopen the dialog         if (custom_uploader) {             custom_uploader.open();             return;         }          //Extend the wp.media object         custom_uploader = wp.media.frames.file_frame = wp.media({             title: 'Choose Image',             button: {                 text: 'Choose Image'             },             multiple: false         });          //When a file is selected, grab the URL and set it as the text field's value         custom_uploader.on('select', function() {             attachment = custom_uploader.state().get('selection').first().toJSON();             $('#upload_image').val(attachment.url);         });          //Open the uploader dialog         custom_uploader.open();      });   }); 

<label for="upload_image">     <input id="upload_image" type="text" size="36" name="ad_image" value="http://" />      <input id="upload_image_button" class="button" type="button" value="Upload Image" />     <br />Enter a URL or upload an image </label> 

//This part Should be in function.php (or similar)  add_action('admin_enqueue_scripts', 'my_admin_scripts');  function my_admin_scripts() {     if (isset($_GET['page']) && $_GET['page'] == 'my_plugin_page') {         wp_enqueue_media();         wp_register_script('my-admin-js', WP_PLUGIN_URL.'/my-plugin/my-admin.js', array('jquery'));         wp_enqueue_script('my-admin-js');     } } 

Answers 4

try this replace

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

If You Enjoyed This, Take 5 Seconds To Share It

• Facebook
• Twitter
• Google+
• StumbleUpon
• Digg
• Delicious
• LinkedIn
• Reddit
• Technorati