jqxhr is undefined inside of deferred.done() when using wp.media to add a custom image upload

[metawebdevelopment]

I have done all the usual trouble shooting and found this is being cause by a new block of code added to wp-util.js in 5.8.1. Specifically lines 121-134.

The jqXHR property does not exist inside of the done() object and therefor always errors out. This is removing a key functionality of a clients admin that makes it where no new products can be added without a horrible workaround.

[mai21]

@metawebdevelopment Thanks for reporting this issue.

Can you please provide step-by-step instruction on how to reproduce it?

[metawebdevelopment]

@mai21 That will be way too much to add in here, but the gist of it to quickly get to the error would be:

1) Create a new settings/menu page or submenu page in admin with an upload button and 2 hidden inputs. One to store the url and one to store the image id.
2) Enqueue wp_enqueue_media() if did_action check fails
3) add an on click action to the button and when clicked run the following code or similar code that is referenced in the codex and media API docs.

        $(document).on('click', '.upload_image_button', function(e){
            e.preventDefault();
            let button = $(this),
            custom_uploader = wp.media({
                title: 'Set Image',
                library : {
                    type : 'image'
                },
                button: {
                    text: 'Use this image'
                },
                multiple: false
            }).on('select', function(){
                let attachment = custom_uploader.state().get('selection').first().toJSON();
                let imageObject = {
                    id: attachment.id,
                    url: attachment.url,
                }
                button.siblings('.image_url').val(imageObject.url);
                button.siblings('.img_id').val(imageObject.id);
                button.next().find('img').attr('src', imageObject.url);
                button.next().find('.remove-image').show();
            })
            .open();
        });

You will get a console warning when attempting to click the button or set an image.

[metawebdevelopment]

Replying to metawebdevelopment:

@mai21 That will be way too much to add in here, but the gist of it to quickly get to the error would be:

1) Create a new settings/menu page or submenu page in admin with an upload button and 2 hidden inputs. One to store the url and one to store the image id.
2) Enqueue wp_enqueue_media() if did_action check fails
3) add an on click action to the button and when clicked run the following code or similar code that is referenced in the codex and media API docs.

        $(document).on('click', '.upload_image_button', function(e){
            e.preventDefault();
            let button = $(this),
            custom_uploader = wp.media({
                title: 'Set Image',
                library : {
                    type : 'image'
                },
                button: {
                    text: 'Use this image'
                },
                multiple: false
            }).on('select', function(){
                let attachment = custom_uploader.state().get('selection').first().toJSON();
                let imageObject = {
                    id: attachment.id,
                    url: attachment.url,
                }
                button.siblings('.image_url').val(imageObject.url);
                button.siblings('.img_id').val(imageObject.id);
                button.next().find('img').attr('src', imageObject.url);
                button.next().find('.remove-image').show();
            })
            .open();
        });

You will get a console warning when attempting to click the button or set an image.

Just an update that something similar is also causing bugs with custom wysiwyg inputs in various plugins that seems to be related. They will load and only run in text mode.

[hellofromTonya]

Updating keywords as reporter has shared testing instructions. Adding needs-testing for a tester to reproduce the reported issue and add a test report.