WordPress 5.4 media upload broken when using "Select Files" on some browsers

[treecutter]

Since updating to 5.4 it is no longer possible to upload media when using Microsoft Edge browser. Steps to reproduce:

Dashboard > Media > Add New > Select Files

Rolling back to 5.3 resolves the issue

[johnbillion]

@treecutter Thanks for the report! Can you provide some more details please?

• What's the exact problem or error message you're seeing?
• Which version of Edge are you using?
• Which operating system and version are you using?
• Is this still a problem if you deactivate the plugins on your site?

Thanks!

[pbiron]

I can NOT replicate your report with Edge 44.18362.449.0 on Win10 Pro 1909 (18363.720).

So, as @johnbillion says, more details on your setup and/or error messages would be appreciated.

[treecutter]

All plugins disabled
Testing with Edge 44.18362.449.0, issue remains
Have done a clean install of WP 5.4 only on same platform and the issue has gone
Perhaps an upgrade issue from 5.3 to 5.4
Will investiage further and report back
Thanks for the help

[sterndata]

report that the issue is with Edge version 18: ​https://wordpress.org/support/topic/cant-upload-images-from-computer-with-updated-version-of-wordpress/?view=all#post-12612761

[johnbillion]

From the linked report forum issue, the result appears to be that when clicking theSelect Files button nothing happens. Is that correct?

[treecutter]

Have run a clean install of 5.3, all works fine.
Then updated 5.3 to 5.4, and the SELECT FILES buton is broken in Microsoft Edge browser.

NOTE: This is via : Dashboard >> Library >>
......then the Add New button to the left of Media Library >> Select Files

The button work if the route is Dashboard >> Media >> Add new
.... i.e. selecting Add New from the Dashboard menu under Library , then the Select Files button works

Hope that makes sense

[isabel_brison]

NOTE: This is via : Dashboard >> Library >>
......then the Add New button to the left of Media Library >> Select Files

I can reproduce this with Edge version 44.18362.449.0 (the pre-Chromium version).
It works fine on IE11 and on Chromium Edge.

[SergeyBiryukov]

Replying to treecutter:

Have run a clean install of 5.3, all works fine.
Then updated 5.3 to 5.4, and the SELECT FILES buton is broken in Microsoft Edge browser.

NOTE: This is via : Dashboard >> Library >>
......then the Add New button to the left of Media Library >> Select Files

The button work if the route is Dashboard >> Media >> Add new
.... i.e. selecting Add New from the Dashboard menu under Library , then the Select Files button works

Just noting that both routes should lead to the same location: /wp-admin/media-new.php.

[azaozz]

Cannot reproduce in IE11 version 11.719.18362.0 and Edge 44.18362.449.0. Uploading seems to work either by drag and drop or by clicking the button and selecting files.

[isabel_brison]

Just noting that both routes should lead to the same location: /wp-admin/media-new.php.

That's not what I'm seeing: clicking the "Add new" button at the top of the media library keeps me on the same page - /wp-admin/upload.php - and makes a div with class uploader-inline appear.

The media library button doesn't work for me, in pre-Chromium Edge only. The Dashboard >> Media >> Add new is working fine on all browsers.

[SergeyBiryukov]

Replying to isabel_brison:

Just noting that both routes should lead to the same location: /wp-admin/media-new.php.

That's not what I'm seeing: clicking the "Add new" button at the top of the media library keeps me on the same page - /wp-admin/upload.php - and makes a div with class uploader-inline appear.

Ah, indeed, there's a difference between grid view and list view. Thanks for catching that! I was using the list view in my previous comment.

[SergeyBiryukov]

Moving for investigation.

[azaozz]

Replying to isabel_brison:

The media library button doesn't work for me, in pre-Chromium Edge only.

Right, just confirmed with Edge 44. Seems caused by [47375], see #47611. The problem is only with the button, the rest works as expected.

There are several workarounds:

• Drag and drop works properly.
• Switching to List View (buttons at top/left) and then clicking on Add New opens the old Add New Media screen where the button works.
• Uploading from the block editor works.

[pbiron]

Replying to SergeyBiryukov:

Ah, indeed, there's a difference between grid view and list view. Thanks for catching that! I was using the list view in my previous comment.

Same here. And I am now able to reproduce the problem while in grid view w/ Edge 44.18362.449.0.

[treecutter]

This bug also affect the 'set featured image' function.
Steps to reproduce:
Dashboard >> Posts >> Add new >> Set featured image >> Select Files

Expected result: can browse and upload file(s)

Actual result: nothing happens when the 'Select Files' button is clicked

Microsoft Edge 44.18362.449.0

[1stwebdesigns]

Same issue here. Using Microsoft Edge 44.18362.449.0 on Windows 10 with a fresh WP installation.

The "Select Files" button in the media upload doesn't work.

[Ipstenu]

Update: This is happening on iOS as well in Block and Classic editor.

To reproduce on iOS

