From 107627f357560254406b83cb770a08d83a2f993b Mon Sep 17 00:00:00 2001
From: blek <me@blek.codes>
Date: Sat, 30 Sep 2023 12:19:48 +1000
Subject: [PATCH] show cool animation on button file select

---
 filed/static/dragndrop-form.js | 30 ++++++++++++++++++++----------
 1 file changed, 20 insertions(+), 10 deletions(-)

diff --git a/filed/static/dragndrop-form.js b/filed/static/dragndrop-form.js
index 6b3a527..8289ef4 100644
--- a/filed/static/dragndrop-form.js
+++ b/filed/static/dragndrop-form.js
@@ -13,6 +13,24 @@
         /** @type {HTMLInputElement} */
         const input_el = document.getElementById('bfile-formupload-file');
 
+        /** @param {File} file */
+        async function selectFile(file) {
+            text.innerText = 'Processing...';
+            drdrop_enabled = false;
+            await fill_bg();
+            drdrop_enabled = true;
+            text.innerText = `Selected file: ${file.name.substring(0,16)}${file.name.length > 16 ? '...' : ''}\nYou can drop another file to replace this one`;
+
+            const transfer = new DataTransfer();
+            transfer.items.add(file);
+            input_el.files = transfer.files;
+        }
+
+        input_el.onchange = e => {
+            const file = input_el.files[0]
+            selectFile(file);
+        }
+
         function drag_end() {
             root_drag_rop.style.background = 'var(--header-sec-color)'
             drag_rop.style.borderColor = '#656565';
@@ -33,17 +51,9 @@
 
             if (!drdrop_enabled) return;
 
-            if (e.dataTransfer.items) {
+            if (e.dataTransfer.items.length != 0) {
                 let file = e.dataTransfer.items[0].getAsFile();
-                text.innerText = 'Processing...';
-                drdrop_enabled = false;
-                await fill_bg();
-                drdrop_enabled = true;
-                text.innerText = `Selected file: ${file.name.substring(0,16)}${file.name.length > 16 ? '...' : ''}\nYou can drop another file to replace this one`;
-
-                const transfer = new DataTransfer();
-                transfer.items.add(file);
-                input_el.files = transfer.files;
+                selectFile(file);
             }
         });
         drag_rop.addEventListener('dragover', e => {