feat: 更新拖动上传脚本

Author: ArgoZhang

src/BootstrapBlazor/wwwroot/modules/upload.js

@@ -7,7 +7,8 @@ export function init(id) {
         return
     }
     const preventHandler = e => e.preventDefault()
-    const upload = { el, preventHandler }
+    const body = el.querySelector('.upload-drop-body');
+    const upload = { el, body, preventHandler }
     Data.set(id, upload)
 
     const inputFile = el.querySelector('[type="file"]')
@@ -20,7 +21,20 @@ export function init(id) {
     EventHandler.on(document, 'dragenter', preventHandler)
     EventHandler.on(document, 'dragover', preventHandler)
 
-    EventHandler.on(el, 'drop', e => {
+    EventHandler.on(body, 'dragenter', e => {
+        el.classList.add('dropping');
+    })
+
+    EventHandler.on(body, 'dragleave', e => {
+        el.classList.remove('dropping');
+    });
+
+    EventHandler.on(body, 'drop', e => {
+        el.classList.remove('dropping');
+
+        if (el.classList.contains('disabled')) {
+            return;
+        }
         try {
             const fileList = e.dataTransfer.files
             if (fileList.length === 0) {
@@ -36,6 +50,10 @@ export function init(id) {
     })
 
     EventHandler.on(el, 'paste', e => {
+        if (el.classList.contains('disabled')) {
+            return;
+        }
+
         inputFile.files = e.clipboardData.files
         const event = new Event('change', { bubbles: true })
         inputFile.dispatchEvent(event)
@@ -66,14 +84,18 @@ export function dispose(id) {
     Data.remove(id)
 
     if (upload) {
-        const { el, preventHandler } = upload;
+        const { el, body, preventHandler } = upload;
 
-        EventHandler.off(el, 'click')
-        EventHandler.off(el, 'drop')
-        EventHandler.off(el, 'paste')
         EventHandler.off(document, 'dragleave', preventHandler)
         EventHandler.off(document, 'drop', preventHandler)
         EventHandler.off(document, 'dragenter', preventHandler)
         EventHandler.off(document, 'dragover', preventHandler)
+
+        EventHandler.off(el, 'click')
+        EventHandler.off(el, 'drop')
+        EventHandler.off(el, 'paste')
+        EventHandler.off(body, 'dragleave')
+        EventHandler.off(body, 'drop')
+        EventHandler.off(body, 'dragenter')
     }
 }