Enhance: drag-and-drop upload zone for theme/plugin installers #10217
Conversation
Expands the file input drop zone to cover the entire upload form area, preventing the browser from downloading files when dropped outside the small input element. Previously, dragging a ZIP file to upload a theme or plugin would only work if dropped precisely on the small file input element. Dropping anywhere else in the form would trigger the browser's default behavior of opening/downloading the file, creating a confusing user experience. This change uses a CSS-only solution that: * Expands the file input with generous padding to cover the form area * Positions the submit button absolutely on top of the expanded input * Adds visual hover/focus feedback with WordPress blue theme colors * Includes full RTL language support * Provides responsive design for mobile devices The entire upload form now serves as a valid drop zone, matching user expectations for modern drag-and-drop interfaces. Fixes #64065
|
Hi @iamibrahimriaz! 👋 Thank you for your contribution to WordPress! 💖 It looks like this is your first pull request to No one monitors this repository for new pull requests. Pull requests must be attached to a Trac ticket to be considered for inclusion in WordPress Core. To attach a pull request to a Trac ticket, please include the ticket's full URL in your pull request description. Pull requests are never merged on GitHub. The WordPress codebase continues to be managed through the SVN repository that this GitHub repository mirrors. Please feel free to open pull requests to work on any contribution you are making. More information about how GitHub pull requests can be used to contribute to WordPress can be found in the Core Handbook. Please include automated tests. Including tests in your pull request is one way to help your patch be considered faster. To learn about WordPress' test suites, visit the Automated Testing page in the handbook. If you have not had a chance, please review the Contribute with Code page in the WordPress Core Handbook. The Developer Hub also documents the various coding standards that are followed:
Thank you, |
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the Core Committers: Use this line as a base for the props when committing in SVN: To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
Test using WordPress PlaygroundThe changes in this pull request can previewed and tested using a WordPress Playground instance. WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser. Some things to be aware of
For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation. |
1 participant
Description:
Fixes the inconsistent drag-and-drop behavior when uploading theme/plugin ZIP files in WordPress admin. Previously, dropping a file outside the small file input element would cause the browser to download the file instead of uploading it, creating a confusing user experience.
Problem Statement:
The drop target for theme/plugin uploads was limited to the native element, which is typically small. When users dragged a ZIP file over the upload form but missed the precise input area, the browser's default behavior would intercept the drop event and attempt to open/download the file instead of uploading it.
User Impact:
Solution:
This PR implements a CSS-only solution that expands the file input element to cover the entire upload form area using padding, then repositions the submit button absolutely on top of the expanded input.
Why CSS-only?
Screenshots:
Before:
After:
Trac ticket: #64065
This Pull Request is for code review only. Please keep all other discussion in the Trac ticket. Do not merge this Pull Request. See GitHub Pull Requests for Code Review in the Core Handbook for more details.