Dragging theme/plugin ZIP outside file input field, downloads file instead of uploading.

[ibrahimriaz]

When uploading a theme or plugin ZIP file via the WordPress admin (Appearance → Themes → Add New → Upload Theme and Plugins → Add New → Upload Plugin), the drag & drop upload experience is inconsistent.

Currently:
The drop target is only the small <input type="file"> element.
If the user drops the .zip file anywhere else in the upload form, the browser intercepts the drop and downloads the file instead of uploading.
This creates confusion and feels like a broken upload feature.

Steps to reproduce:
Go to Appearance → Themes → Add New → Upload Theme or Plugins → Add Plugins → Upload Plugin.
Drag a .zip file into the form area, but do not drop it directly on the file input box.
Observe that the file downloads instead of being uploaded.

Expected behavior:
The entire upload form should be a valid drop zone.
Dropping anywhere inside the form should trigger the file upload, not a download.

Proposed solution:

Extend drag-and-drop handling to the entire .wp-upload-form.
Prevent the browser’s default download behavior.
Assign dropped files to the hidden file input and trigger a change event so upload proceeds as expected.

Why it matters:

Improves UX and accessibility.
Prevents user frustration from failed uploads.
Matches user expectations for drag-and-drop upload behavior.

### 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 <input type="file"> 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:

• Creates frustration when uploads appear to fail
• Requires precise mouse targeting, affecting accessibility
• Doesn't meet modern drag-and-drop UX expectations
• Makes the upload feature feel broken

### 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?

• No JavaScript overhead or dependencies
• Leverages native browser drag-and-drop handling
• More reliable and performant
• Maintains backward compatibility
• Works even if JavaScript is disabled

### Screenshots:
Before:

After:

Trac ticket: #64065

[ronya4927]

I tested this behavior on WP 6.8.2 and can confirm the issue:

• Dragging a .zip file outside the small input triggers a browser download.
• The proposed CSS-only patch fixes it and works consistently.

I agree that treating this as a UX enhancement makes sense, but it still improves accessibility and could be useful in future design updates.

Thanks @iamibrahimriaz for the clean approach.

— @ronya4927

[huzaifaalmesbah]

Test Report

Description

Gives the entire upload form a valid drop zone, improving UX and accessibility.

Patch tested: ​https://github.com/WordPress/wordpress-develop/pull/10217.diff

Environment

• WordPress: 6.9-beta3-61129-src
• PHP: 8.4.12
• Server: nginx/1.29.1
• Database: mysqli (Server: 9.4.0 / Client: mysqlnd 8.4.12)
• Browser: Chrome 142.0.0.0
• OS: macOS
• Theme: Twenty Twenty-Five 1.3
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.2.0

Actual Results

1. ✅ Issue resolved. Dropping the ZIP anywhere in the upload form now triggers upload instead of downloading.

Screenshots

Before Apply Patch	After Apply Patch ✅

[noruzzaman]

Test Report

Description

This report validates whether the indicated patch works as expected.

Patch tested: ​https://github.com/WordPress/wordpress-develop/pull/10217.diff

Environment

• WordPress: 6.9-alpha-20251010.183530
• PHP: 7.4.31-dev
• Server: PHP.wasm
• Database: WP_SQLite_Driver (Server: 8.0.38 / Client: 3.40.1)
• Browser: Chrome 141.0.0.0
• OS: macOS
• Theme: Twenty Twenty-Five 1.3
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.2.0

Actual Results

1. ✅ Patch: ZIPs dropped in the upload area now upload correctly.

Screenshots

Before	After

[r1k0]

Test Report

Description

This report validates that the indicated patch addresses the issue.

Patch tested: ​https://github.com/WordPress/wordpress-develop/pull/10217

Environment

• OS: Windows 11
• Web Server: PHP.wasm
• PHP: 7.4.31-dev
• Database: WP_SQLite_Driver (Server: 8.0.38 / Client: 3.40.1)
• WordPress: 6.9-alpha-20251010.183530
• Browser: Chrome 142.0.7444.162
• Theme: Twenty Twenty-Five (twentytwentyfive) 1.3
• Active Plugins: None

Actual Results

• ✅ Users are now able to upload a zip file from anywhere in the upload form.

Screenshots

Before After

[joedolson]

Tested keyboard, screen reader, and voice command support. All pass, with the usual caveat that voice command *works*, but would be much easier with a visible label.

That is not a change with this patch, however; it's an existing issue.

There are a few visual changes in the PR on mobile; I'll push updates to the PR for those.

[joedolson]

Mobile screenshot (before)

[joedolson]

Mobile screenshot (after)

[joedolson]

In 61598:

Plugins/Themes: Increase size of drop region for uploads.

The native drop area surface is the input[type="file"] element, which is quite small on plugin and theme upload screens. A larger drop area makes it easier for users to successfully drag their file over the region.

Modify the CSS so that the file input occupies the full visual space.

Props ibrahimriaz, ronya4927, huzaifaalmesbah, noruzzaman, r1k0, nikunj8866, joedolson.
Fixes #64065.