Media Library – On Front End

/ SprUng, Websites - more cheats / 5 minutes of reading

Using the WordPress Media Loader in the Front-End

Using the WordPress Media Loader in the Front-End

Over a year ago I was checking out WordPress’ new JavaScript media uploader interface and I had the idea to try to get it working on the front-end. After playing around with it I managed to get something working and thought, “I should write a blog post about that,” and promptly forgot all about it. Since I’m at Loopconf at the moment and feeling inspired I guess it’s finally time 🙂

I created a simple plugin available at https://github.com/dbspringer/wp-frontend-media to demonstrate what you’ll need to do to get it working. There are some important caveats!

  1. You need to decide how you want to handle how it’ll work for users that aren’t logged in.
  2. You’ll also have to decide what to do about users without ‘upload_files’ permissions.

That said, let’s take a look!

The Plugin

The media interface is all JavaScript so the plugin mostly serves as a way to bootstrap the js libraries we’ll need. I also included a simple shortcode that spits out a button that summons the interface and replaces the button with the selected image. Otherwise, there are three important things happening:

  1. I’m calling wp_enqueue_media() to load the media interface libraries.
  2. I’m filtering ajax_query_attachments_args in filter_media() to retrieve only the images belonging to the user. If you don’t care about restricting the images just remove the filter.
  3. I’m checking current_user_can( 'upload_files' ) in the shortcode to restrict access to the interface, you’ll need a similar check somewhere in your own code.

[code style=”php”]

<?php

/**
* Plugin Name: Front-end Media Example
* Plugin URI: http://derekspringer.wordpress.com
* Description: An example of adding the media loader on the front-end.
* Version: 0.1
* Author: Derek Springer
* Author URI: http://derekspringer.wordpress.com
* License: GPL-2.0+
* License URI: http://www.gnu.org/licenses/gpl-2.0.txt
* Text Domain: frontend-media
* Domain Path: /languages
*/

// If this file is called directly, abort.
if ( ! defined( ‘WPINC’ ) ) {
die;
}

/**
* Class wrapper for Front End Media example
*/
class Front_End_Media {

/**
* A simple call to init when constructed
*/
function __construct() {
add_action( ‘init’, array( $this, ‘init’ ) );
}

function init() {
load_plugin_textdomain(
‘frontend-media’,
false,
dirname( plugin_basename( __FILE__ ) ) . ‘/languages/’ );

add_action( ‘wp_enqueue_scripts’, array( $this, ‘enqueue_scripts’ ) );
add_filter( ‘ajax_query_attachments_args’, array( $this, ‘filter_media’ ) );
add_shortcode( ‘frontend-button’, array( $this, ‘frontend_shortcode’ ) );
}

/**
* Call wp_enqueue_media() to load up all the scripts we need for media uploader
*/
function enqueue_scripts() {
wp_enqueue_media();
wp_enqueue_script(
‘some-script’,
plugins_url( ‘/’, __FILE__ ) . ‘js/frontend.js’,
array( ‘jquery’ ),
‘2015-05-07’
);
}

/**
* This filter insures users only see their own media
*/
function filter_media( $query ) {
// admins get to see everything
if ( ! current_user_can( ‘manage_options’ ) )
$query[‘author’] = get_current_user_id();

return $query;
}

function frontend_shortcode( $args ) {
// check if user can upload files
if ( current_user_can( ‘upload_files’ ) ) {
$str = __( ‘Select File’, ‘frontend-media’ );
return ‘<input id="frontend-button" type="button" value="’ . $str . ‘" class="button" style="position: relative; z-index: 1;"><img id="frontend-image" />’;
}

return __( ‘Please Login To Upload’, ‘frontend-media’ );
}
}

new Front_End_Media();

[/code]

view raw
plugin.php
hosted with ❤ by GitHub

The JavaScript

