Can't upload profile images in Microsoft Edge browser

[angeljs]

After making this post:
​https://buddypress.org/support/topic/cant-upload-profile-images-in-internet-explorer/
I was asked to create a ticket here.

Clicking on the browse image does not work in the Microsoft Edge browser, although it works in Internet Explorer and other browsers. Members using Edge cannot upload profile or cover images.

[hnla]

Confirmed as an issue.
IE < Edge appear to work ok.

On first glance feels like the click event not firing and may be associated with this plupload bug report:
​https://github.com/moxiecode/plupload/issues/1343

Going to look further and hope that it's a case of maybe needing to update plupload?

[DJPaul]

I"m provisionally moving this into 2.7.3, we have another ticket that does need to come out prior to 2.8, and breaking a key feature for an entire browser does seem like something we should fix quicker. :)

@hnla What version of WordPress was your test site using? Plupload comes with WP, and I'm wondering if you were on WP 4.7 trunk/beta/rc etc, because they may have updated it there.

[DJPaul]

@angeljs Thank you very much for the report. We're looking into it.

[hnla]

Confirmed drag 'n' drop works as expected.

@djpaul I'm on bleeding edge for both WP/BP but hadn't updated WP so will check that just in case.

We have an fairly extensive file managing bp-plupload, this has code matching to that which was in bug report so may need to test those suggested changes.

[hnla]

@djpaul downloaded and updated the core WP plupload js files `(plupload-full.min.js) v2.2.0 and this appears to correct issue, this is not a conclusive test as the files between WP & plupload package seem to differ slightly.

This WP trac ticket identifies the same issue (or very similar) but looks like it addresses a specific use case?:
​https://core.trac.wordpress.org/ticket/37039

This does however appear to be a WP core issue to deal with in terms of updating core vendor files.

[hnla]

I've opened a ticket on WP Trac:
​https://core.trac.wordpress.org/ticket/38912#ticket

[hnla]

And missed the fact we have had an extensive ticket on this and other issues with respect to our plupload implementation:
#6846

This suggested things were fixed!

Not sure my suggestion or WP ticket to update to update Plupload vendor files is valid frankly, we need to digest the fixes we added and comments on this previous BP ticket.

[slaFFik]

​https://wordpress.slack.com/archives/buddypress/p1479932039001391

It would be very interesting to know if it is new in 2.7 (did it work in 2.6?), or whether its dependant on WP 4.6 vs 4.7, or combinations thereof.

[hnla]

Just tested versions tracking back to 2.4.0 to see if the upload button worked in Edge but appears not to in all cases, also pretty sure it isn't as simple as latest plupload as reverting that didn't instantly revert to the issue so feels intermittent in nature, also now don't think it's the CSS overlay but feels more to do with binding the click event.

Edit In testing just noticed that the click event area is off set from the button rendering/positioning, click outside the button top edge and file explorer will open or should open.

If this is correct it's the same issue we thought we had fixed in #6846 so we'll need to revist that ticket and look again at the fixes and CSS.

[mercime]

Replying to hnla:

If this is correct it's the same issue we thought we had fixed in #6846 so we'll need to revist that ticket and look again at the fixes and CSS.

+100. I disabled bp-core/css/avatar.css and the input field now works on Mouse click, Keyboard (Enter and Spacebar), and Touch screen.

[hnla]

Adding a rough patch as a workaround.
Issue essentially is stacking contexts are - as always in IE - different to other modern browsers, and the positioning of the shim is not aligned to the actual input button.

Patch manipulates the inline top property applied to the shim to match to our button, left property value with % unit to allow some degree of text resizing and adds widths to our button and shim input.

This works... more or less Edge stacking context is wrong so we lose the hover effect but re-stacking the elements means click event is hidden.

Quick check in Firefox and we still have functionality there, for the moment this is as far as I have time for but honestly to really sort this out the markup needs re-ordering so that elements are children not separated and forced positioned which is fragile.

[mercime]

honestly to really sort this out the markup needs re-ordering so that elements are children not separated and forced positioned which is fragile.

Agreed. Needs a11y fix.

[hnla]

@mercime if we do tackle that then we'll likely need a little time on it as this sort of markup and style wrangling is always fraught with issues so we probably ought to take it out of the 2.7.3 tag?

[mercime]

@hnla quick fix is fine for 2.7.3 so it's usable for "Clicking on the browse image" as was reported. a11y fix for 2.8.

[hnla]

@mercime yep - I'll commit quick fix in a day or two, I'll give it a quick check over see if it can be improved a little.

[hnla]

In 11265:

Improve avatar uploader button click area for MS Edge Browsers

In ME Edge the Moxie shim click event is out of alignment with the visual button element causing it to appear that one can't click to open file browser.

Commit adjusts the styles to provide a moxie-shim set of rulesets in avatar.css to force the position to better overlap the button element.

This is a temp/perm fix until such time as the uploader group of elements can be re-factored to allow greater positioning control.

See #7360
Props angeljs, mercime, hnla, DJPaul, slaFFik

[hnla]

In 11266:

Improve avatar uploader button click area for MS Edge Browsers (Branch 2.7)

In ME Edge the Moxie shim click event is out of alignment with the visual button element causing it to appear that one can't click to open file browser.

Commit adjusts the styles to provide a moxie-shim set of rulesets in avatar.css to force the position to better overlap the button element.

This is a temp/perm fix backported to 2.7 until such time as the uploader group of elements can be re-factored to allow greater positioning control.

Fixes #7360 ( Branch 2.7 )

[r-a-y]

In 11579:

Uploader: Fix the "Select your File" upload button across all browsers.

This commit does a few things:

• Properly fixes the "Select your File" button for Microsoft Edge. The changes to bp-plupload.js mirrors a similar change to wp-plupload.js (see ​#WP37039).
• Rolls back some CSS hacks to attempt to fix the upload button in Microsoft Edge (see #7360). This caused the upload button to fail in iOS Safari.

Props r-a-y, benjlipchak, mrjarbenne, hnla.

Fixes #7416.