Upload File path not shown in field using wp media uploader

3 comments

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 🙂

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.

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');
       }
   }
   

Comments are closed.