This post is a part 6 of Using WordPress Media Uploader in Plugins and Themes post series.
⎗ Previous: Adding a Video using WordPress Media Uploader.
WordPress media uploader is made up of Underscores and Backbone therefore to open the media uploader on frontend we just need to embed these dependencies and the core media uploader script.
Here is the code to enqueue to all these scripts on frontend
function enqueue_media_uploader()
{
//this function enqueues all scripts required for media uploader to work
wp_enqueue_media();
}
add_action("wp_enqueue_scripts", "enqueue_media_uploader");
{
//this function enqueues all scripts required for media uploader to work
wp_enqueue_media();
}
add_action("wp_enqueue_scripts", "enqueue_media_uploader");
Now you can use the media uploader provided interfaces to open it and let user upload or select images, videos and audio files.
For example, if you want to let user upload videos on frontend using media uploader then enqueue the below script
var media_uploader = null;
function open_media_uploader_video()
{
media_uploader = wp.media({
frame: "video",
state: "video-details",
});
media_uploader.on("update", function(){
var extension = media_uploader.state().media.extension;
var video_url = media_uploader.state().media.attachment.changed.url;
var video_icon = media_uploader.state().media.attachment.changed.icon;
var video_title = media_uploader.state().media.attachment.changed.title;
var video_desc = media_uploader.state().media.attachment.changed.description;
});
media_uploader.open();
}
function open_media_uploader_video()
{
media_uploader = wp.media({
frame: "video",
state: "video-details",
});
media_uploader.on("update", function(){
var extension = media_uploader.state().media.extension;
var video_url = media_uploader.state().media.attachment.changed.url;
var video_icon = media_uploader.state().media.attachment.changed.icon;
var video_title = media_uploader.state().media.attachment.changed.title;
var video_desc = media_uploader.state().media.attachment.changed.description;
});
media_uploader.open();
}
Call the open_media_uploader_video() JavaScript function when you want user to upload video using media uploader
