Plupload Intergration in a meta-box?

My specifically how to collect a response from the plUpload jQuery object once it has uploaded the media that you want and how one would use the same functionality in a meta box to create a gallery?

There’s a specific file that handles this functionality: /wp-includes/js/plupload/handlers.dev.js. This file contains all of the hooks and triggers that tie Plupload (the third-party drag/drop multi-file system) to the uploader.

There are two events you might want to look at: “FileUploaded” and “Upload Complete”

FileUploaded

Remember, the new uploader is capable of uploading multiple files at once. So if there’s something you want to do after each file in the queue is uploaded, you’ll use jQuery to bind to this event.

WordPress, for example, binds the following:

uploader.bind('FileUploaded', function(up, file, response) {
    uploadSuccess(file, response.response);
});'

The uploadSuccess function here handles image thumbnails, fetches attachment meta from the server, and binds edit/delete buttons to the right object.

UploadComplete

The UploadComplete event will fire after everything in the queue is finished uploading. If you want to fire a general cleanup operation after the entire download is finished, this is what you’ll want to bind to.

WordPress, for example, binds the following:

uploader.bind('UploadComplete', function(up, files) {
    uploadComplete();
});

The uploadComplete function here just enables the “Insert gallery” button on the page.

Unfortunately …

… there doesn’t seem to be a way for us to bind to these events. The uploader object exists within a closure in the handlers.js file, and Plupload itself doesn’t have a way to reference existing instances. You can’t use a simple jQuery selector to sniff it out and add a custom event … so we’re out of luck there.

On the one hand, you can use these custom events at-will in your own systems. Just spin up your own version of the handlers.js file with your own events and you can do whatever you want. But for the existing uploader, you’re stuck with the existing API.

Keep in mind, that the new Pluploader calls the same methods at the same times as the old Flash uploader did. So my best guess is that any existing hacks or integrations you have should continue to work.

Testing that assumption

I have a plugin that uses the existing uploader to upload file attachments and display the URL in a custom meta field. It worked like magic with the old uploader, so I fired it up in WP 3.3 to see if it worked with the new uploader as well.

And it does!

So if you’re already integrating with the media uploader, your system should still work with the new system without any changes.

Leave a Comment