Alternative text entered whilst uploading an image is lost when the image finished uploading

[codepo8]

When uploading images in WordPress' Media editor, I keep typing alternative text while the image uploads just to lose it immediately when the image has uploaded. This is frustrating and should work differently.

[codepo8]

Screencast of the failed entry of alternative text

[joedolson]

Following discussion of this issue, the only viable solution is that the input fields should be disabled or removed until the image has completed uploading. The bug is that we should not provide fields to add meta data for a database record that does not yet exist.

[joedolson]

Hi, @codepo8! On testing, we're finding that we can't reproduce this in our current environments; we've tested on Android/Chrome, Windows 10/Chrome, Windows 10/Firefox, an MacOS/Chrome, and on all of those environments the input fields are disabled while uploading.

What's your environment for this?

[oglekler]

I was unable to fill in anything while the file was downloading, I have all fields stubbornly disabled. We need steps to reproduce the issue. But I can agree it would be great to be able to fill in the whole additional information while the file is still in progress and not waiting, so it might be worth considering.

But I noticed another thing, that can be addressed in the another ticket: when you are uploading something and want to switch view, the page reloads without any warning that that progress of upload progress will be lost. I would suggest that while the file is in progress, it would be worth adding an event listener to all links on the page and asking the user to confirm the page reload.

[nicolefurlan]

@codepo8 could you review #comment:6 and provide information on your environment?

[codepo8]

My environment is Microsoft Edge on Mac.

[nicolefurlan]

I just tested this on Microsoft Edge version 117.0.2045.55 on MacOS Ventura 13.4 and the fields all have the readonly attribute in the attachment details window while an image is uploading.

The video is too big to upload here so here's a link: ​https://imgur.com/a/2q6oQQ4

[oglekler]

Because we have 3 days before RC1, I am moving this ticket to the next milestone for further investigation.

[joedolson]

So, this problem occurs because the readonly attribute is not consistently applied. In the classic editor, if you use the 'Add Media' button above the content area, readonly is not applied during uploading. It is applied in the version of the modal that is used for featured images and in media modals in the block editor.

So this appears to be specific to the version of the add media modal triggered above the classic editor content area. That same view may be called elsewhere or by plugins, so even though the classic editor is a non-default usage, this should be fixed.

[joedolson]

Disallow local edits while uploading

[joedolson]

The attached patch disables local editing while an image is uploading. In my testing, this resolves the issue.

To test:

• Use the classic editor's "Add Media" link to upload items.
• Upload a large image or multiple images. (Small images will upload too quickly, and you won't be able to inspect what's happening.)
• Verify that before the patch, the input fields for uploading images are editable; and after the patch, those same fields are readonly for images that are actively uploading, but editable for images that have completed uploading.

[antpb]

Confirmed patch looks good and works in my testing. 👍

[syamraj24]

Environment

• WordPress: 6.4.4-alpha-57488
• PHP: 8.0.1
• Server: Apache/2.4.33 (Win64) OpenSSL/1.0.2u mod_fcgid/2.3.9 PHP/8.0.1
• Database: mysqli (Server: 5.7.24 / Client: mysqlnd 8.0.1)
• Browser: Chrome 120.0.0.0 (Windows 10/11)
• Theme: Twenty Twenty-Three 1.3
• MU-Plugins: None activated

I've tested the patch and it works as expected.

[joedolson]

In 57515:

Media: Prevent local edits during media upload.

Prevent options.allowLocalEdits from toggling to true during the upload cycle. Otherwise, media meta fields can be edited, but the data will be lost as soon as the upload process is completed.

Props codepo8, oglekler, nicolefurlan, antpb, syamraj24, joedolson.
Fixes #58783, #23374.