1. Make a post
2. Pick the Add Image box
3. Press MEDIA LIBRARY
4. Press Upload Files

What happens:

Nothing happens.

What SHOULD happen:

I should be able to upload :D

Note: if I press on the upload button inside the block, it works.

[azaozz]

Replying to SergeyBiryukov:

Moving for investigation.

Looks like this would need a fix rather soon.

Thinking that reverting [47375] for 5.4.1 would be best/safest, then would try to improve the code around there for 5.5.

[SergeyBiryukov]

Replying to azaozz:

Thinking that reverting [47375] for 5.4.1 would be best/safest, then would try to improve the code around there for 5.5.

Agreed.

[ocean90]

#49806 was marked as a duplicate.

[scph35003]

I can confirm for me this is not working. On IOS Safari - 5.3 worked fine, 5.4 does not work. Is there a temp fix someone can help me with?

[azaozz]

In 47549:

Media: Remove display: none; from the (visually hidden) <input type="file"> button used in Plupload to select files for uploading. Fixes selecting files in Edge <= 44 and iOS Safari.

Props treecutter, johnbillion, pbiron, isabel_brison, Ipstenu, azaozz.
Fixes #49753 for trunk.

[azaozz]

Reopen for 5.4.1.

[pbiron]

[47549] seems to fix the problem for me w/ Edge 44.18362.449.0.

I can now do drag-and-drop and Select Files while in grid mode (and they both still work in list mode).

[mukesh27]

#49816 was marked as a duplicate.

[mukesh27]

I'm going to reopen the ticket as one user asks that the issue is not resolved for the IOS iPhone XR devices.

@azaozz can you please check this.

The user ticket #49816. Props to @scph35003

[mukesh27]

The Patch working fine.

Replying to scph35003:

Hi. I've modified the following files:

css/media-views-rtl.css
css/media-views-rtl.min.css
css/media-views.css
css/media-views.min.css
version.php

Refreshed, cleared cache, updated DB (as per changing the version) and this has worked. Thank you

[afercia]

Thinking that reverting [47375] for 5.4.1 would be best/safest, then would try to improve the code around there for 5.5.

The bug from [47375] / #47611 could be fixed on the JavaScript side. If there's a way to reliably get the file input element, for example in wp-plupload.js, then adding an aria-hidden="true" attribute to it would mitigate the original bug. The file input is the last "tabbable" element within the media modal dialog and it's already excluded from the tab order, see https://core.trac.wordpress.org/browser/trunk/src/js/media/views/focus-manager.js?rev=47122&marks=59-62#L52

This would work, at least when plupload is used within the media modal dialog. Alternatively, since #47611 can't be reopened because it was "fixed" against a completed milestone, I'd expect a new ticket to be created.

Aside:
I'm not sure wp-plupload.js is working the way it is supposed to for the part related to getting the file input ID. I think something has changed in the way plupload sets the IDs. For example, unless I'm missing something, I don't see any element with an ID based on the pattern '#' + this.uploader.id + '_html5_container'.

[SergeyBiryukov]

Replying to afercia:

Alternatively, since #47611 can't be reopened because it was "fixed" against a completed milestone, I'd expect a new ticket to be created.

Since the fix was reverted, I think it would be preferable to reopen #47611 for 5.5, to keep the history in one place.

[davidbaumwald]

#49854 was marked as a duplicate.

[whyisjake]

Looking at the 5.4 branch, does a backport of r47549 make sense as the easy fix now, or should we do something else?

[azaozz]

Replying to whyisjake:

does a backport of r47549 make sense as the easy fix now

Yes, this is the "safest" fix, returning to the 5.3 behavior.

Unfortunately it doesn't seem straightforward to fix the actual bug. Can add aria-hidden="true" but that will prevent uploading when using a screen reader and one of the affected browsers. Will look at other possible fixes on the (reopened) #47611.

[whyisjake]

In 47575:

Media: Remove display: none; from the (visually hidden) <input type="file"> button used in Plupload to select files for uploading. Fixes selecting files in Edge <= 44 and iOS Safari.

Props treecutter, johnbillion, pbiron, isabel_brison, Ipstenu, azaozz.

Fixes #49753 for 5.4.

[2001web]

Is there a fix for this that us non-programmers can understand and implement? I have a video uploading site and this is a major headache and causing a lot of support tickets.

Thanks in advance

[pbiron]

@2001web A temporary workaround (that reverts to the 5.3 behavior) is slated to be included in WP 5.4.1.

The 5.4.1 Release Candidate (RC) is scheduled to released later today. I'm not positive when 5.4.1 will be released, but it should be about a week after RC, assuming no problems are found with the RC.

[afercia]

In 47834:

Accessibility: Media: Hide the invisible "file input" on media views from assistive technologies.

The file input button is visually hidden, but was announced by screen readers in workflows unrelated to file uploads.
It is now hidden from assistive technologies by the means of an aria-hidden attribute, as its CSS display property must not be changed to make sure it still works on old browsers.

See #49753.
Fixes #47611.