Image upload callback in new 3.5 media

Question

I am using new 3.5 media uploader in my theme frontend (base on this example). It is very simple when you want to do something with images after the 'Select' button is pressed:

file_frame.on('select', function() {
    // Get all attachments
    var attachments = file_frame.state().get('selection').toJSON();

    // Do stuff with attachments
});

But what if I want to do something with attachments just after they were upload? Something like:

file_frame.on('upload', function() {
    // Do stuff with attachments
});

I didn't find anything useful in 'wp-includes/js/media-models.js' or 'wp-includes/js/media-views.js'.

I have tried to attach a lot of events found in those files:

'add', 'url', 'select', 'ready', 'escapeHandler', 'keydown', 'attach', 'open', 'close', 'escape', 'recordTab', 'updateIndex', 'activate', 'dismiss', 'remove', 'reset', 'uploading', 'deactivate', 'create', 'render', 'change:content', 'scan', 'prepare', 'content:render:upload', 'content:render', 'content', 'updateIndex', 'recordTab', 'change:uploading', 'finish', 'done', 'upload', 'uploaded', 'save', 'saved','change:compat', 'compat'

But all these events fires not when I need this.

Thanks!

Answer 1

There is a FileUploaded event being fired in wp-includes/js/plupload/wp-plupload.js.

Alternatively (and propably the better way) you may want extend wp.Uploader with your own success callback .

(function($){

    $.extend( wp.Uploader.prototype, {
        success : function( file_attachment ){
            console.log( file_attachment );
        }
    });
})(jQuery);

Answer 2

Jörn Lund, you are a wizard! Your wp.Uploader.prototype works great! I have been looking for a very long time how can I update the media library after the file has finished loading into the wp media frame. Hats off to you! Here is my code:

$.extend(wp.Uploader.prototype,{
    success: function(file_attachment){
        console.log(file_attachment);
        if(wp.media.frame.content.get() !== null){
            setTimeout(function(){
                wp.media.frame.content.get().collection.props.set({ignore: (+ new Date())});
            },100);
        }
    }
});