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