[WebUI] Add missing handler for file input

2 files changed, 21 insertions, 17 deletions

diff --git a/interface/index.html b/interface/index.html
index 5b3187309..329446a87 100644
--- a/interface/index.html
+++ b/interface/index.html
@@ -383,7 +383,7 @@
 						<span class="h6 fw-bolder my-auto">Scan suspected message</span>
 						<div class="d-flex input-group-sm align-items-center ms-auto">
 							<label for="formFile" class="col-auto col-form-label-sm me-1">Choose a file:</label>
-							<input class="form-control form-control-sm btn btn-secondary" id="formFile" type="file">
+							<input class="form-control form-control-sm btn btn-secondary" id="formFile" type="file" multiple>
 						</div>
 					</div>
 					<div class="card-body">
diff --git a/interface/js/app/upload.js b/interface/js/app/upload.js
index 5f330002b..a484a41aa 100644
--- a/interface/js/app/upload.js
+++ b/interface/js/app/upload.js
@@ -259,6 +259,24 @@ define(["jquery", "app/common", "app/libft"],
             return false;
         });
 
+        function fileInputHandler(obj) {
+            ({files} = obj);
+            filesIdx = 0;
+
+            if (files.length === 1) {
+                setFileInputFiles(0);
+                enable_disable_scan_btn();
+                readFile((result) => {
+                    $("#scanMsgSource").val(result);
+                    enable_disable_scan_btn();
+                });
+            // eslint-disable-next-line no-alert
+            } else if (files.length < 10 || confirm("Are you sure you want to scan " + files.length + " files?")) {
+                getScanTextHeaders();
+                readFile((result) => scanText(result));
+            }
+        }
+
         const dragoverClassList = "outline-dashed-primary bg-primary-subtle";
         $("#scanMsgSource")
             .on("dragenter dragover dragleave drop", (e) => {
@@ -271,23 +289,9 @@ define(["jquery", "app/common", "app/libft"],
             .on("dragleave drop", () => {
                 $("#scanMsgSource").removeClass(dragoverClassList);
             })
-            .on("drop", (e) => {
-                ({files} = e.originalEvent.dataTransfer);
-                filesIdx = 0;
+            .on("drop", (e) => fileInputHandler(e.originalEvent.dataTransfer));
 
-                if (files.length === 1) {
-                    setFileInputFiles(0);
-                    enable_disable_scan_btn();
-                    readFile((result) => {
-                        $("#scanMsgSource").val(result);
-                        enable_disable_scan_btn();
-                    });
-                // eslint-disable-next-line no-alert
-                } else if (files.length < 10 || confirm("Are you sure you want to scan " + files.length + " files?")) {
-                    getScanTextHeaders();
-                    readFile((result) => scanText(result));
-                }
-            });
+        $("#formFile").on("change", (e) => fileInputHandler(e.target));
 
         return ui;
     });