Skip to:
Content

BuddyPress.org

Opened 4 years ago

Closed 4 years ago

Last modified 3 years ago

#6846 closed defect (bug) (fixed)

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

Reported by: slaFFik Owned by: imath
Milestone: 2.4.4 Priority: normal
Severity: normal Version:
Component: Media Keywords: commit
Cc:

Description (last modified by 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/

Attachments (9)

6846.patch (1.6 KB) - added by imath 4 years ago.
6846.button.patch (386 bytes) - added by r-a-y 4 years ago.
6846.02.patch (2.5 KB) - added by imath 4 years ago.
6846.03.patch (2.7 KB) - added by r-a-y 4 years ago.
6846.04.patch (3.6 KB) - added by imath 4 years ago.
image.png (101.2 KB) - added by imath 4 years ago.
:( there's a problem with the display block on iphone !
6846.05.patch (3.7 KB) - added by imath 4 years ago.
6846.06.patch (3.5 KB) - added by r-a-y 4 years ago.
image.2.png (84.7 KB) - added by imath 4 years ago.
Browse button no more centered vertically…

Download all attachments as: .zip

Change History (46)

#1 @modemlooper
4 years ago

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

Last edited 4 years ago by modemlooper (previous) (diff)

#2 @imath
4 years ago

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

I'll run some tests asap.

#3 @r-a-y
4 years ago

  1. I can confirm drag-n-drop works in Edge, but only if the file manager was not opened with elevated rights.
  1. 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;
	}
}
  1. 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.

#4 @imath
4 years ago

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.

#5 @slaFFik
4 years ago

  • Description modified (diff)

#6 @imath
4 years ago

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 :(

#7 @imath
4 years ago

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

#8 follow-up: @slaFFik
4 years ago

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?

#9 in reply to: ↑ 8 ; follow-up: @boonebgorges
4 years ago

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.

#10 in reply to: ↑ 9 @slaFFik
4 years ago

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.

#11 @imath
4 years ago

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

#12 @imath
4 years ago

So 6846.patch should fix 2 things :

1/ Make sure it's possible to use the camera tab within Microsoft Edge
https://cldup.com/qRXvs6MmKl.PNG

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 :
https://cldup.com/GZoXWGQaV6.PNG

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 ;)

@imath
4 years ago

#13 @r-a-y
4 years ago

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:

https://anonmgur.com/up/cd4dc2ecbb12ffdcb3cd0dfb0bc710d1.png

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.

Last edited 4 years ago by r-a-y (previous) (diff)

This ticket was mentioned in Slack in #buddypress by imath. View the logs.


4 years ago

#15 @imath
4 years ago

  • Milestone changed from Awaiting Review to 2.4.4

#16 @imath
4 years ago

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.

#17 @r-a-y
4 years ago

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 "Select a File" button works as expected. I'm guessing we need to refresh the uploader when invoked from Thickbox, but wasn't sure how to do that.

Last edited 4 years ago by r-a-y (previous) (diff)

@r-a-y
4 years ago

#18 @imath
4 years ago

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 ?

#19 @r-a-y
4 years ago

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
4 years ago

#20 @imath
4 years ago

@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 :)

#21 @r-a-y
4 years ago

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.

Last edited 4 years ago by r-a-y (previous) (diff)

@r-a-y
4 years ago

#22 @imath
4 years ago

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 :)

Last edited 4 years ago by imath (previous) (diff)

#23 @DJPaul
4 years ago

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.

#24 follow-up: @r-a-y
4 years ago

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.

Last edited 4 years ago by r-a-y (previous) (diff)

#25 in reply to: ↑ 24 @imath
4 years ago

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
4 years ago

@imath
4 years ago

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

#26 @imath
4 years ago

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

@imath
4 years ago

#27 @hnla
4 years ago

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.

#28 @imath
4 years ago

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... :)

#29 @r-a-y
4 years ago

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.

Last edited 4 years ago by r-a-y (previous) (diff)

@r-a-y
4 years ago

#30 @imath
4 years ago

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
4 years ago

Browse button no more centered vertically...

#31 @hnla
4 years ago

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

#32 @r-a-y
4 years ago

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

#33 @imath
4 years ago

  • Keywords commit added

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.

#34 @imath
4 years ago

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

#35 @imath
4 years ago

  • Owner set to imath
  • Resolution set to fixed
  • Status changed from new to closed

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

#36 @DJPaul
3 years ago

  • Component changed from Component - Attachments to Media

This ticket was mentioned in Slack in #buddypress by hnla. View the logs.


3 years ago

Note: See TracTickets for help on using tickets.