Profile/Cover image upload doesn't work in MS Edge browser

[slaFFik]

Using Microsoft new Edge browser. Go to Change Profile Photo page and try to upload an image by clicking the Select your file button - nothing happens. The same for cover image.

Drag-n-drop doesn't work as well. And Take Photo too, with broken logic, when it tries to access camera (if you click Capture) - and nothing from browser (no notifications etc).

Found by a user, reported in a forum here: ​https://buddypress.org/support/topic/uploading-profile-photo-edge/

[modemlooper]

I tested via crossbrowser testing and it worked fine on edge.

[imath]

Thanks a lot @slaFFik for the report and thanks a lot @modemlooper for your test.

I'll run some tests asap.

[r-a-y]

1. I can confirm drag-n-drop works in Edge, but only if the file manager was not opened with elevated rights.

2. I can also confirm the "Select a File" button issue. The problem appears to be a bug with plupload's <input type="file"> shim. plupload is supposed to transparently overlay an <input type="file"> button directly over the "Select a File" <input type="button">. However, in Edge, the button is positioned just above the "Select a File" button. plupload is incorrectly calculating the position to place the button. So, if you click just above the "Select a file" button, the file dialog window will open... Oddly enough, this button works in WP's "Add Media" modal window.

I'm guessing the issue is with our CSS somewhere. In the meantime, here is a CSS hack for Edge that increases the hit area of the plupload <input type="file"> shim:

@supports (-ms-accelerator:true) {
	body.change-avatar .moxie-shim-html5,
	body.change-cover-image .moxie-shim-html5 {
		padding-top: 25px;
	}
}

3. I don't have a webcam connected to my PC, but was able to see the "Take Photo" tab in Edge; IE 11 properly does not display the tab. Probably a problem with the webcam detection script.

[imath]

Thanks @r-a-y for your tests i remember i had a problem with touch devices and the select button, i need to understand what's going wrong.

Edge is supporting getUserMedia: ​https://blogs.windows.com/msedgedev/2015/05/13/announcing-media-capture-functionality-in-microsoft-edge/ that's probably why the camera tab shows.

I'll be able to test it soon.

[imath]

Ah too bad, i thought i had edge installed at office but it's IE11. So it will take me longer to test as my only way to test it now is to virtualize MS Windows 10 to get Edge :(

[imath]

According to ​http://www.w3schools.com/browsers/browsers_explorer.asp Microsoft Edge is 1% of browser usage.

[slaFFik]

I believe it will be very hard to explain a user in a forum that BuddyPress doesn't support default browser in the latest OS by Microsoft :)
Also, in that case a question arises - what percent is ok to start supporting minor-share browsers? 3%, 5% or 10% - and why exactly that?

[boonebgorges]

Replying to slaFFik:

I believe it will be very hard to explain a user in a forum that BuddyPress doesn't support default browser in the latest OS by Microsoft :)
Also, in that case a question arises - what percent is ok to start supporting minor-share browsers? 3%, 5% or 10% - and why exactly that?

I don't think anyone on this thread is suggesting that we shouldn't try to support Edge.

[slaFFik]

Replying to boonebgorges:

I don't think anyone on this thread is suggesting that we shouldn't try to support Edge.

In that case - I'm sorry, I misinterpreted last comment by @imath.

[imath]

@slaFFik i have no hard feelings with Edge, my comment was just informative and its usage can explain the issue just appeared lately.

It's really too bad it's a pain to test it on my machine :( And of course we'll do our best to make sure the Avatar UI works fine with it.

[imath]

So 6846.patch should fix 2 things :

1/ Make sure it's possible to use the camera tab within Microsoft Edge

2/ Make sure the camera tab doesn't show when Google Chrome is used and the website is not https

Now, i wasn't able to reproduce the problems you were mentioning about the regular upload tab :

• i can use the drag and drop without any issue
• i can use the browse button without any issue

Could it be specific to a theme ? Have you tested within the wp-admin/extended profile ?

FYI, i've tested on this version of MS Edge :

On this test drive : ​http://imath-buddypress.wpserveur.net/ i've applied the js part of the patch so that you can test the camera tab on edge. @r-a-y you already have an account on it.

@slaFFik if you also wish to test please send me your email in a DM ;)

