Restricting Image Upload Sizes using 'wp_handle_upload_prefilter' - Stuck media progress bar when Featured Image?

Question

I have grabbed this function and adjusted it to my needs.

add_filter( 'wp_handle_upload_prefilter', 'check_image_dimensions_during_upload' ); 

function check_image_dimensions_during_upload( $file ){

    $mimes = array( 'image/jpeg', 'image/png', 'image/gif' );

    if( !in_array( $file['type'], $mimes ) )
        return $file;

    $img = getimagesize( $file['tmp_name'] );
    $maximum = array( 'width' => 2500, 'height' => 1000 );
    $minimum = array( 'width' => 1600, 'height' => 500 );

    // Maximums
    if ( $img[0] > $maximum['width'] )
        $file['error'] = 
            'Image too large. Maximum width is ' 
            .$maximum['width'] 
            .'px. Uploaded image width is ' 
            .$img[0] . 'px';

    elseif ( $img[1] > $maximum['height'] )
        $file['error'] = 
            'Image too large. Maximum height is ' 
            .$maximum['height'] 
            .'px. Uploaded image height is ' 
            .$img[1] . 'px';
    // Minimums
    elseif ( $img[0] < $minimum['width'] )
        $file['error'] = 
            'Image too small. Minimum width is ' 
            .$minimum['width'] 
            .'px. Uploaded image width is ' 
            .$img[0] . 'px';

    elseif ( $img[1] < $minimum['height'] )
        $file['error'] = 
            'Image too small. Minimum height is ' 
            .$minimum['height'] 
            .'px. Uploaded image height is ' 
            .$img[1] . 'px';

    return $file;
}

It works like a charm for all image media uploads (that don't match the $maximum or $minimum) but with one strange anomaly?

Steps to reproduce

1. Choose the 'Set featured image' option from any post or page metabox to reveal the Wordpress media dialog popup.

2. Choose "Upload Files" tab and either "drag" or "browse" for an image (that does not match the $maximum or $minimum).

The issue

The error message is shown as expected when the image dimensions do not match. However, the generated media thumbnail with progress bar (for the failed image) remains after the error message is dismissed? (See Image Below)

This does NOT occur when uploading images via the Media Library or in the post content "Add media" options?

I see no console errors and nothing in my php error log?

Q) Does anyone know why this could be occurring? Am I missing a filter for the featured image uploading process?

Any help appreciated :-)

Answer 1

Try using JavaScript to handle this situation. The script should run when a user attempts to upload an image, and if the image upload fails, it will remove the associated UI elements (including that stubborn loading bar). Here's a quick code:

jQuery(document).ready(function($) {
    wp.Uploader.prototype.init = function() {
        this.uploader.bind('BeforeUpload', function(uploader, file) {
            uploader.settings.multipart_params = {
                ...uploader.settings.multipart_params,
                file_id: file.id
            };
        });
    };

    wp.media.controller.Library.prototype.activate = function() {
        var library = this.get('library');
        library.on('remove', function(attachment) {
            var file = jQuery('#media-attachment-upload-progress-' + attachment.attributes.uploading.id).closest('.media-modal-icon');
            if (file.length > 0) {
                file.remove();
            }
        }, this);
        return wp.media.controller.State.prototype.activate.apply(this, arguments);
    };
});

I haven't tested this, just give that a try and adjust accordingly.