This is the meat of what you’ll need to use the media interface on the front-end. It’s actually pretty simple to summon the interface and then do something with the file that was retrieved. It’s all handled in these three easy steps:

  1. Create the file_frame object using wp.media().
  2. Attach a 'select' listener to the file_frame object to handle what you want to do when a file is selected. The attachment variable will have an object containing all the metadata for the selected item. Just do a console.log() to figure out what you’re getting.
  3. Tell the file_frame to pop open the interface based on a click (or whatever) on an element somewhere.

[code style=”php”]
(function($) {

$(document).ready( function() {
var file_frame; // variable for the wp.media file_frame

// attach a click event (or whatever you want) to some element on your page
$( ‘#frontend-button’ ).on( ‘click’, function( event ) {
event.preventDefault();

// if the file_frame has already been created, just reuse it
if ( file_frame ) {
file_frame.open();
return;
}

file_frame = wp.media.frames.file_frame = wp.media({
title: $( this ).data( ‘uploader_title’ ),
button: {
text: $( this ).data( ‘uploader_button_text’ ),
},
multiple: false // set this to true for multiple file selection
});

file_frame.on( ‘select’, function() {
attachment = file_frame.state().get(‘selection’).first().toJSON();

// do something with the file here
$( ‘#frontend-button’ ).hide();
$( ‘#frontend-image’ ).attr(‘src’, attachment.url);
});

file_frame.open();
});
});

})(jQuery);

[/code]

view raw
frontend.js
hosted with ❤ by GitHub

There you have it! I’ll leave it up to you to do something non-trivial with it, but this should get you started. happy coding!

https://wordpress.stackexchange.com/questions/243340/way-to-display-media-library-in-frontend

Functions.php

[code style=”php”]

add_action( ‘wp_enqueue_scripts’, ‘the_dramatist_enqueue_scripts’ );
add_filter( ‘ajax_query_attachments_args’, ‘the_dramatist_filter_media’ );
add_shortcode( ‘the_dramatist_front_upload’, ‘the_dramatist_front_upload’ );

/**
* Call wp_enqueue_media() to load up all the scripts we need for media uploader
*/
function the_dramatist_enqueue_scripts() {
wp_enqueue_media();
wp_enqueue_script(
‘some-script’,
get_template_directory_uri() . ‘/js/media-uploader.js’,
// if you are building a plugin
// plugins_url( ‘/’, __FILE__ ) . ‘/js/media-uploader.js’,
array( ‘jquery’ ),
null
);
}
/**
* This filter insures users only see their own media
*/
function the_dramatist_filter_media( $query ) {
// admins get to see everything
if ( ! current_user_can( ‘manage_options’ ) )
$query[‘author’] = get_current_user_id();
return $query;
}
function the_dramatist_front_upload( $args ) {
// check if user can upload files
if ( current_user_can( ‘upload_files’ ) ) {
$str = __( ‘Select File’, ‘text-domain’ );
return ‘<input id="frontend-button" type="button" value="’ . $str . ‘" class="button" style="position: relative; z-index: 1;"><img id="frontend-image" />’;
}
return __( ‘Please Login To Upload’, ‘text-domain’ );
}

[/code]

Then create: js/media-uploader.js

[code style=”php”]

(function($) {
// When the DOM is ready.
$(function() {
var file_frame; // variable for the wp.media file_frame

// attach a click event (or whatever you want) to some element on your page
$( ‘#frontend-button’ ).on( ‘click’, function( event ) {
event.preventDefault();

// if the file_frame has already been created, just reuse it
if ( file_frame ) {
file_frame.open();
return;
}

file_frame = wp.media.frames.file_frame = wp.media({
title: $( this ).data( ‘uploader_title’ ),
button: {
text: $( this ).data( ‘uploader_button_text’ ),
},
multiple: false // set this to true for multiple file selection
});

file_frame.on( ‘select’, function() {
attachment = file_frame.state().get(‘selection’).first().toJSON();

// do something with the file here
$( ‘#frontend-button’ ).hide();
$( ‘#frontend-image’ ).attr(‘src’, attachment.url);
});

file_frame.open();
});
});

})(jQuery);

[/code]

Shortcode: [ the_dramatist_front_upload ]

Scroll to Top