Customizer background image drop zone text glitch

[astralbodies]

The text "Drop a file here or ." is missing the "or" part of the description.

​https://i.cloudup.com/aAeR5Qdy62.png

I originally discovered this on WordPress.com and I was directed to open a ticket here in Core.

[ocean90]

Hello astralbodies, thanks for the report.

Confirmed. The part after "or" is the button below. In 3.8 it was a link.

[rachelbaker]

Corrected plupload support check and hide drop-zone area on fallback.

[adamsilverstein]

Replying to ocean90:

I tested this and it looks good, after applying the patch I see the proper 'select a file' option -

[ocean90]

Nope, this.supports returns true in IE, because it's this.supports.upload aka Uploader.browser.supported. The result is, that you have no button to upload in IE.

[rachelbaker]

Replying to ocean90:

Nope, this.supports returns true in IE, because it's this.supports.upload aka Uploader.browser.supported. The result is, that you have no button to upload in IE.

Thank you for testing this. this.supports.dragdrop wasn't being set properly. Happy to go back and try to debug why that was the case.

[ocean90]

Replying to rachelbaker:

Thank you for testing this. this.supports.dragdrop wasn't being set properly. Happy to go back and try to debug why that was the case.

this.uploader.bind( 'init', function( uploader ) { .. } in wp-upload.js runs after this.uploader.init() in customize-controls.js. Because of this this.supports.dragdrop is undefined.

[adamsilverstein]

Replying to ocean90:

Replying to rachelbaker:

Thank you for testing this. this.supports.dragdrop wasn't being set properly. Happy to go back and try to debug why that was the case.

this.uploader.bind( 'init', function( uploader ) { .. } in wp-upload.js runs after this.uploader.init() in customize-controls.js. Because of this this.supports.dragdrop is undefined.

that makes sense. i see the set call dragdrop = self.supports.dragdrop = uploader.features.dragdrop && ! Uploader.browser.mobile;

what i'm still unclear on is where uploader.features.dragdrop is set - I couldn't find that in JS or on the PHP side where the options are passed. I'm likely missing something, is it being set?

[adamsilverstein]

Use feature detection to determine if browser supports drag and drop

[adamsilverstein]

Replying to ocean90:

Replying to rachelbaker:

Thank you for testing this. this.supports.dragdrop wasn't being set properly. Happy to go back and try to debug why that was the case.

this.uploader.bind( 'init', function( uploader ) { .. } in wp-upload.js runs after this.uploader.init() in customize-controls.js. Because of this this.supports.dragdrop is undefined.

In 27620.2.patch​ I reproduced the code from Modernizr we are using internally (later) to check for drag & drop support. I verified this works correctly across IE 8->11 and in firefox; I would expect it to work correctly across browsers.

[rachelbaker]

Replying to adamsilverstein:

In 27620.2.patch​ I reproduced the code from Modernizr we are using internally (later) to check for drag & drop support. I verified this works correctly across IE 8->11 and in firefox; I would expect it to work correctly across browsers.

Smart approach! Thank you for picking this up for me, Adam. I also tested in IE 8->10 and verified it was working. This probably also needs testing on mobile/tablet devices as well.

[ocean90]

I don't think we need another feature detection here. Plupload does this already, that's where uploader.features.dragdrop comes from. We just have to get in the right order again, like it was in 3.8.

[ocean90]

The related change is the upgrade to Plupload 2.1.1, see [27316] , especially wp-plupload.js.

[ocean90]

Because the dropzone setup is now bind to the Init ​event, the init method of the uploader should be bind to the PostInit event, see 27620.3.patch​.

[adamsilverstein]

Replying to ocean90:

Because the dropzone setup is now bind to the Init ​event, the init method of the uploader should be bind to the PostInit event, see 27620.3.patch​.

Brilliant, this gets right to the root of the problem. I missed the PostInit event. This makes way more sense than my replication of the feature detection code. Will do some browser testing!

[adamsilverstein]

Replying to adamsilverstein:

Replying to ocean90:

Because the dropzone setup is now bind to the Init ​event, the init method of the uploader should be bind to the PostInit event, see 27620.3.patch​.

Brilliant, this gets right to the root of the problem. I missed the PostInit event. This makes way more sense than my replication of the feature detection code. Will do some browser testing!

Works as expected - tested in ie 8,9 & 10 plus firefox (current).

[ocean90]

In 27933:

Plupload wrapper: Call init callback on PostInit event.
Fixes the background image uploader in Customizer, which was broken after [27316].

fixes #27620.