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