If you going to be making a plugin that requires files, particularly images, to be uploaded than using the default wordpres media uploader is a great idea. Not only does the wordpress uploader take care of all the work for you it also has a bunch of extra features like cropping and sizing, and allow for selecting files already uploaded. Implementation isn’t particularly difficult either.

Preparing for the Media Uploader

First thing we need to go is get the scripts all ready. The Media uploader requires some scripts and styles, so lets add a couple actions:

Not, all the code examples in this are going to be from a object oriented wordpress plugin, in most cases if your not making your plugin object oriented you can simple change my array for a straight function name.

Now that we have the actions set up were going to need to make those functions:

Thats all the core includes we need, after you have those in your main plugin file, or your theme functions files if your making a theme options page, we can focus on the button we need to actually create the popup and get us our image url.

Setting up the Media Uploader

The front end setup requires a bit a javascript to both make the popup and get the returned image. Since the wordpress admin section includes jquery we’ll be using that (although honestly it makes things so much easier we’d be using it anyway). First, lets get a little HTML going:

Thats just a simple button and a hidden field to store the value in. The hidden field also will auto-fill with the current image, thats just to make saving later simpler. So now we need the last part, the jQuery that ties it all together:

That first line is just there to bind the $ back to jQuery, wordpress (smartly) uses the compatibility mode of jQuery, meaning you need to use jQuery instead of $, but it become so ingrained in my head that jQuery starts with $ that using compatibility mode seems strange, so that lets me write it in the way that feels normal to me, you could easily replace all the $‘s with jQuery and the script would work in the exact same manner.

After waiting for document ready we bind our click event. the tb_show() function was included in the script we added earlier. The url that is loaded has a lot of get variables on it, these control various aspects of the uploader. The required ones are type and post_id, outside of that I have also disabled flash forcing the html uploader (originally this was because it wouldn’t work with how it was set up, now I’m not sure it’s the case (since I changed the way the image URL was retrieved).

The window.sent_to_editor is whats called once the “Insert into Post” button is pressed. This contains HTML that is ready to be displayed on the page, but thats not what were doing, were only looking for the URL. So to get that from the full html we wrap it in an element and use jQuery to get the img tag src attribute. after that all we have to do is put it in the hidden input and were done, we can use tb_remove() to close the window and bring the user back to the original page.

That’s it!

Once you have that url you can do whatever you want with it. There are more options, including the ability to customize most of the uploader window, but we can cover that another day. If you have any questions let me know here or twitter (I’ll probably forget about it there) or at the appropriate Google+ post, and the code is up on Snipplr and a Github Gist for your perusal. Well I’m off to work on my new plugin again (hopefully it’ll see a release in the next week or two).