WordPress.org

Make WordPress Core

Opened 3 weeks ago

Last modified 10 days ago

#54205 new defect (bug)

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

Reported by: metawebdevelopment Owned by:
Milestone: Awaiting Review Priority: normal
Severity: major Version: 5.8.1
Component: Media Keywords: needs-patch reporter-feedback needs-testing-info
Focuses: javascript, administration Cc:

Description

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.

Change History (4)

This ticket was mentioned in Slack in #core-test by hellofromtonya. View the logs.


3 weeks ago

#2 @mai21
3 weeks ago

  • Keywords reporter-feedback needs-testing-info added

@metawebdevelopment Thanks for reporting this issue.

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

#3 follow-up: @metawebdevelopment
2 weeks ago

@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.

#4 in reply to: ↑ 3 @metawebdevelopment
10 days ago

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.

Note: See TracTickets for help on using tickets.