I am trying to insert an audio url from the media library into a field in my custom metabox. I used jQuery to do a similar action but to grab an image url instead and that is working perfectly. For some reason it is not working when trying to grab the audio url though. Here are my fields in my custom metabox and below is the jQuery I am trying to use:

Metabox Code

 <tr>
        <th>MP4 File Location:</th>
        <td><input type="text" name="sermon_mp4" id="sermon_mp4" value="<?php echo $sermonmp4; ?>" />
          <input type="button" id="sermon_mp4_button" value="Add Sermon Audio" />
        <p>
        (used only in admin area, when creating a new Sermon)
        </p>
        </td>
        </tr>

        <tr>
        <th>Sermon PDF Location:</th>
        <td><input type="text" name="sermon_pdf" id="sermon_pdf" value="<?php echo $sermonpdf; ?>" />
            <input type="button" id="sermon_pdf_button" value="Add File" />
        <p>
        (used only in admin area, when creating a new Sermon)
        </p>
        </td>
  </tr>

jQuery Code

   <script>
    jQuery(document).ready( function($) {
      jQuery('#sermon_mp4_button').click(function() {
        window.send_to_editor = function(html) {
          imgurl = jQuery(html).attr('src')
          jQuery('#sermon_mp4').val(imgurl);
          jQuery('#picsrc').attr("src", imgurl);
          tb_remove();
        }

        formfield = jQuery('#sermon_mp4').attr('name');
        tb_show('', 'media-upload.php?type=image&amp;TB_iframe=true' );
        return false;
      }); // End on click
    });
    jQuery(document).ready( function($) {
      jQuery('#sermon_pdf_button').click(function() {
        window.send_to_editor = function(html) {
          imgurl = jQuery(html).attr('src')
          jQuery('#sermon_pdf').val(imgurl);
          jQuery('#picsrc').attr("src", imgurl);
          tb_remove();
        }

        formfield = jQuery('#sermon_pdf').attr('name');
        tb_show('', 'media-upload.php?type=image&amp;TB_iframe=true' );
        return false;
      }); // End on click
    });
    </script>

I am trying to insert an audio url from the media library into a field in my custom metabox. I used jQuery to do a similar action but to grab an image url instead and that is working perfectly. For some reason it is not working when trying to grab the audio url though. Here are my fields in my custom metabox and below is the jQuery I am trying to use:

Metabox Code

 <tr>
        <th>MP4 File Location:</th>
        <td><input type="text" name="sermon_mp4" id="sermon_mp4" value="<?php echo $sermonmp4; ?>" />
          <input type="button" id="sermon_mp4_button" value="Add Sermon Audio" />
        <p>
        (used only in admin area, when creating a new Sermon)
        </p>
        </td>
        </tr>

        <tr>
        <th>Sermon PDF Location:</th>
        <td><input type="text" name="sermon_pdf" id="sermon_pdf" value="<?php echo $sermonpdf; ?>" />
            <input type="button" id="sermon_pdf_button" value="Add File" />
        <p>
        (used only in admin area, when creating a new Sermon)
        </p>
        </td>
  </tr>

jQuery Code

   <script>
    jQuery(document).ready( function($) {
      jQuery('#sermon_mp4_button').click(function() {
        window.send_to_editor = function(html) {
          imgurl = jQuery(html).attr('src')
          jQuery('#sermon_mp4').val(imgurl);
          jQuery('#picsrc').attr("src", imgurl);
          tb_remove();
        }

        formfield = jQuery('#sermon_mp4').attr('name');
        tb_show('', 'media-upload.php?type=image&amp;TB_iframe=true' );
        return false;
      }); // End on click
    });
    jQuery(document).ready( function($) {
      jQuery('#sermon_pdf_button').click(function() {
        window.send_to_editor = function(html) {
          imgurl = jQuery(html).attr('src')
          jQuery('#sermon_pdf').val(imgurl);
          jQuery('#picsrc').attr("src", imgurl);
          tb_remove();
        }

        formfield = jQuery('#sermon_pdf').attr('name');
        tb_show('', 'media-upload.php?type=image&amp;TB_iframe=true' );
        return false;
      }); // End on click
    });
    </script>

• plugin-development
• jquery
• javascript

• Did my answer help? Do you need any more details? If you used a different solution, let us know about it. – Sally CJ Commented Jun 10, 2019 at 0:03
• Hey @SallyCJ, I came across a different approach that supports all file types which I have shared on this post: premium.wpmudev/forums/topic/… – Kevin W. Commented Jun 10, 2019 at 15:00
• Hi @Kevin. Unfortunately I can't access the page without logging in to the site; but anyway, you should also share it (the code) here and accept your answer. That way, people would know what worked for you. Or that the question has an accepted solution. :) – Sally CJ Commented Jun 10, 2019 at 15:10
• Just posted it Sally :) I was in the middle of my project and forgot to update this post otherwise I normally do. Thanks for checking in and the reminder and hopefully it helps someone else! – Kevin W. Commented Jun 11, 2019 at 1:11
• No problem, Kevin. And actually, I initially wanted to suggest you to using the wp.media() option, but as you've seen, I chose the other option. :) – Sally CJ Commented Jun 11, 2019 at 1:26

1 Answer 1

I have come up with better and new working version that supports all file types which I am going to share here in case anyone else is looking for this answer.

Input field added to metabox

<input type="text" name="sermon_mp4" id="sermon_mp4" value="<?php echo $sermonmp4; ?>"/>
<input type="button" id="sermon_mp4_button" value="Add Sermon Audio" />

jQuery

<script type = "text/javascript">
    // Uploading files
    var file_frame;
jQuery('#sermon_mp4_button').live('click', function(podcast) {
    podcast.preventDefault();
    // If the media frame already exists, reopen it.
    if (file_frame) {
        file_frame.open();
        return;
    }
    // Create the media frame.
    file_frame = wp.media.frames.file_frame = wp.media({
        title: jQuery(this).data('uploader_title'),
        button: {
            text: jQuery(this).data('uploader_button_text'),
        },
        multiple: false // Set to true to allow multiple files to be selected
    });
    // When a file 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();
        var url = attachment.url;
        var field = document.getElementById("sermon_mp4");
        field.value = url; //set which variable you want the field to have
    });
    // Finally, open the modal
    file_frame.open();
});

And the last thing you need to do is include the wp_enqueue functions

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

function asp_admin_styles() {
    wp_enqueue_style('thickbox');
}
add_action('admin_print_scripts', 'asp_admin_scripts');
add_action('admin_print_styles', 'asp_admin_styles');
}

If you have multiple fields in your metabox that needs to use the media uploader then simple remove this text from the jQuery above and duplicate the code

// If the media frame already exists, reopen it.
if (file_frame) {
    file_frame.open();
    return;
}