From 7099dac602f41688b1ffbd60a73a4ad54bbf6970 Mon Sep 17 00:00:00 2001
From: Ben Schumacher <ben.schumacher@mattermost.com>
Date: Thu, 20 Aug 2026 09:35:36 +0200
Subject: [PATCH] [MM-70277] Improve plugin upload dropzone UX (#37569)

* Improve plugin upload dropzone UX

Co-authored-by: Ben Schumacher <hanzei@users.noreply.github.com>

* Refine plugin upload dropzone presentation

Co-authored-by: Ben Schumacher <hanzei@users.noreply.github.com>

* Update plugin upload Cypress specs

Co-authored-by: Ben Schumacher <hanzei@users.noreply.github.com>

* Preserve plugin upload drag state over children

Co-authored-by: Ben Schumacher <hanzei@users.noreply.github.com>

* Show plugin manifest name in upload success message

The success toast previously interpolated the raw uploaded filename
(e.g. mattermost-plugin-fl3xx-v0.8.1-linux-amd64.tar.gz), which is not
meaningful to admins. Use the plugin manifest name returned by the
upload response instead, falling back to the filename if unavailable.

* Indicate upgrade/downgrade/same-version on plugin overwrite

State whether an overwritten plugin's success message represents an
upgrade, downgrade, or same-version replace, comparing the previously
installed manifest version with the newly uploaded one via semver.

* Refine plugin upload dropzone presentation and uploading state.

Use a native button with Compass upload icon, keep progress inside the dropzone without changing height, and reserve button color for hover/drag-active.

Co-authored-by: Cursor <cursoragent@cursor.com>

* Show selected filename in the dropzone and improve upload status messaging.

Keep success/error feedback aligned with the dropzone, with a green check or red alert icon beside the message.

Co-authored-by: Cursor <cursoragent@cursor.com>

* Fix no-nested-ternary lint error in plugin upload dropzone

Extract the upload dropzone title text into a helper method to
satisfy eslint's no-nested-ternary rule.

* Fix stylelint order/properties-order errors in plugin_management.scss

* Add unit tests for formatUploadOverwriteMessage semver paths

Covers the upgrade, downgrade, same-version, and fallback
(missing/invalid semver) branches, which the automated test-analysis
bot flagged as untested.

* Add unit tests for remaining disabled-reason branches and file drop

Covers renderUploadDisabledReason's isDisabled and !enable branches,
and adds a fireEvent.drop test for handleUploadDrop, closing out the
remaining gaps from the automated test-analysis review.

---------

Co-authored-by: Cursor Agent <cursoragent@cursor.com>
Co-authored-by: Ben Schumacher <hanzei@users.noreply.github.com>
Co-authored-by: Mattermost Build <build@mattermost.com>
Co-authored-by: Matthew Birtch <2040554+matthewbirtch@users.noreply.github.com>
Co-authored-by: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 .../channels/plugins/plugin_install_spec.js   |   3 -
 .../plugins/plugin_startup_fail_spec.js       |  11 +-
 .../channels/plugins/upgrade_spec.js          |  18 +-
 .../plugin_management.test.tsx.snap           | 603 +++++++++---------
 .../plugin_management/plugin_management.scss  | 132 ++++
 .../plugin_management.test.tsx                | 209 +++++-
 .../plugin_management/plugin_management.tsx   | 318 ++++++---
 webapp/channels/src/i18n/en.json              |  15 +-
 8 files changed, 901 insertions(+), 408 deletions(-)
 create mode 100644 webapp/channels/src/components/admin_console/plugin_management/plugin_management.scss

diff --git a/e2e-tests/cypress/tests/integration/channels/plugins/plugin_install_spec.js b/e2e-tests/cypress/tests/integration/channels/plugins/plugin_install_spec.js
index 445b81193308..f010f6485a64 100644
--- a/e2e-tests/cypress/tests/integration/channels/plugins/plugin_install_spec.js
+++ b/e2e-tests/cypress/tests/integration/channels/plugins/plugin_install_spec.js
@@ -41,9 +41,6 @@ describe('Plugins Management', () => {
                 cy.get('input[type=file]').attachFile({fileContent, fileName: demoPlugin.filename, mimeType});
             });
 
-        // # Upload plugin
-        cy.get('#uploadPlugin').scrollIntoView().should('be.visible').click().wait(TIMEOUTS.HALF_SEC);
-
         // * Verify initial disabled state after upload
         cy.findByTestId(demoPlugin.id, {timeout: TIMEOUTS.FIVE_MIN}).scrollIntoView().should('be.visible').within(() => {
             cy.findByText('Enable').should('be.visible');
diff --git a/e2e-tests/cypress/tests/integration/channels/plugins/plugin_startup_fail_spec.js b/e2e-tests/cypress/tests/integration/channels/plugins/plugin_startup_fail_spec.js
index f8b8b1c0d253..5fcdc96475ae 100644
--- a/e2e-tests/cypress/tests/integration/channels/plugins/plugin_startup_fail_spec.js
+++ b/e2e-tests/cypress/tests/integration/channels/plugins/plugin_startup_fail_spec.js
@@ -38,17 +38,8 @@ describe('If plugins fail to start, they can be disabled', () => {
                 cy.get('input[type=file]').attachFile({fileContent, fileName: gitlabPlugin.filename, mimeType});
             });
 
-        cy.get('#uploadPlugin').scrollIntoView().should('be.visible').click().wait(TIMEOUTS.HALF_SEC);
-
-        // * Verify that the button shows correct text while uploading
-        cy.findByText('Uploading...', {timeout: TIMEOUTS.ONE_MIN}).should('be.visible');
-
-        // * Verify that the button shows correct text and is disabled after upload
-        cy.findByText('Upload', {timeout: TIMEOUTS.ONE_MIN}).should('be.visible');
-        cy.get('#uploadPlugin').and('be.disabled');
-
         // # Enable GitLab plugin
-        cy.findByTestId(gitlabPlugin.id).scrollIntoView().should('be.visible').within(() => {
+        cy.findByTestId(gitlabPlugin.id, {timeout: TIMEOUTS.FIVE_MIN}).scrollIntoView().should('be.visible').within(() => {
             // * Verify GitLab Plugin title is shown
             cy.waitUntil(() => cy.get('strong').scrollIntoView().should('be.visible').then((title) => {
                 return title[0].innerText === 'GitLab';
diff --git a/e2e-tests/cypress/tests/integration/channels/plugins/upgrade_spec.js b/e2e-tests/cypress/tests/integration/channels/plugins/upgrade_spec.js
index c52b17e4e3f1..f7f83449cb0f 100644
--- a/e2e-tests/cypress/tests/integration/channels/plugins/upgrade_spec.js
+++ b/e2e-tests/cypress/tests/integration/channels/plugins/upgrade_spec.js
@@ -53,15 +53,8 @@ describe('Plugin remains enabled when upgraded', () => {
                 cy.get('input[type=file]').attachFile({fileContent, fileName: demoPluginOld.filename, mimeType});
             });
 
-        cy.get('#uploadPlugin').scrollIntoView().should('be.visible').click().wait(TIMEOUTS.HALF_SEC);
-
-        // * Verify that the button shows correct text while uploading
-        cy.findByText('Uploading...', {timeout: TIMEOUTS.ONE_MIN}).should('be.visible');
-
-        // * Verify that the button shows correct text and is disabled after upload
+        // * Verify the old demo plugin is installed after selecting the file
         waitForServerStatus(demoPluginOld.id, demoPluginOld.version, {isInstalled: true});
-        cy.findByText('Upload', {timeout: TIMEOUTS.ONE_MIN}).should('be.visible');
-        cy.get('#uploadPlugin', {timeout: TIMEOUTS.ONE_MIN}).should('be.disabled');
 
         // * Verify that the old demo plugin is successfully uploaded
         cy.findByText(`Successfully uploaded plugin from ${demoPluginOld.filename}`);
@@ -80,7 +73,7 @@ describe('Plugin remains enabled when upgraded', () => {
         // * Verify older version of demo plugin
         cy.findByText(new RegExp(`${demoPluginOld.id} - ${demoPluginOld.version}`)).scrollIntoView().should('be.visible');
 
-        cy.get('#uploadPlugin').scrollIntoView().should('be.visible');
+        cy.findByText('Click or drop plugin bundle to upload').scrollIntoView().should('be.visible');
 
         // # Upgrade plugin
         cy.fixture(demoPlugin.filename, 'binary').
@@ -89,16 +82,11 @@ describe('Plugin remains enabled when upgraded', () => {
                 cy.get('input[type=file]').attachFile({fileContent, fileName: demoPlugin.filename, mimeType});
             });
 
-        // * Verify that the button shows correct text while uploading
-        cy.get('#uploadPlugin').should('be.visible').click().wait(TIMEOUTS.HALF_SEC);
-
         // # Confirm overwrite of plugin with same name
         cy.get('#confirmModalButton').should('be.visible').click();
 
-        // * Verify that the button shows correct text and is disabled after upload
+        // * Verify that the latest demo plugin is uploaded and remains active after overwrite
         waitForServerStatus(demoPlugin.id, demoPlugin.version, {isActive: true});
-        cy.findByText('Upload', {timeout: TIMEOUTS.ONE_MIN}).should('be.visible');
-        cy.get('#uploadPlugin', {timeout: TIMEOUTS.ONE_MIN}).should('be.disabled');
 
         // * Verify that the latest demo plugin is successfully uploaded
         cy.findByText(`Successfully updated plugin from ${demoPlugin.filename}`);
diff --git a/webapp/channels/src/components/admin_console/plugin_management/__snapshots__/plugin_management.test.tsx.snap b/webapp/channels/src/components/admin_console/plugin_management/__snapshots__/plugin_management.test.tsx.snap
index af8f9da2f83e..d7a188a17d43 100644
--- a/webapp/channels/src/components/admin_console/plugin_management/__snapshots__/plugin_management.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/plugin_management/__snapshots__/plugin_management.test.tsx.snap
@@ -16,7 +16,7 @@ exports[`components/PluginManagement should match snapshot 1`] = `
         Plugin Management
       </div>
       <div
-        class="admin-console__wrapper"
+        class="admin-console__wrapper PluginManagement"
       >
         <div
           class="admin-console__content"
@@ -194,29 +194,28 @@ exports[`components/PluginManagement should match snapshot 1`] = `
                 <div
                   class="col-sm-8"
                 >
-                  <div
-                    class="file__upload"
-                  >
-                    <button
-                      class="btn btn-tertiary"
-                      type="button"
-                    >
-                      Choose File
-                    </button>
-                    <input
-                      accept=".gz"
-                      type="file"
-                    />
-                  </div>
                   <button
-                    class="btn btn-primary"
-                    disabled=""
-                    id="uploadPlugin"
+                    class="PluginManagement__uploadDropzone"
+                    type="button"
                   >
-                    Upload
+                    <span
+                      class="PluginManagement__uploadDropzoneTitle"
+                    >
+                      <i
+                        aria-hidden="true"
+                        class="icon icon-upload-outline"
+                      />
+                      <span
+                        class="PluginManagement__uploadDropzoneTitleText"
+                      >
+                        Click or drop plugin bundle to upload
+                      </span>
+                    </span>
                   </button>
-                  <div
-                    class="help-text m-0"
+                  <input
+                    accept=".tar.gz,.gz"
+                    class="PluginManagement__fileInput"
+                    type="file"
                   />
                   <div
                     class="help-text"
@@ -430,7 +429,7 @@ exports[`components/PluginManagement should match snapshot when \`Enable Marketp
         Plugin Management
       </div>
       <div
-        class="admin-console__wrapper"
+        class="admin-console__wrapper PluginManagement"
       >
         <div
           class="admin-console__content"
@@ -608,29 +607,28 @@ exports[`components/PluginManagement should match snapshot when \`Enable Marketp
                 <div
                   class="col-sm-8"
                 >
-                  <div
-                    class="file__upload"
-                  >
-                    <button
-                      class="btn btn-tertiary"
-                      type="button"
-                    >
-                      Choose File
-                    </button>
-                    <input
-                      accept=".gz"
-                      type="file"
-                    />
-                  </div>
                   <button
-                    class="btn btn-primary"
-                    disabled=""
-                    id="uploadPlugin"
+                    class="PluginManagement__uploadDropzone"
+                    type="button"
                   >
-                    Upload
+                    <span
+                      class="PluginManagement__uploadDropzoneTitle"
+                    >
+                      <i
+                        aria-hidden="true"
+                        class="icon icon-upload-outline"
+                      />
+                      <span
+                        class="PluginManagement__uploadDropzoneTitleText"
+                      >
+                        Click or drop plugin bundle to upload
+                      </span>
+                    </span>
                   </button>
-                  <div
-                    class="help-text m-0"
+                  <input
+                    accept=".tar.gz,.gz"
+                    class="PluginManagement__fileInput"
+                    type="file"
                   />
                   <div
                     class="help-text"
@@ -847,7 +845,7 @@ exports[`components/PluginManagement should match snapshot when \`Enable Plugins
         Plugin Management
       </div>
       <div
-        class="admin-console__wrapper"
+        class="admin-console__wrapper PluginManagement"
       >
         <div
           class="admin-console__content"
@@ -920,7 +918,7 @@ exports[`components/PluginManagement should match snapshot when \`Enable Remote
         Plugin Management
       </div>
       <div
-        class="admin-console__wrapper"
+        class="admin-console__wrapper PluginManagement"
       >
         <div
           class="admin-console__content"
@@ -1098,29 +1096,28 @@ exports[`components/PluginManagement should match snapshot when \`Enable Remote
                 <div
                   class="col-sm-8"
                 >
-                  <div
-                    class="file__upload"
-                  >
-                    <button
-                      class="btn btn-tertiary"
-                      type="button"
-                    >
-                      Choose File
-                    </button>
-                    <input
-                      accept=".gz"
-                      type="file"
-                    />
-                  </div>
                   <button
-                    class="btn btn-primary"
-                    disabled=""
-                    id="uploadPlugin"
+                    class="PluginManagement__uploadDropzone"
+                    type="button"
                   >
-                    Upload
+                    <span
+                      class="PluginManagement__uploadDropzoneTitle"
+                    >
+                      <i
+                        aria-hidden="true"
+                        class="icon icon-upload-outline"
+                      />
+                      <span
+                        class="PluginManagement__uploadDropzoneTitleText"
+                      >
+                        Click or drop plugin bundle to upload
+                      </span>
+                    </span>
                   </button>
-                  <div
-                    class="help-text m-0"
+                  <input
+                    accept=".tar.gz,.gz"
+                    class="PluginManagement__fileInput"
+                    type="file"
                   />
                   <div
                     class="help-text"
@@ -1335,7 +1332,7 @@ exports[`components/PluginManagement should match snapshot when \`Require Signat
         Plugin Management
       </div>
       <div
-        class="admin-console__wrapper"
+        class="admin-console__wrapper PluginManagement"
       >
         <div
           class="admin-console__content"
@@ -1513,31 +1510,37 @@ exports[`components/PluginManagement should match snapshot when \`Require Signat
                 <div
                   class="col-sm-8"
                 >
-                  <div
-                    class="file__upload"
-                  >
-                    <button
-                      class="btn btn-tertiary"
-                      disabled=""
-                      type="button"
-                    >
-                      Choose File
-                    </button>
-                    <input
-                      accept=".gz"
-                      disabled=""
-                      type="file"
-                    />
-                  </div>
                   <button
-                    class="btn btn-primary"
+                    aria-describedby="plugin-upload-description"
+                    class="PluginManagement__uploadDropzone"
                     disabled=""
-                    id="uploadPlugin"
+                    type="button"
                   >
-                    Upload
+                    <span
+                      class="PluginManagement__uploadDropzoneTitle"
+                    >
+                      <i
+                        aria-hidden="true"
+                        class="icon icon-upload-outline"
+                      />
+                      <span
+                        class="PluginManagement__uploadDropzoneTitleText"
+                      >
+                        Click or drop plugin bundle to upload
+                      </span>
+                    </span>
+                    <span
+                      class="PluginManagement__uploadDropzoneDescription"
+                      id="plugin-upload-description"
+                    >
+                      Plugin signatures are required. Install plugins through Marketplace instead.
+                    </span>
                   </button>
-                  <div
-                    class="help-text m-0"
+                  <input
+                    accept=".tar.gz,.gz"
+                    class="PluginManagement__fileInput"
+                    disabled=""
+                    type="file"
                   />
                   <div
                     class="help-text"
@@ -1751,7 +1754,7 @@ exports[`components/PluginManagement should match snapshot, No installed plugins
         Plugin Management
       </div>
       <div
-        class="admin-console__wrapper"
+        class="admin-console__wrapper PluginManagement"
       >
         <div
           class="admin-console__content"
@@ -1929,29 +1932,28 @@ exports[`components/PluginManagement should match snapshot, No installed plugins
                 <div
                   class="col-sm-8"
                 >
-                  <div
-                    class="file__upload"
-                  >
-                    <button
-                      class="btn btn-tertiary"
-                      type="button"
-                    >
-                      Choose File
-                    </button>
-                    <input
-                      accept=".gz"
-                      type="file"
-                    />
-                  </div>
                   <button
-                    class="btn btn-primary"
-                    disabled=""
-                    id="uploadPlugin"
+                    class="PluginManagement__uploadDropzone"
+                    type="button"
                   >
-                    Upload
+                    <span
+                      class="PluginManagement__uploadDropzoneTitle"
+                    >
+                      <i
+                        aria-hidden="true"
+                        class="icon icon-upload-outline"
+                      />
+                      <span
+                        class="PluginManagement__uploadDropzoneTitleText"
+                      >
+                        Click or drop plugin bundle to upload
+                      </span>
+                    </span>
                   </button>
-                  <div
-                    class="help-text m-0"
+                  <input
+                    accept=".tar.gz,.gz"
+                    class="PluginManagement__fileInput"
+                    type="file"
                   />
                   <div
                     class="help-text"
@@ -2166,7 +2168,7 @@ exports[`components/PluginManagement should match snapshot, allow insecure URL e
         Plugin Management
       </div>
       <div
-        class="admin-console__wrapper"
+        class="admin-console__wrapper PluginManagement"
       >
         <div
           class="admin-console__content"
@@ -2344,29 +2346,28 @@ exports[`components/PluginManagement should match snapshot, allow insecure URL e
                 <div
                   class="col-sm-8"
                 >
-                  <div
-                    class="file__upload"
-                  >
-                    <button
-                      class="btn btn-tertiary"
-                      type="button"
-                    >
-                      Choose File
-                    </button>
-                    <input
-                      accept=".gz"
-                      type="file"
-                    />
-                  </div>
                   <button
-                    class="btn btn-primary"
-                    disabled=""
-                    id="uploadPlugin"
+                    class="PluginManagement__uploadDropzone"
+                    type="button"
                   >
-                    Upload
+                    <span
+                      class="PluginManagement__uploadDropzoneTitle"
+                    >
+                      <i
+                        aria-hidden="true"
+                        class="icon icon-upload-outline"
+                      />
+                      <span
+                        class="PluginManagement__uploadDropzoneTitleText"
+                      >
+                        Click or drop plugin bundle to upload
+                      </span>
+                    </span>
                   </button>
-                  <div
-                    class="help-text m-0"
+                  <input
+                    accept=".tar.gz,.gz"
+                    class="PluginManagement__fileInput"
+                    type="file"
                   />
                   <div
                     class="help-text"
@@ -2580,7 +2581,7 @@ exports[`components/PluginManagement should match snapshot, disabled 1`] = `
         Plugin Management
       </div>
       <div
-        class="admin-console__wrapper"
+        class="admin-console__wrapper PluginManagement"
       >
         <div
           class="admin-console__content"
@@ -2762,31 +2763,37 @@ exports[`components/PluginManagement should match snapshot, disabled 1`] = `
                 <div
                   class="col-sm-8"
                 >
-                  <div
-                    class="file__upload"
-                  >
-                    <button
-                      class="btn btn-tertiary"
-                      disabled=""
-                      type="button"
-                    >
-                      Choose File
-                    </button>
-                    <input
-                      accept=".gz"
-                      disabled=""
-                      type="file"
-                    />
-                  </div>
                   <button
-                    class="btn btn-primary"
+                    aria-describedby="plugin-upload-description"
+                    class="PluginManagement__uploadDropzone"
                     disabled=""
-                    id="uploadPlugin"
+                    type="button"
                   >
-                    Upload
+                    <span
+                      class="PluginManagement__uploadDropzoneTitle"
+                    >
+                      <i
+                        aria-hidden="true"
+                        class="icon icon-upload-outline"
+                      />
+                      <span
+                        class="PluginManagement__uploadDropzoneTitleText"
+                      >
+                        Click or drop plugin bundle to upload
+                      </span>
+                    </span>
+                    <span
+                      class="PluginManagement__uploadDropzoneDescription"
+                      id="plugin-upload-description"
+                    >
+                      Enable plugins before uploading a plugin.
+                    </span>
                   </button>
-                  <div
-                    class="help-text m-0"
+                  <input
+                    accept=".tar.gz,.gz"
+                    class="PluginManagement__fileInput"
+                    disabled=""
+                    type="file"
                   />
                   <div
                     class="help-text"
@@ -2990,7 +2997,7 @@ exports[`components/PluginManagement should match snapshot, text entered into th
         Plugin Management
       </div>
       <div
-        class="admin-console__wrapper"
+        class="admin-console__wrapper PluginManagement"
       >
         <div
           class="admin-console__content"
@@ -3168,29 +3175,28 @@ exports[`components/PluginManagement should match snapshot, text entered into th
                 <div
                   class="col-sm-8"
                 >
-                  <div
-                    class="file__upload"
-                  >
-                    <button
-                      class="btn btn-tertiary"
-                      type="button"
-                    >
-                      Choose File
-                    </button>
-                    <input
-                      accept=".gz"
-                      type="file"
-                    />
-                  </div>
                   <button
-                    class="btn btn-primary"
-                    disabled=""
-                    id="uploadPlugin"
+                    class="PluginManagement__uploadDropzone"
+                    type="button"
                   >
-                    Upload
+                    <span
+                      class="PluginManagement__uploadDropzoneTitle"
+                    >
+                      <i
+                        aria-hidden="true"
+                        class="icon icon-upload-outline"
+                      />
+                      <span
+                        class="PluginManagement__uploadDropzoneTitleText"
+                      >
+                        Click or drop plugin bundle to upload
+                      </span>
+                    </span>
                   </button>
-                  <div
-                    class="help-text m-0"
+                  <input
+                    accept=".tar.gz,.gz"
+                    class="PluginManagement__fileInput"
+                    type="file"
                   />
                   <div
                     class="help-text"
@@ -3404,7 +3410,7 @@ exports[`components/PluginManagement should match snapshot, upload disabled 1`]
         Plugin Management
       </div>
       <div
-        class="admin-console__wrapper"
+        class="admin-console__wrapper PluginManagement"
       >
         <div
           class="admin-console__content"
@@ -3582,31 +3588,37 @@ exports[`components/PluginManagement should match snapshot, upload disabled 1`]
                 <div
                   class="col-sm-8"
                 >
-                  <div
-                    class="file__upload"
-                  >
-                    <button
-                      class="btn btn-tertiary"
-                      disabled=""
-                      type="button"
-                    >
-                      Choose File
-                    </button>
-                    <input
-                      accept=".gz"
-                      disabled=""
-                      type="file"
-                    />
-                  </div>
                   <button
-                    class="btn btn-primary"
+                    aria-describedby="plugin-upload-description"
+                    class="PluginManagement__uploadDropzone"
                     disabled=""
-                    id="uploadPlugin"
+                    type="button"
                   >
-                    Upload
+                    <span
+                      class="PluginManagement__uploadDropzoneTitle"
+                    >
+                      <i
+                        aria-hidden="true"
+                        class="icon icon-upload-outline"
+                      />
+                      <span
+                        class="PluginManagement__uploadDropzoneTitleText"
+                      >
+                        Click or drop plugin bundle to upload
+                      </span>
+                    </span>
+                    <span
+                      class="PluginManagement__uploadDropzoneDescription"
+                      id="plugin-upload-description"
+                    >
+                      Plugin uploads are disabled. Enable plugin uploads in config.json before uploading a plugin.
+                    </span>
                   </button>
-                  <div
-                    class="help-text m-0"
+                  <input
+                    accept=".tar.gz,.gz"
+                    class="PluginManagement__fileInput"
+                    disabled=""
+                    type="file"
                   />
                   <div
                     class="help-text"
@@ -3832,7 +3844,7 @@ exports[`components/PluginManagement should match snapshot, with installed plugi
         Plugin Management
       </div>
       <div
-        class="admin-console__wrapper"
+        class="admin-console__wrapper PluginManagement"
       >
         <div
           class="admin-console__content"
@@ -4010,29 +4022,28 @@ exports[`components/PluginManagement should match snapshot, with installed plugi
                 <div
                   class="col-sm-8"
                 >
-                  <div
-                    class="file__upload"
-                  >
-                    <button
-                      class="btn btn-tertiary"
-                      type="button"
-                    >
-                      Choose File
-                    </button>
-                    <input
-                      accept=".gz"
-                      type="file"
-                    />
-                  </div>
                   <button
-                    class="btn btn-primary"
-                    disabled=""
-                    id="uploadPlugin"
+                    class="PluginManagement__uploadDropzone"
+                    type="button"
                   >
-                    Upload
+                    <span
+                      class="PluginManagement__uploadDropzoneTitle"
+                    >
+                      <i
+                        aria-hidden="true"
+                        class="icon icon-upload-outline"
+                      />
+                      <span
+                        class="PluginManagement__uploadDropzoneTitleText"
+                      >
+                        Click or drop plugin bundle to upload
+                      </span>
+                    </span>
                   </button>
-                  <div
-                    class="help-text m-0"
+                  <input
+                    accept=".tar.gz,.gz"
+                    class="PluginManagement__fileInput"
+                    type="file"
                   />
                   <div
                     class="help-text"
@@ -4529,7 +4540,7 @@ exports[`components/PluginManagement should match snapshot, with installed plugi
         Plugin Management
       </div>
       <div
-        class="admin-console__wrapper"
+        class="admin-console__wrapper PluginManagement"
       >
         <div
           class="admin-console__content"
@@ -4707,29 +4718,28 @@ exports[`components/PluginManagement should match snapshot, with installed plugi
                 <div
                   class="col-sm-8"
                 >
-                  <div
-                    class="file__upload"
-                  >
-                    <button
-                      class="btn btn-tertiary"
-                      type="button"
-                    >
-                      Choose File
-                    </button>
-                    <input
-                      accept=".gz"
-                      type="file"
-                    />
-                  </div>
                   <button
-                    class="btn btn-primary"
-                    disabled=""
-                    id="uploadPlugin"
+                    class="PluginManagement__uploadDropzone"
+                    type="button"
                   >
-                    Upload
+                    <span
+                      class="PluginManagement__uploadDropzoneTitle"
+                    >
+                      <i
+                        aria-hidden="true"
+                        class="icon icon-upload-outline"
+                      />
+                      <span
+                        class="PluginManagement__uploadDropzoneTitleText"
+                      >
+                        Click or drop plugin bundle to upload
+                      </span>
+                    </span>
                   </button>
-                  <div
-                    class="help-text m-0"
+                  <input
+                    accept=".tar.gz,.gz"
+                    class="PluginManagement__fileInput"
+                    type="file"
                   />
                   <div
                     class="help-text"
@@ -5024,7 +5034,7 @@ exports[`components/PluginManagement should match snapshot, with installed plugi
         Plugin Management
       </div>
       <div
-        class="admin-console__wrapper"
+        class="admin-console__wrapper PluginManagement"
       >
         <div
           class="admin-console__content"
@@ -5202,29 +5212,28 @@ exports[`components/PluginManagement should match snapshot, with installed plugi
                 <div
                   class="col-sm-8"
                 >
-                  <div
-                    class="file__upload"
-                  >
-                    <button
-                      class="btn btn-tertiary"
-                      type="button"
-                    >
-                      Choose File
-                    </button>
-                    <input
-                      accept=".gz"
-                      type="file"
-                    />
-                  </div>
                   <button
-                    class="btn btn-primary"
-                    disabled=""
-                    id="uploadPlugin"
+                    class="PluginManagement__uploadDropzone"
+                    type="button"
                   >
-                    Upload
+                    <span
+                      class="PluginManagement__uploadDropzoneTitle"
+                    >
+                      <i
+                        aria-hidden="true"
+                        class="icon icon-upload-outline"
+                      />
+                      <span
+                        class="PluginManagement__uploadDropzoneTitleText"
+                      >
+                        Click or drop plugin bundle to upload
+                      </span>
+                    </span>
                   </button>
-                  <div
-                    class="help-text m-0"
+                  <input
+                    accept=".tar.gz,.gz"
+                    class="PluginManagement__fileInput"
+                    type="file"
                   />
                   <div
                     class="help-text"
@@ -5519,7 +5528,7 @@ exports[`components/PluginManagement should match snapshot, with installed plugi
         Plugin Management
       </div>
       <div
-        class="admin-console__wrapper"
+        class="admin-console__wrapper PluginManagement"
       >
         <div
           class="admin-console__content"
@@ -5697,29 +5706,28 @@ exports[`components/PluginManagement should match snapshot, with installed plugi
                 <div
                   class="col-sm-8"
                 >
-                  <div
-                    class="file__upload"
-                  >
-                    <button
-                      class="btn btn-tertiary"
-                      type="button"
-                    >
-                      Choose File
-                    </button>
-                    <input
-                      accept=".gz"
-                      type="file"
-                    />
-                  </div>
                   <button
-                    class="btn btn-primary"
-                    disabled=""
-                    id="uploadPlugin"
+                    class="PluginManagement__uploadDropzone"
+                    type="button"
                   >
-                    Upload
+                    <span
+                      class="PluginManagement__uploadDropzoneTitle"
+                    >
+                      <i
+                        aria-hidden="true"
+                        class="icon icon-upload-outline"
+                      />
+                      <span
+                        class="PluginManagement__uploadDropzoneTitleText"
+                      >
+                        Click or drop plugin bundle to upload
+                      </span>
+                    </span>
                   </button>
-                  <div
-                    class="help-text m-0"
+                  <input
+                    accept=".tar.gz,.gz"
+                    class="PluginManagement__fileInput"
+                    type="file"
                   />
                   <div
                     class="help-text"
@@ -6014,7 +6022,7 @@ exports[`components/PluginManagement should match snapshot, with installed plugi
         Plugin Management
       </div>
       <div
-        class="admin-console__wrapper"
+        class="admin-console__wrapper PluginManagement"
       >
         <div
           class="admin-console__content"
@@ -6192,29 +6200,28 @@ exports[`components/PluginManagement should match snapshot, with installed plugi
                 <div
                   class="col-sm-8"
                 >
-                  <div
-                    class="file__upload"
-                  >
-                    <button
-                      class="btn btn-tertiary"
-                      type="button"
-                    >
-                      Choose File
-                    </button>
-                    <input
-                      accept=".gz"
-                      type="file"
-                    />
-                  </div>
                   <button
-                    class="btn btn-primary"
-                    disabled=""
-                    id="uploadPlugin"
+                    class="PluginManagement__uploadDropzone"
+                    type="button"
                   >
-                    Upload
+                    <span
+                      class="PluginManagement__uploadDropzoneTitle"
+                    >
+                      <i
+                        aria-hidden="true"
+                        class="icon icon-upload-outline"
+                      />
+                      <span
+                        class="PluginManagement__uploadDropzoneTitleText"
+                      >
+                        Click or drop plugin bundle to upload
+                      </span>
+                    </span>
                   </button>
-                  <div
-                    class="help-text m-0"
+                  <input
+                    accept=".tar.gz,.gz"
+                    class="PluginManagement__fileInput"
+                    type="file"
                   />
                   <div
                     class="help-text"
diff --git a/webapp/channels/src/components/admin_console/plugin_management/plugin_management.scss b/webapp/channels/src/components/admin_console/plugin_management/plugin_management.scss
new file mode 100644
index 000000000000..d64ce1a8e6fb
--- /dev/null
+++ b/webapp/channels/src/components/admin_console/plugin_management/plugin_management.scss
@@ -0,0 +1,132 @@
+.PluginManagement {
+    &__uploadDropzone {
+        position: relative;
+        display: flex;
+        width: 100%;
+        min-height: 60px;
+        flex-direction: column;
+        align-items: flex-start;
+        justify-content: center;
+        padding: 20px;
+        border: 1px dashed rgba(var(--center-channel-color-rgb), 0.32);
+        border-radius: 4px;
+        background: transparent;
+        color: rgba(var(--center-channel-color-rgb), 0.75);
+        cursor: pointer;
+        font: inherit;
+        gap: 2px;
+        text-align: left;
+        white-space: normal;
+
+        &:hover:not(:disabled),
+        &--active {
+            border-color: var(--button-bg);
+            background: rgba(var(--button-bg-rgb), 0.08);
+            color: var(--button-bg);
+        }
+
+        &:disabled {
+            border-color: rgba(var(--center-channel-color-rgb), 0.16);
+            background: transparent;
+            color: rgba(var(--center-channel-color-rgb), 0.56);
+            cursor: not-allowed;
+        }
+
+        &:focus-visible {
+            outline: 2px solid var(--button-bg);
+            outline-offset: 2px;
+        }
+    }
+
+    &__uploadDropzoneTitle {
+        display: flex;
+        overflow: hidden;
+        max-width: 100%;
+        align-items: center;
+        font-weight: 600;
+        gap: 6px;
+
+        .icon {
+            flex-shrink: 0;
+            font-size: 18px;
+        }
+    }
+
+    &__uploadDropzoneTitleText {
+        overflow: hidden;
+        min-width: 0;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    &__uploadDropzoneDescription {
+        color: rgba(var(--center-channel-color-rgb), 0.72);
+        font-size: 12px;
+        font-weight: 400;
+        line-height: 16px;
+        overflow-wrap: anywhere;
+        white-space: normal;
+    }
+
+    input.PluginManagement__fileInput[type='file'] {
+        position: absolute;
+        overflow: hidden;
+        width: 1px;
+        height: 1px;
+        clip-path: inset(50%);
+        opacity: 0;
+        pointer-events: none;
+        white-space: nowrap;
+    }
+
+    &__uploadStatus {
+        display: flex;
+        align-items: flex-start;
+        margin-top: 12px;
+        margin-left: -4px;
+        color: rgba(var(--center-channel-color-rgb), 0.75);
+        gap: 4px;
+        line-height: 20px;
+
+        .icon {
+            flex-shrink: 0;
+            font-size: 18px;
+        }
+
+        &--success .icon {
+            color: var(--online-indicator);
+        }
+
+        &--error {
+            color: var(--error-text);
+        }
+    }
+
+    &__uploadProgress {
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        overflow: hidden;
+        height: 4px;
+        border-radius: 0 0 3px 3px;
+        background: rgba(var(--center-channel-color-rgb), 0.12);
+    }
+
+    &__uploadProgressBar {
+        width: 40%;
+        height: 100%;
+        animation: PluginManagement-upload-progress 1.2s ease-in-out infinite;
+        background: var(--button-bg);
+    }
+}
+
+@keyframes PluginManagement-upload-progress {
+    0% {
+        transform: translateX(-100%);
+    }
+
+    100% {
+        transform: translateX(250%);
+    }
+}
diff --git a/webapp/channels/src/components/admin_console/plugin_management/plugin_management.test.tsx b/webapp/channels/src/components/admin_console/plugin_management/plugin_management.test.tsx
index d1503891f02b..3d4cd3380a7f 100644
--- a/webapp/channels/src/components/admin_console/plugin_management/plugin_management.test.tsx
+++ b/webapp/channels/src/components/admin_console/plugin_management/plugin_management.test.tsx
@@ -9,7 +9,7 @@ import PluginState from 'mattermost-redux/constants/plugins';
 import {PluginManagement} from 'components/admin_console/plugin_management/plugin_management';
 
 import {defaultIntl} from 'tests/helpers/intl-test-helper';
-import {renderWithContext, screen} from 'tests/react_testing_utils';
+import {createEvent, fireEvent, renderWithContext, screen, userEvent, waitFor} from 'tests/react_testing_utils';
 
 describe('components/PluginManagement', () => {
     const defaultProps = {
@@ -577,6 +577,213 @@ describe('components/PluginManagement', () => {
         expect(container).toMatchSnapshot();
     });
 
+    test('uploads the selected plugin bundle immediately', async () => {
+        const uploadPlugin = jest.fn().mockResolvedValue({data: {}});
+        const getPlugins = jest.fn().mockResolvedValue({data: {}});
+        const props = {
+            ...defaultProps,
+            actions: {
+                ...defaultProps.actions,
+                uploadPlugin,
+                getPlugins,
+            },
+        };
+        const {container} = renderWithContext(<PluginManagement {...props}/>);
+
+        const input = container.querySelector('input[type="file"]') as HTMLInputElement;
+        const file = new File(['plugin'], 'sample-plugin.tar.gz', {type: 'application/gzip'});
+        await userEvent.upload(input, file);
+
+        await waitFor(() => {
+            expect(uploadPlugin).toHaveBeenCalledWith(file, false);
+            expect(getPlugins).toHaveBeenCalled();
+        });
+    });
+
+    test('shows upload progress while the selected bundle is uploading', async () => {
+        let resolveUpload: (value: {data: Record<string, never>}) => void = () => {};
+        const uploadPlugin = jest.fn().mockImplementation(() => new Promise((resolve) => {
+            resolveUpload = resolve;
+        }));
+        const props = {
+            ...defaultProps,
+            actions: {
+                ...defaultProps.actions,
+                uploadPlugin,
+            },
+        };
+        const {container} = renderWithContext(<PluginManagement {...props}/>);
+
+        const input = container.querySelector('input[type="file"]') as HTMLInputElement;
+        const file = new File(['plugin'], 'sample-plugin.tar.gz', {type: 'application/gzip'});
+        await userEvent.upload(input, file);
+
+        expect(screen.getByRole('progressbar', {name: 'Plugin upload progress'})).toBeInTheDocument();
+
+        resolveUpload({data: {}});
+        await waitFor(() => {
+            expect(screen.queryByRole('progressbar', {name: 'Plugin upload progress'})).not.toBeInTheDocument();
+        });
+    });
+
+    test('keeps the dropzone active when dragging between child elements', () => {
+        renderWithContext(<PluginManagement {...defaultProps}/>);
+
+        const dropzone = screen.getByRole('button', {name: /Click or drop plugin bundle to upload/});
+        const dropzoneTitle = dropzone.querySelector('.PluginManagement__uploadDropzoneTitle');
+        expect(dropzoneTitle).not.toBeNull();
+
+        fireEvent.dragEnter(dropzone);
+        expect(dropzone).toHaveClass('PluginManagement__uploadDropzone--active');
+
+        const dragLeaveChild = createEvent.dragLeave(dropzone);
+        Object.defineProperty(dragLeaveChild, 'relatedTarget', {value: dropzoneTitle});
+        fireEvent(dropzone, dragLeaveChild);
+        expect(dropzone).toHaveClass('PluginManagement__uploadDropzone--active');
+
+        const dragLeaveDropzone = createEvent.dragLeave(dropzone);
+        Object.defineProperty(dragLeaveDropzone, 'relatedTarget', {value: document.body});
+        fireEvent(dropzone, dragLeaveDropzone);
+        expect(dropzone).not.toHaveClass('PluginManagement__uploadDropzone--active');
+    });
+
+    test('explains why direct upload is disabled when plugin signatures are required', () => {
+        const props = {
+            ...defaultProps,
+            config: {
+                ...defaultProps.config,
+                PluginSettings: {
+                    ...defaultProps.config.PluginSettings,
+                    RequirePluginSignature: true,
+                },
+            },
+        };
+        renderWithContext(<PluginManagement {...props}/>);
+
+        expect(screen.getByRole('button', {name: /Click or drop plugin bundle to upload/})).toBeDisabled();
+        expect(screen.getByText('Plugin signatures are required. Install plugins through Marketplace instead.')).toBeInTheDocument();
+    });
+
+    test('explains why direct upload is disabled when plugin uploads are disabled', () => {
+        const props = {
+            ...defaultProps,
+            config: {
+                ...defaultProps.config,
+                PluginSettings: {
+                    ...defaultProps.config.PluginSettings,
+                    EnableUploads: false,
+                },
+            },
+        };
+        renderWithContext(<PluginManagement {...props}/>);
+
+        expect(screen.getByRole('button', {name: /Click or drop plugin bundle to upload/})).toBeDisabled();
+        expect(screen.getByText('Plugin uploads are disabled. Enable plugin uploads in config.json before uploading a plugin.')).toBeInTheDocument();
+    });
+
+    test('explains why direct upload is disabled when the user lacks permission', () => {
+        const props = {
+            ...defaultProps,
+            isDisabled: true,
+        };
+        renderWithContext(<PluginManagement {...props}/>);
+
+        expect(screen.getByRole('button', {name: /Click or drop plugin bundle to upload/})).toBeDisabled();
+        expect(screen.getByText('You need permission to manage plugins before uploading a plugin.')).toBeInTheDocument();
+    });
+
+    test('explains why direct upload is disabled when plugins are not enabled', () => {
+        const props = {
+            ...defaultProps,
+            config: {
+                ...defaultProps.config,
+                PluginSettings: {
+                    ...defaultProps.config.PluginSettings,
+                    Enable: false,
+                },
+            },
+        };
+        renderWithContext(<PluginManagement {...props}/>);
+
+        expect(screen.getByRole('button', {name: /Click or drop plugin bundle to upload/})).toBeDisabled();
+        expect(screen.getByText('Enable plugins before uploading a plugin.')).toBeInTheDocument();
+    });
+
+    test('uploads a dropped plugin bundle', async () => {
+        const uploadPlugin = jest.fn().mockResolvedValue({data: {}});
+        const getPlugins = jest.fn().mockResolvedValue({data: {}});
+        const props = {
+            ...defaultProps,
+            actions: {
+                ...defaultProps.actions,
+                uploadPlugin,
+                getPlugins,
+            },
+        };
+        renderWithContext(<PluginManagement {...props}/>);
+
+        const dropzone = screen.getByRole('button', {name: /Click or drop plugin bundle to upload/});
+        const file = new File(['plugin'], 'sample-plugin.tar.gz', {type: 'application/gzip'});
+
+        fireEvent.drop(dropzone, {dataTransfer: {files: [file]}});
+
+        await waitFor(() => {
+            expect(uploadPlugin).toHaveBeenCalledWith(file, false);
+            expect(getPlugins).toHaveBeenCalled();
+        });
+    });
+
+    const overwriteUpload = async (data: {id: string; name: string; version: string}) => {
+        const uploadPlugin = jest.fn().
+            mockResolvedValueOnce({error: {server_error_id: 'app.plugin.install_id.app_error', message: 'A plugin with this ID already exists.'}}).
+            mockResolvedValueOnce({data});
+        const getPlugins = jest.fn().mockResolvedValue({data: {}});
+        const props = {
+            ...defaultProps,
+            actions: {
+                ...defaultProps.actions,
+                uploadPlugin,
+                getPlugins,
+            },
+        };
+        const {container} = renderWithContext(<PluginManagement {...props}/>);
+
+        const input = container.querySelector('input[type="file"]') as HTMLInputElement;
+        const file = new File(['plugin'], 'sample-plugin.tar.gz', {type: 'application/gzip'});
+        await userEvent.upload(input, file);
+
+        const confirmButton = await screen.findByText('Overwrite');
+        await userEvent.click(confirmButton);
+
+        await waitFor(() => {
+            expect(uploadPlugin).toHaveBeenCalledWith(file, true);
+        });
+    };
+
+    test('formats an upgraded plugin overwrite message when the new version is newer', async () => {
+        await overwriteUpload({id: 'plugin_0', name: 'Plugin 0', version: '0.2.0'});
+
+        expect(await screen.findByText('Successfully upgraded plugin: Plugin 0 (v0.1.0 → v0.2.0)')).toBeInTheDocument();
+    });
+
+    test('formats a downgraded plugin overwrite message when the new version is older', async () => {
+        await overwriteUpload({id: 'plugin_0', name: 'Plugin 0', version: '0.0.9'});
+
+        expect(await screen.findByText('Successfully downgraded plugin: Plugin 0 (v0.1.0 → v0.0.9)')).toBeInTheDocument();
+    });
+
+    test('formats a same-version plugin overwrite message when the version is unchanged', async () => {
+        await overwriteUpload({id: 'plugin_0', name: 'Plugin 0', version: '0.1.0'});
+
+        expect(await screen.findByText('Successfully replaced plugin: Plugin 0 (same version v0.1.0)')).toBeInTheDocument();
+    });
+
+    test('falls back to a generic overwrite message when versions are missing or invalid semver', async () => {
+        await overwriteUpload({id: 'plugin_unknown', name: 'Plugin Unknown', version: 'not-a-version'});
+
+        expect(await screen.findByText('Successfully updated plugin: Plugin Unknown')).toBeInTheDocument();
+    });
+
     test('should show the settings link for a plugin with sections only', () => {
         const props = {
             ...defaultProps,
diff --git a/webapp/channels/src/components/admin_console/plugin_management/plugin_management.tsx b/webapp/channels/src/components/admin_console/plugin_management/plugin_management.tsx
index 4bf791cb8937..cc6c5c7ee503 100644
--- a/webapp/channels/src/components/admin_console/plugin_management/plugin_management.tsx
+++ b/webapp/channels/src/components/admin_console/plugin_management/plugin_management.tsx
@@ -1,12 +1,13 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
+import classNames from 'classnames';
 import React from 'react';
 import type {WrappedComponentProps} from 'react-intl';
 import {FormattedMessage, defineMessages, injectIntl} from 'react-intl';
 import {Link} from 'react-router-dom';
+import semver from 'semver';
 
-import {Button} from '@mattermost/shared/components/button';
 import type {AdminConfig} from '@mattermost/types/config';
 import type {DeepPartial} from '@mattermost/types/utilities';
 
@@ -24,11 +25,13 @@ import * as Utils from 'utils/utils';
 import BooleanSetting from '../boolean_setting';
 import OLDAdminSettings from '../old_admin_settings';
 import type {BaseProps, BaseState} from '../old_admin_settings';
-import PluginMetadataPanel from '../plugin_metadata_panel/plugin_metadata_panel';
+import PluginMetadataPanel, {formatPluginVersion} from '../plugin_metadata_panel/plugin_metadata_panel';
 import SettingSet from '../setting_set';
 import SettingsGroup from '../settings_group';
 import TextSetting from '../text_setting';
 
+import './plugin_management.scss';
+
 const PluginItemState = ({state}: {state: number}) => {
     switch (state) {
     case PluginState.PLUGIN_STATE_NOT_RUNNING:
@@ -211,6 +214,11 @@ const messages = defineMessages({
     automaticPrepackagedPluginsDesc: {id: 'admin.plugins.settings.automaticPrepackagedPluginsDesc', defaultMessage: 'When true, automatically installs any prepackaged plugin found to be enabled in the server configuration.'},
     marketplaceUrl: {id: 'admin.plugins.settings.marketplaceUrl', defaultMessage: 'Marketplace URL:'},
     marketplaceUrlDesc: {id: 'admin.plugins.settings.marketplaceUrlDesc', defaultMessage: 'URL of the marketplace server.'},
+    uploadSuccess: {id: 'admin.plugin.upload.success', defaultMessage: 'Successfully uploaded plugin: {pluginName}'},
+    uploadSuccessUpdated: {id: 'admin.plugin.upload.success_updated', defaultMessage: 'Successfully updated plugin: {pluginName}'},
+    uploadSuccessUpgraded: {id: 'admin.plugin.upload.success_upgraded', defaultMessage: 'Successfully upgraded plugin: {pluginName} ({previousVersion} → {version})'},
+    uploadSuccessDowngraded: {id: 'admin.plugin.upload.success_downgraded', defaultMessage: 'Successfully downgraded plugin: {pluginName} ({previousVersion} → {version})'},
+    uploadSuccessSame: {id: 'admin.plugin.upload.success_same', defaultMessage: 'Successfully replaced plugin: {pluginName} (same version {version})'},
 });
 
 export const searchableStrings = [
@@ -501,6 +509,7 @@ type State = BaseState & {
     marketplaceUrl: string;
     requirePluginSignature: boolean;
     removing: string | null;
+    draggingUpload: boolean;
 };
 export class PluginManagement extends OLDAdminSettings<Props, State> {
     private fileInput: React.RefObject<HTMLInputElement>;
@@ -522,6 +531,7 @@ export class PluginManagement extends OLDAdminSettings<Props, State> {
             confirmOverwriteInstallModal: false,
             showRemoveModal: false,
             resolveRemoveModal: null,
+            draggingUpload: false,
         });
         this.fileInput = React.createRef();
     }
@@ -564,24 +574,133 @@ export class PluginManagement extends OLDAdminSettings<Props, State> {
     }
 
     handleChooseFileClick = () => {
+        if (!this.canUploadPlugin()) {
+            return;
+        }
         this.fileInput.current?.click();
     };
 
+    renderUploadDropzoneTitleText = () => {
+        if (this.state.uploading) {
+            return (
+                <FormattedMessage
+                    id='admin.plugin.uploading_file'
+                    defaultMessage='Uploading {fileName}'
+                    values={{fileName: this.state.file?.name || '...'}}
+                />
+            );
+        }
+
+        if (this.state.file) {
+            return (
+                <FormattedMessage
+                    id='admin.plugin.upload.selected_file'
+                    defaultMessage='Selected: {fileName}'
+                    values={{fileName: this.state.file.name}}
+                />
+            );
+        }
+
+        return (
+            <FormattedMessage
+                id='admin.plugin.upload.dropzone_title'
+                defaultMessage='Click or drop plugin bundle to upload'
+            />
+        );
+    };
+
+    canUploadPlugin = () => {
+        const enable = this.props.config?.PluginSettings?.Enable;
+        const requirePluginSignature = this.props.config.PluginSettings?.RequirePluginSignature;
+
+        return Boolean(this.state.enableUploads && enable && !requirePluginSignature && !this.props.isDisabled && !this.state.uploading);
+    };
+
+    handleSelectedUploadFile = (file: File) => {
+        this.setState({
+            lastMessage: null,
+            serverError: null,
+            fileSelected: true,
+            file,
+        });
+        this.helpSubmitUpload(file, false);
+    };
+
     handleUpload = () => {
-        this.setState({lastMessage: null, serverError: null});
         const element = this.fileInput.current as HTMLInputElement;
         if (element.files && element.files.length > 0) {
-            this.setState({fileSelected: true, file: element.files[0]});
+            this.handleSelectedUploadFile(element.files[0]);
+        }
+        Utils.clearFileInput(element);
+    };
+
+    handleUploadDragEnter = (e: React.DragEvent) => {
+        if (!this.canUploadPlugin()) {
+            return;
+        }
+
+        e.preventDefault();
+        this.setState({draggingUpload: true});
+    };
+
+    handleUploadDragOver = (e: React.DragEvent) => {
+        if (!this.canUploadPlugin()) {
+            return;
+        }
+
+        e.preventDefault();
+        e.dataTransfer.dropEffect = 'copy';
+    };
+
+    handleUploadDragLeave = (e: React.DragEvent) => {
+        e.preventDefault();
+
+        const relatedTarget = e.relatedTarget || e.nativeEvent.relatedTarget;
+        if (relatedTarget instanceof Node && e.currentTarget.contains(relatedTarget)) {
+            return;
+        }
+
+        this.setState({draggingUpload: false});
+    };
+
+    handleUploadDrop = (e: React.DragEvent) => {
+        e.preventDefault();
+        this.setState({draggingUpload: false});
+
+        if (!this.canUploadPlugin()) {
+            return;
+        }
+
+        const file = e.dataTransfer.files?.[0];
+        if (file) {
+            this.handleSelectedUploadFile(file);
+        }
+    };
+
+    formatUploadOverwriteMessage = (pluginName: string | undefined, previousVersion: string | undefined, newVersion: string | undefined) => {
+        if (previousVersion && newVersion && semver.valid(previousVersion) && semver.valid(newVersion)) {
+            if (semver.gt(newVersion, previousVersion)) {
+                return this.props.intl.formatMessage(messages.uploadSuccessUpgraded, {pluginName, previousVersion: formatPluginVersion(previousVersion), version: formatPluginVersion(newVersion)});
+            }
+            if (semver.lt(newVersion, previousVersion)) {
+                return this.props.intl.formatMessage(messages.uploadSuccessDowngraded, {pluginName, previousVersion: formatPluginVersion(previousVersion), version: formatPluginVersion(newVersion)});
+            }
+            return this.props.intl.formatMessage(messages.uploadSuccessSame, {pluginName, version: formatPluginVersion(newVersion)});
         }
+        return this.props.intl.formatMessage(messages.uploadSuccessUpdated, {pluginName});
     };
 
     helpSubmitUpload = async (file: File, force: boolean) => {
         this.setState({uploading: true});
-        const {error} = await this.props.actions.uploadPlugin(file, force);
+        const {data, error} = await this.props.actions.uploadPlugin(file, force);
 
         if (error) {
             if (error.server_error_id === 'app.plugin.install_id.app_error' && !force) {
-                this.setState({confirmOverwriteUploadModal: true, overwritingUpload: true});
+                this.setState({
+                    confirmOverwriteUploadModal: true,
+                    overwritingUpload: true,
+                    uploading: false,
+                });
                 return;
             }
             this.setState({
@@ -600,13 +719,14 @@ export class PluginManagement extends OLDAdminSettings<Props, State> {
             return;
         }
 
+        // Look up the version being replaced before getPlugins() refreshes the store with the new one.
+        const previousVersion = this.state.overwritingUpload && data ? this.props.plugins[data.id]?.version : undefined;
+
         this.setState({loading: true});
         await this.props.actions.getPlugins();
 
-        let msg = `Successfully uploaded plugin from ${file?.name}`;
-        if (this.state.overwritingUpload) {
-            msg = `Successfully updated plugin from ${file?.name}`;
-        }
+        const pluginName = data?.name || file?.name;
+        const msg = this.state.overwritingUpload ? this.formatUploadOverwriteMessage(pluginName, previousVersion, data?.version) : this.props.intl.formatMessage(messages.uploadSuccess, {pluginName});
 
         this.setState({
             file: null,
@@ -619,20 +739,6 @@ export class PluginManagement extends OLDAdminSettings<Props, State> {
         });
     };
 
-    handleSubmitUpload = (e: React.SyntheticEvent) => {
-        e.preventDefault();
-
-        const element = this.fileInput.current as HTMLInputElement;
-        if (element.files?.length === 0) {
-            return;
-        }
-        const file = element.files && element.files[0];
-        if (file) {
-            this.helpSubmitUpload(file, false);
-        }
-        Utils.clearFileInput(element);
-    };
-
     handleOverwriteUploadPluginCancel = () => {
         this.setState({
             file: null,
@@ -935,41 +1041,78 @@ export class PluginManagement extends OLDAdminSettings<Props, State> {
         return null;
     };
 
+    renderUploadDisabledReason = (enable: boolean | undefined, enableUploads: boolean, requirePluginSignature: boolean | undefined) => {
+        if (this.props.isDisabled) {
+            return (
+                <FormattedMessage
+                    id='admin.plugin.upload.disabled_permission'
+                    defaultMessage='You need permission to manage plugins before uploading a plugin.'
+                />
+            );
+        }
+
+        if (!enable) {
+            return (
+                <FormattedMessage
+                    id='admin.plugin.upload.disabled_plugins'
+                    defaultMessage='Enable plugins before uploading a plugin.'
+                />
+            );
+        }
+
+        if (requirePluginSignature) {
+            return (
+                <FormattedMessage
+                    id='admin.plugin.upload.disabled_signature_required'
+                    defaultMessage='Plugin signatures are required. Install plugins through Marketplace instead.'
+                />
+            );
+        }
+
+        if (!enableUploads) {
+            return (
+                <FormattedMessage
+                    id='admin.plugin.upload.disabled_uploads'
+                    defaultMessage='Plugin uploads are disabled. Enable plugin uploads in config.json before uploading a plugin.'
+                />
+            );
+        }
+
+        return null;
+    };
+
     renderSettings = () => {
         const {enableUploads} = this.state;
         const enable = this.props.config?.PluginSettings?.Enable;
+        const requirePluginSignature = this.props.config.PluginSettings?.RequirePluginSignature;
         let serverError = <></>;
         let lastMessage = <></>;
 
         // Using props values to make sure these are set on the server and not just locally
-        const enableUploadButton = enableUploads && enable && !(this.props.config.PluginSettings && this.props.config.PluginSettings.RequirePluginSignature);
+        const enableUploadButton = enableUploads && enable && !requirePluginSignature;
+        const uploadDisabledReason = this.renderUploadDisabledReason(enable, enableUploads, requirePluginSignature);
+        const uploadDropzoneDisabled = !enableUploadButton || this.props.isDisabled || this.state.uploading;
 
         if (this.state.serverError) {
-            serverError = <div className='col-sm-12'><div className='form-group has-error half'><label className='control-label'>{this.state.serverError}</label></div></div>;
+            serverError = (
+                <div className='PluginManagement__uploadStatus PluginManagement__uploadStatus--error'>
+                    <i
+                        className='icon icon-alert-outline'
+                        aria-hidden={true}
+                    />
+                    <span>{this.state.serverError}</span>
+                </div>
+            );
         }
         if (this.state.lastMessage) {
-            lastMessage = <div className='col-sm-12'><div className='form-group half'>{this.state.lastMessage}</div></div>;
-        }
-
-        let fileName;
-        if (this.state.file) {
-            fileName = this.state.file.name;
-        }
-
-        let uploadButtonText;
-        if (this.state.uploading) {
-            uploadButtonText = (
-                <FormattedMessage
-                    id='admin.plugin.uploading'
-                    defaultMessage='Uploading...'
-                />
-            );
-        } else {
-            uploadButtonText = (
-                <FormattedMessage
-                    id='admin.plugin.upload'
-                    defaultMessage='Upload'
-                />
+            lastMessage = (
+                <div className='PluginManagement__uploadStatus PluginManagement__uploadStatus--success'>
+                    <i
+                        className='icon icon-check-circle'
+                        aria-hidden={true}
+                    />
+                    <span>{this.state.lastMessage}</span>
+                </div>
             );
         }
 
@@ -1109,7 +1252,7 @@ export class PluginManagement extends OLDAdminSettings<Props, State> {
         );
 
         return (
-            <div className='admin-console__wrapper'>
+            <div className='admin-console__wrapper PluginManagement'>
                 <div className='admin-console__content'>
                     <SettingsGroup
                         id={'PluginSettings'}
@@ -1161,37 +1304,54 @@ export class PluginManagement extends OLDAdminSettings<Props, State> {
                                     helpText={uploadHelpText}
                                     label={<FormattedMessage {...messages.uploadTitle}/>}
                                 >
-                                    <div className='file__upload'>
-                                        <Button
-                                            type='button'
-                                            emphasis='tertiary'
-                                            onClick={this.handleChooseFileClick}
-                                            disabled={!enableUploadButton || this.props.isDisabled}
-                                        >
-                                            <FormattedMessage
-                                                id='admin.plugin.choose'
-                                                defaultMessage='Choose File'
-                                            />
-                                        </Button>
-                                        <input
-                                            ref={this.fileInput}
-                                            type='file'
-                                            accept='.gz'
-                                            onChange={this.handleUpload}
-                                            disabled={!enableUploadButton || this.props.isDisabled}
-                                        />
-                                    </div>
-                                    <Button
-                                        emphasis='primary'
-                                        id='uploadPlugin'
-                                        disabled={!this.state.fileSelected}
-                                        onClick={this.handleSubmitUpload}
+                                    <button
+                                        type='button'
+                                        className={classNames('PluginManagement__uploadDropzone', {
+                                            'PluginManagement__uploadDropzone--active': this.state.draggingUpload,
+                                        })}
+                                        onClick={this.handleChooseFileClick}
+                                        onDragEnter={this.handleUploadDragEnter}
+                                        onDragOver={this.handleUploadDragOver}
+                                        onDragLeave={this.handleUploadDragLeave}
+                                        onDrop={this.handleUploadDrop}
+                                        disabled={uploadDropzoneDisabled}
+                                        aria-describedby={uploadDisabledReason ? 'plugin-upload-description' : undefined}
                                     >
-                                        {uploadButtonText}
-                                    </Button>
-                                    <div className='help-text m-0'>
-                                        {fileName}
-                                    </div>
+                                        <span className='PluginManagement__uploadDropzoneTitle'>
+                                            <i
+                                                className='icon icon-upload-outline'
+                                                aria-hidden={true}
+                                            />
+                                            <span className='PluginManagement__uploadDropzoneTitleText'>
+                                                {this.renderUploadDropzoneTitleText()}
+                                            </span>
+                                        </span>
+                                        {uploadDisabledReason && (
+                                            <span
+                                                className='PluginManagement__uploadDropzoneDescription'
+                                                id='plugin-upload-description'
+                                            >
+                                                {uploadDisabledReason}
+                                            </span>
+                                        )}
+                                        {this.state.uploading && (
+                                            <div
+                                                className='PluginManagement__uploadProgress'
+                                                role='progressbar'
+                                                aria-label={this.props.intl.formatMessage({id: 'admin.plugin.upload.progress', defaultMessage: 'Plugin upload progress'})}
+                                            >
+                                                <div className='PluginManagement__uploadProgressBar'/>
+                                            </div>
+                                        )}
+                                    </button>
+                                    <input
+                                        ref={this.fileInput}
+                                        className='PluginManagement__fileInput'
+                                        type='file'
+                                        accept='.tar.gz,.gz'
+                                        onChange={this.handleUpload}
+                                        disabled={uploadDropzoneDisabled}
+                                    />
                                     {serverError}
                                     {lastMessage}
                                 </SettingSet>
diff --git a/webapp/channels/src/i18n/en.json b/webapp/channels/src/i18n/en.json
index 90f5906a1ff4..5521b2ac0e47 100644
--- a/webapp/channels/src/i18n/en.json
+++ b/webapp/channels/src/i18n/en.json
@@ -2748,7 +2748,6 @@
   "admin.permissions.teamScheme.selectTeamsDescription": "Select teams where permission exceptions are required.",
   "admin.permissions.teamScheme.selectTeamsTitle": "Select teams to override permissions",
   "admin.plugin.backToPlugins": "Go back to the Plugins",
-  "admin.plugin.choose": "Choose File",
   "admin.plugin.cluster_instance": "Cluster Instance",
   "admin.plugin.customSection.pluginDisabledWarning": "In order to view this section, enable the plugin and click Save.",
   "admin.plugin.customSections.pluginDisabledWarning": "In order to view and configure plugin settings, enable the plugin and click Save.",
@@ -2787,14 +2786,26 @@
   "admin.plugin.state.stopping": "Stopping",
   "admin.plugin.state.stopping.description": "This plugin is stopping.",
   "admin.plugin.state.unknown": "Unknown",
-  "admin.plugin.upload": "Upload",
+  "admin.plugin.upload.disabled_permission": "You need permission to manage plugins before uploading a plugin.",
+  "admin.plugin.upload.disabled_plugins": "Enable plugins before uploading a plugin.",
+  "admin.plugin.upload.disabled_signature_required": "Plugin signatures are required. Install plugins through Marketplace instead.",
+  "admin.plugin.upload.disabled_uploads": "Plugin uploads are disabled. Enable plugin uploads in config.json before uploading a plugin.",
+  "admin.plugin.upload.dropzone_title": "Click or drop plugin bundle to upload",
   "admin.plugin.upload.overwrite_modal.desc": "A plugin with this ID already exists. Would you like to overwrite it?",
   "admin.plugin.upload.overwrite_modal.overwrite": "Overwrite",
   "admin.plugin.upload.overwrite_modal.title": "Overwrite existing plugin?",
+  "admin.plugin.upload.progress": "Plugin upload progress",
+  "admin.plugin.upload.selected_file": "Selected: {fileName}",
+  "admin.plugin.upload.success": "Successfully uploaded plugin: {pluginName}",
+  "admin.plugin.upload.success_downgraded": "Successfully downgraded plugin: {pluginName} ({previousVersion} → {version})",
+  "admin.plugin.upload.success_same": "Successfully replaced plugin: {pluginName} (same version {version})",
+  "admin.plugin.upload.success_updated": "Successfully updated plugin: {pluginName}",
+  "admin.plugin.upload.success_upgraded": "Successfully upgraded plugin: {pluginName} ({previousVersion} → {version})",
   "admin.plugin.uploadAndPluginDisabledDesc": "To enable plugins, set <strong>Enable Plugins</strong> to true. See <link>documentation</link> to learn more.",
   "admin.plugin.uploadDesc": "Upload a plugin for your Mattermost server. See <link>documentation</link> to learn more.",
   "admin.plugin.uploadDisabledDesc": "Enable plugin uploads in config.json. See <link>documentation</link> to learn more.",
   "admin.plugin.uploading": "Uploading...",
+  "admin.plugin.uploading_file": "Uploading {fileName}",
   "admin.plugin.uploadTitle": "Upload Plugin: ",
   "admin.plugin.version_title": "Version",
   "admin.plugins.pluginManagement": "Plugin Management",