[r-a-y]

Hi imath,

Thanks for getting to this so quick!

On your test drive site, I can confirm that the "Take Photo" tab now shows the correct message when a webcam is not attached.

However, I am still encountering the "Select your file" problem that I noted in comment:3. I've attached a screenshot:

The shim is supposed to be positioned directly on top of the "Select your File" button.

I am also using the same version of Edge as you are.

---

Have you tested within the wp-admin/extended profile ?

On my local box, I just tried testing in the wp-admin/extended profile page and I am unable to open the file browser as well. Here, the shim has an inline CSS value of left: 0px; top: 0px; width: 0px; height: 0px;. Meaning that plupload is having even more trouble positioning their <input type="file"> button than on the frontend.

[imath]

That's a mystery ?!?

Everything works fine with me!

@r-a-y btw you should be able to also test wp-admin/extended profile on the test drive.

[r-a-y]

Yeah, it's very odd because we are both using the same version of Edge!

6846.button.patch fixes the "Select a File" button on the frontend for me.

---

I tested the admin's "Extended Profile" on the test drive site and have the same problem I noted in comment:14 :(

However, on the "Extended Profile" page, if I switch to the "Delete" tab first (or any other tab), then go back to "Upload", the button correctly works. I'm guessing we need to refresh the uploader when invoked from Thickbox, but wasn't sure how to do that.

[imath]

thanks for your patch @r-a-y : 2 questions about it:

1. is it fixing the button issues on wp-admin/extended profile and on front-end screens ?
2. should we use the css hack you shared in #comment:3 so that this css rules only target Edge ?

[r-a-y]

imath, I think you can commit 6846.patch as that fixes the "Take Photo" issue.

---

is it fixing the button issues on wp-admin/extended profile and on front-end screens ?

button.patch fixes the "Select a File" button issue on the frontend only unfortunately. I don't think we need to use the CSS hack here as we're only adding a display: block declaration.

For the wp-admin/extended profile page, I think we need to use ​Uploader.refresh() so the button is repositioned when Thickbox is first opened. Not sure why this only happens in Edge... well my version of Edge anyway :)

I tried a few things to get this to work, but wasn't sure how to call the refresh() method. Could use your plupload expertise here, imath!

[imath]

@r-a-y Applied 6846.02.patch on ​http://imath-buddypress.wpserveur.net/

this new patch is 6846 + 6846.button + the uploader.refresh() you think that would fix the Edge issue.

Unfortunately i cannot access a Microsoft computer right now. So i'm not able to test. But let me know if it fixed your issue.

Before committing anything, once Edge is fixed, i will retest everything on iPhone, iPad, different browsers.. Just to be sure :)

[r-a-y]

The "Select a File" button did not work for me in 02.patch as this.uploader.uploader.refresh() is not valid.

03.patch works, but it is a little ugly. I've added a check in bp-plupload.js to see if a Thickbox link was clicked from the wp-admin area. If so, we use the uploader.refresh() method. Tested in Edge, IE11, Firefox and Chrome.

I would have liked to add this in avatar.js, but wasn't sure how to call the uploader instance from there. But, maybe it is beneficial for the code to live in bp-plupload.js.

[imath]

Thanks @r-a-y

i'd really like to be able to reproduce to understand what's going wrong here. If we use the workaround, then for instance plugins using the uploader out of the admin with thickbox will still have the issue. + What disturbs me a bit is we add this timer for every browser, so far the problem only concerns Edge.

I'm still amazed for me everything was working on a Microsoft Windows Laptop + MS Edge (i was not emulating on my Mac) and not for you. So i'd like a 3rd test to be absolutely sure i'm a lucky guy with Microsoft Edge :)

[DJPaul]

If you can tell me what I need to be looking at, and set up your public dev site to the right state, I can test it on my Windows machine.

[r-a-y]

What disturbs me a bit is we add this timer for every browser, so far the problem only concerns Edge.

Yeah, for sure! Maybe we can do a check for Edge. I know this isn't great because of the event delegation and the usage of setTimeout() to check when the Thickbox modal is fully open. Would love it if someone else can reproduce what I'm experiencing.

