From 7ba00676888cb1c518efb668b01a51ce387a1185 Mon Sep 17 00:00:00 2001
From: ge64qev <ge64qev@mytum.de>
Date: Mon, 6 May 2024 11:18:59 +0200
Subject: [PATCH] Made it possible to add files via the selector "File by
 File".

---
 src/main/resources/static/js/fileInput.js | 24 +++++++++++++++++------
 src/main/resources/static/js/merge.js     |  2 +-
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/src/main/resources/static/js/fileInput.js b/src/main/resources/static/js/fileInput.js
index 001c8f24..d575dbaa 100644
--- a/src/main/resources/static/js/fileInput.js
+++ b/src/main/resources/static/js/fileInput.js
@@ -47,12 +47,11 @@ function setupFileInput(chooser) {
     const dt = e.dataTransfer;
     const files = dt.files;
 
-    for (let i = 0; i < files.length; i++) {
-      allFiles.push(files[i]);
-    }
-
+    //Do not Update allFiles array here to prevent duplication, the change event listener will take care of that
     const dataTransfer = new DataTransfer();
-    allFiles.forEach((file) => dataTransfer.items.add(file));
+    for (let i = 0; i < files.length; i++) {
+      dataTransfer.items.add(files[i]);
+    }
 
     const fileInput = document.getElementById(elementId);
     fileInput.files = dataTransfer.files;
@@ -81,8 +80,21 @@ function setupFileInput(chooser) {
   document.body.addEventListener("drop", dropListener);
 
   $("#" + elementId).on("change", function (e) {
-    allFiles = Array.from(e.target.files);
+    //Get newly Added Files
+    const newFiles = Array.from(e.target.files);
+
+    //Add Files to existing Files
+    allFiles = allFiles.concat(newFiles);
+
+    //Update the file inout`s files property
+    const dataTransfer = new DataTransfer();
+    allFiles.forEach((file) => dataTransfer.items.add(file));
+    e.target.files = dataTransfer.files;
+
     handleFileInputChange(this);
+
+    //Call the displayFiles function with the allFiles array
+    displayFiles(allFiles)
   });
 
   function handleFileInputChange(inputElement) {
diff --git a/src/main/resources/static/js/merge.js b/src/main/resources/static/js/merge.js
index 55575727..9c63c7b7 100644
--- a/src/main/resources/static/js/merge.js
+++ b/src/main/resources/static/js/merge.js
@@ -9,7 +9,7 @@ document.getElementById("fileInput-input").addEventListener("change", function (
 });
 
 /**
- * @param {FileList} files
+ * @param {File[]} files
  */
 function displayFiles(files) {
   const list = document.getElementById("selectedFiles");