How to run some code as soon as a new image is uploaded to the WordPress 3.5 downloader

Question

I need to run some code as soon as new images are uploaded to the WordPress 3.5 downloader. Here is the wp-includes / js / media-views.js code (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 a warning (“New image uploaded!”) At the bottom of this download function and a browser warning “New image uploaded!”. when the new image was uploaded. However, I don't want to hack into the core of WordPress, so I wonder if there is a way to write code in my theme that can do the same? Sorry for my English. Thank you guys for your attention!

Answer 1

This wp-plupload.js line indicates that the bootloader queue will be reset after completion. So you can do this:

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

I tested it and works on WP 3.5 sites.

So, here is the full version, including support for both the regular bootloader on the " Download New Media " page , and the new plupload uploader on the " Insert Media " dialog .

Create a javascript file with the name: wp-admin-extender.js and save it in your /custom/js/ folder or anywhere in your templates 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 to your functions.php theme 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'); 

It may not be a legitimate solution, but it is a workaround at least.

Answer 2

The answer to this question Onur Yıldırım will show how to connect to the completion of all downloads. But, according to your question, you need to connect to every successful download. What can you do by expanding wp.Uploader.prototype. For proper instructions for jQuery, follow the link to stackexchange: https://wordpress.stackexchange.com/a/131295

I tested it, it really allows you to intercept the answer "success" (and others, including init, error, added, progress, complete), which symbolizes the self-signed plupload event "FileUploaded" for each file individually, receiving the string async-upload.php json .

Answer 3

In Javascript, this can 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 echo apply_filters("async_upload_{$type}", $id); at the end of async-upload . PHP

Answer 4

Perhaps you can connect to the add_attachement action?

 function do_my_attachment_manipulation($attachment_ID) { $attachment = get_attached_file($attachment_ID); // Gets path to attachment // Javascript alert: ?> <script> alert('Media uploaded!'); </script> <?php } add_action("add_attachment", 'do_my_attachment_manipulation');