WordPress.org

Make WordPress Core

Opened 4 months ago

Closed 4 months ago

Last modified 3 months ago

#49753 closed defect (bug) (fixed)

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

Reported by: treecutter Owned by: azaozz
Milestone: 5.4.1 Priority: normal
Severity: normal Version: 5.4
Component: Media Keywords: has-patch
Focuses: accessibility, css, administration Cc:

Description

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

Change History (49)

#1 @johnbillion
4 months ago

  • Component changed from General to Media
  • Focuses administration added
  • Keywords reporter-feedback added
  • Version set to 5.4

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

This ticket was mentioned in Slack in #forums by yui. View the logs.


4 months ago

#3 @pbiron
4 months ago

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.

#4 @treecutter
4 months ago

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

#6 @johnbillion
4 months ago

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

This ticket was mentioned in Slack in #core by ipstenu. View the logs.


4 months ago

#8 follow-up: @treecutter
4 months ago

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

#9 @isabel_brison
4 months ago

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.

#10 in reply to: ↑ 8 @SergeyBiryukov
4 months ago

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.

Last edited 4 months ago by SergeyBiryukov (previous) (diff)

#11 @azaozz
4 months ago

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.

#12 follow-ups: @isabel_brison
4 months ago

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.

#13 in reply to: ↑ 12 ; follow-up: @SergeyBiryukov
4 months ago

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.

#14 follow-up: @SergeyBiryukov
4 months ago

  • Milestone changed from Awaiting Review to 5.4.1

Moving for investigation.

#15 in reply to: ↑ 12 @azaozz
4 months ago

  • Keywords needs-patch added; reporter-feedback removed

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.
Last edited 4 months ago by azaozz (previous) (diff)

#16 @johnbillion
4 months ago

  • Focuses accessibility css added

This ticket was mentioned in Slack in #core-media by pbiron. View the logs.


4 months ago

#18 in reply to: ↑ 13 @pbiron
4 months ago

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.

#19 @treecutter
4 months ago

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

This ticket was mentioned in Slack in #forums by yui. View the logs.


4 months ago

#21 @1stwebdesigns
4 months ago

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.

#22 @Ipstenu
4 months ago

  • Summary changed from WordPress 5.4 media upload broken in Edge browser to WordPress 5.4 media upload broken when using "Select Files" on some browsers

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.

This ticket was mentioned in Slack in #forums by ipstenu. View the logs.


4 months ago

This ticket was mentioned in Slack in #core by ipstenu. View the logs.


4 months ago

This ticket was mentioned in Slack in #core-media by ipstenu. View the logs.


4 months ago

#26 in reply to: ↑ 14 ; follow-up: @azaozz
4 months ago

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.

#27 in reply to: ↑ 26 @SergeyBiryukov
4 months ago

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.

#28 @ocean90
4 months ago

#49806 was marked as a duplicate.

#29 @scph35003
4 months ago

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?

#30 @azaozz
4 months ago

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

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.

#31 @azaozz
4 months ago

  • Keywords has-patch added; needs-patch removed
  • Resolution fixed deleted
  • Status changed from closed to reopened

Reopen for 5.4.1.

#32 @pbiron
4 months ago

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

Last edited 4 months ago by SergeyBiryukov (previous) (diff)

#33 @mukesh27
4 months ago

#49816 was marked as a duplicate.

#34 @mukesh27
4 months ago

  • Keywords needs-testing added

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

Last edited 4 months ago by SergeyBiryukov (previous) (diff)

#35 @mukesh27
4 months ago

  • Keywords needs-testing removed

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

#36 follow-up: @afercia
4 months ago

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

#37 in reply to: ↑ 36 @SergeyBiryukov
4 months ago

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.

#38 @davidbaumwald
4 months ago

#49854 was marked as a duplicate.

This ticket was mentioned in Slack in #core-media by joemcgill. View the logs.


4 months ago

This ticket was mentioned in Slack in #core by whyisjake. View the logs.


4 months ago

#41 follow-up: @whyisjake
4 months ago

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

#42 in reply to: ↑ 41 @azaozz
4 months ago

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.

Last edited 4 months ago by azaozz (previous) (diff)

#43 @whyisjake
4 months ago

  • Resolution set to fixed
  • Status changed from reopened to closed

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.

#44 @2001web
3 months ago

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

#45 @pbiron
3 months ago

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

This ticket was mentioned in Slack in #core by pbiron. View the logs.


3 months ago

This ticket was mentioned in Slack in #meta by afercia. View the logs.


3 months ago

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


3 months ago

#49 @afercia
3 months ago

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.

Note: See TracTickets for help on using tickets.