Image upload callback in new 3.5 media

Question

Image upload callback in new 3.5 media

fornyhucker

2021年6月10日 11:49

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!

Topic callbacks uploads media Wordpress

Category Web

Svetoslav Luchezarniy · Accepted Answer · 2021年6月10日 11:49

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);
        }
    }
});

Jörn Lund · Accepted Answer · 2014年1月26日 20:17

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);

Image upload callback in new 3.5 media

About