🐛 fix Windows bug with the admin file upload widget

[cathysarisky]

closes #21439

On Windows 10/Chrome (but maybe nowhere else?), attempting to drag a file into any of the drop targets in the admin panel resulted in flickering behavior, and generally dropping didn't actually trigger the upload.

I thought originally it was a problem with the size of the drop target, but it actually appears to be a rerender bug. In brief, handleDragging and handleStopDragging were firing repeatedly, and each fire triggered a rerender, that added or removed a div from the file upload widget.

I suspect some browser-specific difference in how drag events fire is to blame.

This PR moves the logic to change the classes applied to the div, rather than changing whether the div is present.

I have manually tested with Windows 10 in the users import, theme import, and content import widgets. Styles are preserved (although I think they could be improved, as the grey outline is really faint) and uploading now works consistently, instead of mostly triggering display of the raw file most of the time.

[9larsons]

LGTM. I don't notice a diff on Mac browsers and the performance improvements are a nice bonus. Thanks!

[ronaldlangeveld]

Hey @cathysarisky @vikaspotluri123 👋

First off, thank you for the initial fix—it addressed the core issue well!

However, we noticed a side effect that impacted the button’s hover functionality and caused some Admin-X Settings tests to fail. The issues are directly related to this fix. 🙈

Expected behaviour:

Screen.Recording.2024-12-16.at.5.05.31.pm.mov

Current side effect:

Screen.Recording.2024-12-16.at.5.06.34.pm.mov

Upon investigation, it seems the <div> element used for the fix is positioned on top of the actual button, which is likely causing the hover issue.

To address this, I made a small adjustment by adding a z-index to the <div> element. This fix resolves the broken tests and restores the expected hover behaviour.
Here’s the PR for reference:
Proposed Fix

Unfortunately, I don’t currently have access to a Windows machine to verify that this change doesn’t undo the original fix. Would you mind taking a look and testing it on Windows?

Let me know your thoughts or if there’s anything else you’d like me to adjust.

Thanks again for your help! 🙏🏻

cc @9larsons