How to run some code as soon as new image gets uploaded in WordPress 3.5 uploader

Question

I need to run some code as soon as new images get uploaded in WordPress 3.5 uploader. Here is the code of wp-includes/js/media-views.js (line 529-540)

    uploading: function( attachment ) {
        var content = this.frame.content;

        // If the uploader was selected, navigate to the browser.
        if ( 'upload' === content.mode() ) 
            this.frame.content.mode('browse');

        // If we're in a workflow that supports multiple attachments,
        // automatically select any uploading attachments.
        if ( this.get('multiple') )
            this.get('selection').add( attachment );
    },

I added alert('New image uploaded!') at the bottom of this uploading function, and the browser alert 'New image uploaded!' when new image was uploaded. However I don't want to hack the core of WordPress, so I'm wondering if there is a way that I can write some code in my theme that can do the same thing? Sorry for my English. Thank you for you attention guys!

Answer 1

This line of wp-plupload.js shows that the uploader queue will reset on complete. So you can do this:

wp.Uploader.queue.on('reset', function() { 
    alert('Upload Complete!');
});

I've tested it and it works on WP 3.5 sites.

So, here is the full version including support for both the regular uploader on "Upload New Media" Page and the new plupload uploader on "Insert Media" Dialog.

Create a javascript file named: wp-admin-extender.js and save it under your /custom/js/ folder or whatever within your template directory.

// Hack for "Upload New Media" Page (old uploader)

// Overriding the uploadSuccess function:
if (typeof uploadSuccess !== 'undefined') {
    // First backup the function into a new variable.
    var uploadSuccess_original = uploadSuccess;
    // The original uploadSuccess function with has two arguments: fileObj, serverData
    // So we globally declare and override the function with two arguments (argument names shouldn't matter)
    uploadSuccess = function(fileObj, serverData) 
    {
        // Fire the original procedure with the same arguments
        uploadSuccess_original(fileObj, serverData);
        // Execute whatever you want here:
        alert('Upload Complete!');
    }
}

// Hack for "Insert Media" Dialog (new plupload uploader)

// Hooking on the uploader queue (on reset):
if (typeof wp.Uploader !== 'undefined' && typeof wp.Uploader.queue !== 'undefined') {
    wp.Uploader.queue.on('reset', function() { 
        alert('Upload Complete!');
    });
}

And finally; add this into your theme's functions.php to get this functionality in WP Admin:

//You can also use other techniques to add/register the script for WP Admin.
function extend_admin_js() {
    wp_enqueue_script('wp-admin-extender.js', get_template_directory_uri().'/custom/js/wp-admin-extender.js', array('media-upload', 'swfupload', 'plupload'), false, true);
}
add_action('admin_enqueue_scripts', 'extend_admin_js');

This might not be the legitimate solution but it's a workaround at least.