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.

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.

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!

It's magic!

Author: Derek Springer

I write code & brew beer--if you ask nice I'll share some with you :)

18 thoughts on “Using the WordPress Media Loader in the Front-End”

  1. This article was worth it just for the Shia LaBoef gif. Nice work! I think this is probably what’s at play at the new proplugindirectory.com submission form, which is really slick.

    1. The proplugindirectory.com site uses my Frontend Submission (FES) extension for Easy Digital Downloads for that form. FES has used WordPress’s media manager since it used to be a thickbox. However that being said the media manager is really unpractical and hard to extend to easily make some elementary upload features possible. Just as a warning to those who are thinking of using the WordPress media manager on the frontend.

    2. The pro plugin directory uses my Frontend Submissions (FES) for Easy Digital Downloads to make that form. We’ve used the media manager on the frontend for a couple years now (back when it was a thickbox). It’s cool to use what WordPress gives you but on the other hand using it on the frontend seems to cause issues on a couple certain sites. Also the media manager isn’t really easy to extend to do like basic upload field features.

  2. Hi,
    Thank you for posting this, it’s exactly what I have been looking for.
    I have downloaded and tested your plugin, however I’m not able to make it work. When I click the button I get this error: Uncaught TypeError: Cannot read property ‘frames’ of undefined.
    Can you please show an example of the html code to be used in the page?
    Thank you!

  3. Hello Derek, thanks for sharing. I’m troubleshooting an issue using something similar and had the same results with your method. This seems to fail on 4.4.1. Heard/seen anything as to why? Thanks for your time.

    1. Howdy, I haven’t had the chance to test this out again in the last few versions. My guess is that JS, classes, or IDs got changed.

      If I get a chance to take a look again I’ll give it an update.

      1. Thanks Derek. Today I determined it works in WP 4.4.2 and then upon an update into 4.5.1 it stops cooperating. Unfortunately there’s no error to be found. I think the impact may be far reaching across the custom dev community if it is admin-ajax. Anyway, thanks.

  4. I’m using similar code to enable the WP Media Loader on a production site and had it break in 4.5.x as well 😦 No error, can’t figure out why. Searching for a solution led me to this thread.

      1. Is working on 4.7.3 Here are some notes to help beginners get this to work .
        install folder with files into Wp plugins folder- make sure it is not the unzip outer folder
        1. insert short code from below into page admin text editor on the TEXT tab
        2. can change the
        ‘ . $str . ‘
        to the text you want on button, then publish the page
        3. After image is added to media library , click on it to insert.
        4. Make sure that images viewed are restricted to user somehow.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s