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

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


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.


Answer by Onur Yıldırım is suggesting hooking to the completion of all uploads.But according to your question, you need to hook to each successful upload. Which you can do by extending wp.Uploader.prototype. For proper instructions for jQuery follow the link to stackexchange: https://wordpress.stackexchange.com/a/131295

I've tested, it really allows you to hook to "success" response (and others, including init, error, added, progress, complete), which symbolises the plupload "FileUploaded" self-fired event for each file individually, getting the async-upload.php json string.


In Javascript, this may help:

wp.media.view.Attachments.prototype.on('ready',function(){console.log('your code here');});

There may also be an action in the php code that could work, I noticed there's echo apply_filters("async_upload_{$type}", $id); at the end of async-upload.php.