If you can tell me what I need to be looking at

Paul, the issue is with the "Select Your File" button on the "Profile > Change Profile Photo" and "Profile > Change Cover Image" pages, as well as the WP Admin's "Users > Your Profile > Extended Profile" page in Edge. If you click that button, the file browser window does not appear so you can select your image.

[imath]

Replying to r-a-y:

Would love it if someone else can reproduce what I'm experiencing.

i finally was able to reproduce !!! :)

I'm suggesting .04.patch it fixed the issue for me. @r-a-y can you confirm it does for you ?

[imath]

:( there's a problem with the display block on iphone !

[imath]

Ok let's use the Edge css hack so that what we fix for Edge has no impact on mobile devices experience (at least iPhone)

see .05.patch

[hnla]

In respect of the shim alignment (I may be picking up on the wrong issues so bear with me) I think we may need to re-think how the informational text is displayed and the drop area dimensions handled.

The lack of true height on the drop area and the additional elements 'drop your files here' throw things out however if the text is changed to position absolute and positioned in respect of the parent thus taken out of the flow (also needing to deal with 'or' ) and then the drop area has an actual height e.g 200px then the shim will find the correct position to overlay on.

[imath]

Thanks for your feedback hnla, 05.patch is fixing Edge and prevents any side effects on other browsers/device.

The problem is so far the UI was acting right:

• no html5 support or mobile /touch > no "Drop your file here"
• if html5 support & ! mobile/touch > "Drop your file here" is visible

if we add the display: block rule to all browsers and not only to Edge:

• iPhone gets a silly info "Drop your file here" > how can you drag & drop on mobile ???
• i'm almost pretty sure browsers not supporting html5 would also get this silly info.

So i'm fine with any other solution as long as we don't display a silly info to the user!

Remember: a user can't drag and drop on mobile or in browsers not supporting html5... :)

[r-a-y]

Boom! 05.patch fixes the wp-admin/extended profile issue.

06.patch doesn't require the CSS hack. It uses the CSS visibility declaration to fool plupload's shim calculation. Tested in Edge as well as iPhone 6 (via Chrome's Developer Tools emulation, hopefully that is accurate enough!).

I feel this is really a plupload / moxie shim calculation problem though.

[imath]

thanks a lot @r-a-y for your patch. Just tested it on my iPhone, and well i can live with the fact that because of Microsoft Edge my browse button is not more centered vertically :)

But i keep thinking as everything works fine with any browser, Edge might do something wrong, reason why i prefer 05.patch.

But if everyone thinks the visibility: hidden is best as i said i can live with it, i hope users will ;)

I've updated the test drive, can anyone test on Microsoft Explorer 8, 9 & 10, i can take care of 11 :)

[imath]

Browse button no more centered vertically...

[hnla]

:( why is that button no longer centered?? Doesn't seem like a great solution.

[r-a-y]

Okay, let's go with the CSS hack! :)

[imath]

Just tested, as expected it's no more centered either for browsers not supporting html5 uploads eg IE8.

But the good new is apart from this alignment trouble, the fix (.05.patch & .06.patch) has no impact on Internet Explorer 8/10/11 :)

Okay, let's go with the CSS hack! :)

+1!!! if no objections i will commit .05.patch soon.

[imath]

In 10495:

Make sure the Avatar UI behaves the right way in Microsoft Edge & Chrome

• Use, if needed, MS Edge specific attribute for the video stream (srcObject).
• Make sure Plupload Uploader is also ready for MS Edge within the wp-admin/profile screen.
• Make sure the "Browse" button works the right way in MS Edge.
• About the Chrome Browser: only load the webcam script if the website is using ssl.

see #6846 (branch 2.4)

props r-a-y, hnla

[imath]

In 10496:

Make sure the Avatar UI behaves the right way in Microsoft Edge & Chrome

• Use, if needed, MS Edge specific attribute for the video stream (srcObject).
• Make sure Plupload Uploader is also ready for MS Edge within the wp-admin/profile screen.
• Make sure the "Browse" button works the right way in MS Edge.
• About the Chrome Browser: only load the webcam script if the website is using ssl.

Fixes #6846 (trunk)

props r-a-y, hnla