From a1b7aaddb835a1ef7bf6637c3e6464582c381b0a Mon Sep 17 00:00:00 2001
From: Dimitrios Kaitantzidis <james_k23@hotmail.gr>
Date: Sun, 8 Oct 2023 18:59:43 +0300
Subject: [PATCH 1/9] Changes filename using js, but the old filename persists
 in download

---
 .../static/js/multitool/PdfContainer.js       | 14 +++++++++++
 src/main/resources/templates/multi-tool.html  | 24 ++++++++++++++++---
 2 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/src/main/resources/static/js/multitool/PdfContainer.js b/src/main/resources/static/js/multitool/PdfContainer.js
index 45c92be1..c82b6859 100644
--- a/src/main/resources/static/js/multitool/PdfContainer.js
+++ b/src/main/resources/static/js/multitool/PdfContainer.js
@@ -14,6 +14,7 @@ class PdfContainer {
         this.rotateElement = this.rotateElement.bind(this);
         this.rotateAll = this.rotateAll.bind(this);
         this.exportPdf = this.exportPdf.bind(this);
+        this.updateFilename = this.updateFilename.bind(this);
 
         this.pdfAdapters = pdfAdapters;
 
@@ -28,6 +29,9 @@ class PdfContainer {
         window.addPdfs = this.addPdfs;
         window.exportPdf = this.exportPdf;
         window.rotateAll = this.rotateAll;
+
+        const filenameInput = document.getElementById('filename-input');
+        filenameInput.onkeyup = this.updateFilename;
     }
 
     movePageTo(startElement, endElement, scrollTo = false) {
@@ -202,10 +206,20 @@ class PdfContainer {
             // Download the file
             const downloadLink = document.createElement('a');
             downloadLink.href = url;
+            console.log('filename before download ' + this.filename);
             downloadLink.download = this.fileName ? this.fileName : 'managed.pdf';
             downloadLink.click();
         }
     }
+
+    updateFilename() {
+       const filenameInput = document.getElementById('filename-input');
+        const filenameParagraph = document.getElementById('filename');
+
+        console.log('updatedFilename fired ' + filenameInput.value);
+        this.filename = filenameInput.value;
+        filenameParagraph.innerText = this.filename;
+    }
 }
 
 export default PdfContainer;
diff --git a/src/main/resources/templates/multi-tool.html b/src/main/resources/templates/multi-tool.html
index 0b1d7b8a..9e2da94f 100644
--- a/src/main/resources/templates/multi-tool.html
+++ b/src/main/resources/templates/multi-tool.html
@@ -20,15 +20,25 @@
             <div class="container">
                 <div class="row justify-content-center">
                     <div class="col-md-6" style="text-align: center">
+                        <div id="global-buttons-container" class="d-flex align-content-center justify-content-center">
+                            <div class="form-group">
+                                <label for="filename-input">Filename</label>
+                                <input type="text" class="form-control" id="filename-input" placeholder="filename" onkeyup="(e) => updateFilename(e)">
+                            </div>
+                            <div class="form-group">
+                                <p>Final name of file: </p><p id="filename"></p>
+                            </div>
+                        </div>
                         <div id="global-buttons-container">
-                            
+
                             <button class="btn btn-primary" onclick="addPdfs()">
                                 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-file-earmark-plus" viewBox="0 0 16 16">
                                     <path d="M8 6.5a.5.5 0 0 1 .5.5v1.5H10a.5.5 0 0 1 0 1H8.5V11a.5.5 0 0 1-1 0V9.5H6a.5.5 0 0 1 0-1h1.5V7a.5.5 0 0 1 .5-.5z"/>
                                     <path d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z"/>
                                 </svg>
                             </button>
-                            
+
+
                             <button class="btn btn-secondary enable-on-file" onclick="rotateAll(-90)" disabled>
                                 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-counterclockwise" viewBox="0 0 16 16">
                                     <path fill-rule="evenodd" d="M8 3a5 5 0 1 1-4.546 2.914.5.5 0 0 0-.908-.417A6 6 0 1 0 8 2v1z" />
@@ -58,7 +68,7 @@
         <div th:insert="~{fragments/footer.html :: footer}"></div>
     </div>
     <div id="drag-container"></div>
-    
+
     <script type="module">
         import PdfContainer from './js/multitool/PdfContainer.js';
         import DragDropManager from "./js/multitool/DragDropManager.js";
@@ -114,6 +124,14 @@
         #global-buttons-container > * {
             padding: 0.6rem 0.75rem;
         }
+        #global-buttons-container input {
+            background-color: #323948;
+            caret-color: #ffffff;
+            color: #ffffff;
+        }
+        #global-buttons-container input::placeholder {
+            color: #ffffff;
+        }
         #global-buttons-container svg {
             width: 20px;
             height: 20px;

From 323745e61fb860cfd332716bc27927b9057fd718 Mon Sep 17 00:00:00 2001
From: Dimitrios Kaitantzidis <james_k23@hotmail.gr>
Date: Sun, 8 Oct 2023 19:57:19 +0300
Subject: [PATCH 2/9] Change in name works.

---
 .../static/js/multitool/PdfContainer.js       | 25 +++++++++++++++----
 1 file changed, 20 insertions(+), 5 deletions(-)

diff --git a/src/main/resources/static/js/multitool/PdfContainer.js b/src/main/resources/static/js/multitool/PdfContainer.js
index c82b6859..4a871efb 100644
--- a/src/main/resources/static/js/multitool/PdfContainer.js
+++ b/src/main/resources/static/js/multitool/PdfContainer.js
@@ -3,11 +3,13 @@ class PdfContainer {
     pagesContainer;
     pagesContainerWrapper;
     pdfAdapters;
+    downloadLink;
 
     constructor(id, wrapperId, pdfAdapters) {
         this.fileName = null;
         this.pagesContainer = document.getElementById(id)
         this.pagesContainerWrapper = document.getElementById(wrapperId);
+        this.downloadLink = null;
         this.movePageTo = this.movePageTo.bind(this);
         this.addPdfs = this.addPdfs.bind(this);
         this.addPdfsFromFiles = this.addPdfsFromFiles.bind(this);
@@ -15,6 +17,7 @@ class PdfContainer {
         this.rotateAll = this.rotateAll.bind(this);
         this.exportPdf = this.exportPdf.bind(this);
         this.updateFilename = this.updateFilename.bind(this);
+        this.setDownloadAttribute = this.setDownloadAttribute.bind(this);
 
         this.pdfAdapters = pdfAdapters;
 
@@ -204,14 +207,26 @@ class PdfContainer {
             window.open(url, '_blank');
         } else {
             // Download the file
-            const downloadLink = document.createElement('a');
-            downloadLink.href = url;
-            console.log('filename before download ' + this.filename);
-            downloadLink.download = this.fileName ? this.fileName : 'managed.pdf';
-            downloadLink.click();
+            this.downloadLink = document.createElement('a');
+            this.downloadLink.id = 'download-link';
+            this.downloadLink.href = url;
+            console.log('downloadLink.href ' + this.downloadLink.href);
+            // downloadLink.download = this.fileName ? this.fileName : 'managed.pdf';
+            // downloadLink.download = this.fileName;
+            this.downloadLink.setAttribute('download', this.filename ? this.fileName : 'managed.pdf');
+            this.downloadLink.setAttribute('target', '_blank');
+            this.downloadLink.onclick = this.setDownloadAttribute;
+            console.log('downloadLink download ' + this.downloadLink.download);
+            this.downloadLink.click();
         }
     }
 
+    setDownloadAttribute() {
+        console.log('inside setDownloadAttribute ' + this.filename);
+        this.downloadLink.setAttribute("download", this.filename);
+        console.log('downloadLink download 2 ' + a.download);
+    }
+
     updateFilename() {
        const filenameInput = document.getElementById('filename-input');
         const filenameParagraph = document.getElementById('filename');

From 74da8c340df8ae3a35d6f16b57bde0e988056596 Mon Sep 17 00:00:00 2001
From: Dimitrios Kaitantzidis <james_k23@hotmail.gr>
Date: Tue, 10 Oct 2023 20:24:11 +0300
Subject: [PATCH 3/9] Adds support for disabled filename input if not pdf is
 loaded. Need to disable the input if all pages are deleted.

---
 src/main/resources/static/js/multitool/PdfContainer.js | 6 +++++-
 src/main/resources/templates/multi-tool.html           | 4 ++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/main/resources/static/js/multitool/PdfContainer.js b/src/main/resources/static/js/multitool/PdfContainer.js
index 4a871efb..f7ffec36 100644
--- a/src/main/resources/static/js/multitool/PdfContainer.js
+++ b/src/main/resources/static/js/multitool/PdfContainer.js
@@ -35,6 +35,7 @@ class PdfContainer {
 
         const filenameInput = document.getElementById('filename-input');
         filenameInput.onkeyup = this.updateFilename;
+        filenameInput.disabled = true;
     }
 
     movePageTo(startElement, endElement, scrollTo = false) {
@@ -67,6 +68,10 @@ class PdfContainer {
         input.setAttribute("accept", "application/pdf");
         input.onchange = async(e) => {
             const files = e.target.files;
+            if (files.length > 0) {
+                const filenameInput = document.getElementById('filename-input');
+                filenameInput.disabled = false;
+            }
             this.addPdfsFromFiles(files, nextSiblingElement);
         }
 
@@ -224,7 +229,6 @@ class PdfContainer {
     setDownloadAttribute() {
         console.log('inside setDownloadAttribute ' + this.filename);
         this.downloadLink.setAttribute("download", this.filename);
-        console.log('downloadLink download 2 ' + a.download);
     }
 
     updateFilename() {
diff --git a/src/main/resources/templates/multi-tool.html b/src/main/resources/templates/multi-tool.html
index 9e2da94f..4266a795 100644
--- a/src/main/resources/templates/multi-tool.html
+++ b/src/main/resources/templates/multi-tool.html
@@ -132,6 +132,10 @@
         #global-buttons-container input::placeholder {
             color: #ffffff;
         }
+
+        #global-buttons-container input:disabled {
+            color: #3D3D3D !important;
+        }
         #global-buttons-container svg {
             width: 20px;
             height: 20px;

From 369ac99a165535d8c11c6e77b616eccd8e6ed7e4 Mon Sep 17 00:00:00 2001
From: Dimitrios Kaitantzidis <james_k23@hotmail.gr>
Date: Sat, 14 Oct 2023 00:03:08 +0300
Subject: [PATCH 4/9] Fixes issue.

---
 .idea/.gitignore                               |  8 ++++++++
 .../static/js/multitool/PdfActionsManager.js   | 11 +++++++++++
 .../static/js/multitool/PdfContainer.js        | 18 +++++++++++++++---
 src/main/resources/templates/multi-tool.html   | 16 +++++++++++++++-
 4 files changed, 49 insertions(+), 4 deletions(-)
 create mode 100644 .idea/.gitignore

diff --git a/.idea/.gitignore b/.idea/.gitignore
new file mode 100644
index 00000000..13566b81
--- /dev/null
+++ b/.idea/.gitignore
@@ -0,0 +1,8 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Editor-based HTTP Client requests
+/httpRequests/
+# Datasource local storage ignored files
+/dataSources/
+/dataSources.local.xml
diff --git a/src/main/resources/static/js/multitool/PdfActionsManager.js b/src/main/resources/static/js/multitool/PdfActionsManager.js
index 4bff39e3..3a4fd33d 100644
--- a/src/main/resources/static/js/multitool/PdfActionsManager.js
+++ b/src/main/resources/static/js/multitool/PdfActionsManager.js
@@ -55,6 +55,17 @@ class PdfActionsManager {
     deletePageButtonCallback(e) {
         var imgContainer = this.getPageContainer(e.target);
         this.pagesContainer.removeChild(imgContainer);
+        if (this.pagesContainer.childElementCount === 0) {
+            const filenameInput = document.getElementById('filename-input');
+            const filenameParagraph = document.getElementById('filename');
+            const downloadBtn = document.getElementById('export-button');
+
+            filenameInput.disabled = true;
+            filenameInput.value = "";
+            filenameParagraph.innerText = "";
+
+            downloadBtn.disabled = true;
+        }
     };
 
     insertFileButtonCallback(e) {
diff --git a/src/main/resources/static/js/multitool/PdfContainer.js b/src/main/resources/static/js/multitool/PdfContainer.js
index f7ffec36..570db8a5 100644
--- a/src/main/resources/static/js/multitool/PdfContainer.js
+++ b/src/main/resources/static/js/multitool/PdfContainer.js
@@ -34,8 +34,12 @@ class PdfContainer {
         window.rotateAll = this.rotateAll;
 
         const filenameInput = document.getElementById('filename-input');
+        const filenameParagraph = document.getElementById('filename');
+
         filenameInput.onkeyup = this.updateFilename;
         filenameInput.disabled = true;
+        filenameInput.innerText = "";
+        filenameParagraph.innerText = "";
     }
 
     movePageTo(startElement, endElement, scrollTo = false) {
@@ -70,8 +74,17 @@ class PdfContainer {
             const files = e.target.files;
             if (files.length > 0) {
                 const filenameInput = document.getElementById('filename-input');
+                const pagesContainer = document.getElementById('pages-container');
+                const downloadBtn = document.getElementById('export-button');
+
                 filenameInput.disabled = false;
+                downloadBtn.disabled = false;
+
+                if (pagesContainer.childElementCount === 0) {
+                    filenameInput.value = "";
+                }
             }
+
             this.addPdfsFromFiles(files, nextSiblingElement);
         }
 
@@ -228,16 +241,15 @@ class PdfContainer {
 
     setDownloadAttribute() {
         console.log('inside setDownloadAttribute ' + this.filename);
-        this.downloadLink.setAttribute("download", this.filename);
+        this.downloadLink.setAttribute("download", this.filename ? this.filename : 'managed.pdf');
     }
 
     updateFilename() {
        const filenameInput = document.getElementById('filename-input');
         const filenameParagraph = document.getElementById('filename');
 
-        console.log('updatedFilename fired ' + filenameInput.value);
         this.filename = filenameInput.value;
-        filenameParagraph.innerText = this.filename;
+        filenameParagraph.innerText = this.filename + ".pdf";
     }
 }
 
diff --git a/src/main/resources/templates/multi-tool.html b/src/main/resources/templates/multi-tool.html
index 4266a795..2df41c0a 100644
--- a/src/main/resources/templates/multi-tool.html
+++ b/src/main/resources/templates/multi-tool.html
@@ -23,7 +23,7 @@
                         <div id="global-buttons-container" class="d-flex align-content-center justify-content-center">
                             <div class="form-group">
                                 <label for="filename-input">Filename</label>
-                                <input type="text" class="form-control" id="filename-input" placeholder="filename" onkeyup="(e) => updateFilename(e)">
+                                <input type="text" class="form-control" id="filename-input" placeholder="filename" onkeyup="updateFilename()">
                             </div>
                             <div class="form-group">
                                 <p>Final name of file: </p><p id="filename"></p>
@@ -136,6 +136,20 @@
         #global-buttons-container input:disabled {
             color: #3D3D3D !important;
         }
+
+        #global-buttons-container input:disabled::-webkit-input-placeholder { /* WebKit browsers */
+            color:    #6E6865;
+        }
+        #global-buttons-container input:disabled:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
+            color:    #6E6865;
+        }
+        #global-buttons-container input:disabled::-moz-placeholder { /* Mozilla Firefox 19+ */
+            color:    #6E6865;
+        }
+        #global-buttons-container input:disabled:-ms-input-placeholder { /* Internet Explorer 10+ */
+            color:    #6E6865;
+        }
+
         #global-buttons-container svg {
             width: 20px;
             height: 20px;

From e519840bd67c0962ae5c1356758eaf701ff474be Mon Sep 17 00:00:00 2001
From: Dimitrios Kaitantzidis <james_k23@hotmail.gr>
Date: Sat, 14 Oct 2023 00:37:52 +0300
Subject: [PATCH 5/9] Fixes issue with light theme support.

---
 src/main/resources/static/css/dark-mode.css   | 23 +++++++++++++++++
 src/main/resources/static/css/light-mode.css  | 21 +++++++++++++++-
 .../static/js/multitool/PdfContainer.js       | 15 ++++++++---
 src/main/resources/templates/multi-tool.html  | 25 -------------------
 4 files changed, 54 insertions(+), 30 deletions(-)

diff --git a/src/main/resources/static/css/dark-mode.css b/src/main/resources/static/css/dark-mode.css
index cf2e028d..82e01676 100644
--- a/src/main/resources/static/css/dark-mode.css
+++ b/src/main/resources/static/css/dark-mode.css
@@ -91,3 +91,26 @@ hr {
     border-color: rgba(255, 255, 255, 0.6); /* semi-transparent white */
     background-color: rgba(255, 255, 255, 0.6); /* for some browsers that might use background instead of border for <hr> */
 }
+
+#global-buttons-container input {
+    background-color: #323948;
+    caret-color: #ffffff;
+    color: #ffffff;
+}
+#global-buttons-container input::placeholder {
+    color: #ffffff;
+}
+
+#global-buttons-container input:disabled::-webkit-input-placeholder { /* WebKit browsers */
+    color:    #6E6865;
+}
+#global-buttons-container input:disabled:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
+    color:    #6E6865;
+}
+#global-buttons-container input:disabled::-moz-placeholder { /* Mozilla Firefox 19+ */
+    color:    #6E6865;
+}
+#global-buttons-container input:disabled:-ms-input-placeholder { /* Internet Explorer 10+ */
+    color:    #6E6865;
+}
+
diff --git a/src/main/resources/static/css/light-mode.css b/src/main/resources/static/css/light-mode.css
index b696c036..08efbf4c 100644
--- a/src/main/resources/static/css/light-mode.css
+++ b/src/main/resources/static/css/light-mode.css
@@ -2,4 +2,23 @@
 body {
     --body-background-color: 255, 255, 255;
     --base-font-color: 33, 37, 41;
-}
\ No newline at end of file
+}
+
+
+#global-buttons-container input {
+    background-color: #ffffff;
+    /*caret-color: #ffffff;*/
+    /*color: #ffffff;*/
+}
+/*#global-buttons-container input:disabled::-webkit-input-placeholder { !* WebKit browsers *!*/
+/*    color:    #98A0AB;*/
+/*}*/
+/*#global-buttons-container input:disabled:-moz-placeholder { !* Mozilla Firefox 4 to 18 *!*/
+/*    color:    #98A0AB;*/
+/*}*/
+/*#global-buttons-container input:disabled::-moz-placeholder { !* Mozilla Firefox 19+ *!*/
+/*    color:    #98A0AB;*/
+/*}*/
+/*#global-buttons-container input:disabled:-ms-input-placeholder { !* Internet Explorer 10+ *!*/
+/*    color:    #98A0AB;*/
+/*}*/
diff --git a/src/main/resources/static/js/multitool/PdfContainer.js b/src/main/resources/static/js/multitool/PdfContainer.js
index 570db8a5..f8eb36e6 100644
--- a/src/main/resources/static/js/multitool/PdfContainer.js
+++ b/src/main/resources/static/js/multitool/PdfContainer.js
@@ -35,11 +35,13 @@ class PdfContainer {
 
         const filenameInput = document.getElementById('filename-input');
         const filenameParagraph = document.getElementById('filename');
+        const downloadBtn = document.getElementById('export-button');
 
         filenameInput.onkeyup = this.updateFilename;
         filenameInput.disabled = true;
         filenameInput.innerText = "";
         filenameParagraph.innerText = "";
+        downloadBtn.disabled = true;
     }
 
     movePageTo(startElement, endElement, scrollTo = false) {
@@ -78,10 +80,10 @@ class PdfContainer {
                 const downloadBtn = document.getElementById('export-button');
 
                 filenameInput.disabled = false;
-                downloadBtn.disabled = false;
 
                 if (pagesContainer.childElementCount === 0) {
                     filenameInput.value = "";
+                    downloadBtn.disabled = true;
                 }
             }
 
@@ -228,26 +230,31 @@ class PdfContainer {
             this.downloadLink = document.createElement('a');
             this.downloadLink.id = 'download-link';
             this.downloadLink.href = url;
-            console.log('downloadLink.href ' + this.downloadLink.href);
             // downloadLink.download = this.fileName ? this.fileName : 'managed.pdf';
             // downloadLink.download = this.fileName;
             this.downloadLink.setAttribute('download', this.filename ? this.fileName : 'managed.pdf');
             this.downloadLink.setAttribute('target', '_blank');
             this.downloadLink.onclick = this.setDownloadAttribute;
-            console.log('downloadLink download ' + this.downloadLink.download);
             this.downloadLink.click();
         }
     }
 
     setDownloadAttribute() {
-        console.log('inside setDownloadAttribute ' + this.filename);
         this.downloadLink.setAttribute("download", this.filename ? this.filename : 'managed.pdf');
     }
 
     updateFilename() {
        const filenameInput = document.getElementById('filename-input');
         const filenameParagraph = document.getElementById('filename');
+        const downloadBtn = document.getElementById('export-button');
 
+        if (filenameInput.value === "") {
+            filenameParagraph.innerText = "";
+            downloadBtn.disabled = true;
+            return;
+        }
+
+        downloadBtn.disabled = false;
         this.filename = filenameInput.value;
         filenameParagraph.innerText = this.filename + ".pdf";
     }
diff --git a/src/main/resources/templates/multi-tool.html b/src/main/resources/templates/multi-tool.html
index 2df41c0a..4e1276de 100644
--- a/src/main/resources/templates/multi-tool.html
+++ b/src/main/resources/templates/multi-tool.html
@@ -124,31 +124,6 @@
         #global-buttons-container > * {
             padding: 0.6rem 0.75rem;
         }
-        #global-buttons-container input {
-            background-color: #323948;
-            caret-color: #ffffff;
-            color: #ffffff;
-        }
-        #global-buttons-container input::placeholder {
-            color: #ffffff;
-        }
-
-        #global-buttons-container input:disabled {
-            color: #3D3D3D !important;
-        }
-
-        #global-buttons-container input:disabled::-webkit-input-placeholder { /* WebKit browsers */
-            color:    #6E6865;
-        }
-        #global-buttons-container input:disabled:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
-            color:    #6E6865;
-        }
-        #global-buttons-container input:disabled::-moz-placeholder { /* Mozilla Firefox 19+ */
-            color:    #6E6865;
-        }
-        #global-buttons-container input:disabled:-ms-input-placeholder { /* Internet Explorer 10+ */
-            color:    #6E6865;
-        }
 
         #global-buttons-container svg {
             width: 20px;

From 53a0291cc2e969519622d9786b502dc61e6f774b Mon Sep 17 00:00:00 2001
From: Dimitrios Kaitantzidis <james_k23@hotmail.gr>
Date: Sun, 15 Oct 2023 16:49:12 +0300
Subject: [PATCH 6/9] Adds requested changes

---
 .../static/js/multitool/PdfContainer.js       | 21 ++++++++++++++-----
 src/main/resources/templates/multi-tool.html  |  5 +----
 2 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/main/resources/static/js/multitool/PdfContainer.js b/src/main/resources/static/js/multitool/PdfContainer.js
index f8eb36e6..f51bfade 100644
--- a/src/main/resources/static/js/multitool/PdfContainer.js
+++ b/src/main/resources/static/js/multitool/PdfContainer.js
@@ -6,7 +6,6 @@ class PdfContainer {
     downloadLink;
 
     constructor(id, wrapperId, pdfAdapters) {
-        this.fileName = null;
         this.pagesContainer = document.getElementById(id)
         this.pagesContainerWrapper = document.getElementById(wrapperId);
         this.downloadLink = null;
@@ -34,13 +33,11 @@ class PdfContainer {
         window.rotateAll = this.rotateAll;
 
         const filenameInput = document.getElementById('filename-input');
-        const filenameParagraph = document.getElementById('filename');
         const downloadBtn = document.getElementById('export-button');
 
         filenameInput.onkeyup = this.updateFilename;
         filenameInput.disabled = true;
         filenameInput.innerText = "";
-        filenameParagraph.innerText = "";
         downloadBtn.disabled = true;
     }
 
@@ -83,8 +80,18 @@ class PdfContainer {
 
                 if (pagesContainer.childElementCount === 0) {
                     filenameInput.value = "";
+                    this.filename = null;
                     downloadBtn.disabled = true;
+                } else {
+                    this.filename = filenameInput.value;
                 }
+
+                if (this.filename === null || this.filename === undefined) {
+                    filenameInput.value = files[0].name;
+                } else {
+                    filenameInput.value = this.filename;
+                }
+
             }
 
             this.addPdfsFromFiles(files, nextSiblingElement);
@@ -219,6 +226,12 @@ class PdfContainer {
         const url = URL.createObjectURL(pdfBlob);
         const downloadOption = localStorage.getItem('downloadOption');
 
+        const filenameInput = document.getElementById('filename-input');
+
+        if (!filenameInput.value.includes('.pdf')) {
+            filenameInput.value = filenameInput.value + '.pdf';
+        }
+
         if (downloadOption === 'sameWindow') {
             // Open the file in the same window
             window.location.href = url;
@@ -245,11 +258,9 @@ class PdfContainer {
 
     updateFilename() {
        const filenameInput = document.getElementById('filename-input');
-        const filenameParagraph = document.getElementById('filename');
         const downloadBtn = document.getElementById('export-button');
 
         if (filenameInput.value === "") {
-            filenameParagraph.innerText = "";
             downloadBtn.disabled = true;
             return;
         }
diff --git a/src/main/resources/templates/multi-tool.html b/src/main/resources/templates/multi-tool.html
index 4e1276de..4994c078 100644
--- a/src/main/resources/templates/multi-tool.html
+++ b/src/main/resources/templates/multi-tool.html
@@ -23,10 +23,7 @@
                         <div id="global-buttons-container" class="d-flex align-content-center justify-content-center">
                             <div class="form-group">
                                 <label for="filename-input">Filename</label>
-                                <input type="text" class="form-control" id="filename-input" placeholder="filename" onkeyup="updateFilename()">
-                            </div>
-                            <div class="form-group">
-                                <p>Final name of file: </p><p id="filename"></p>
+                                <input type="text" class="form-control" id="filename-input" placeholder="filename" >
                             </div>
                         </div>
                         <div id="global-buttons-container">

From d0ce7db9eebc550816a5020e79b3a39df10d1c5c Mon Sep 17 00:00:00 2001
From: Dimitrios Kaitantzidis <james_k23@hotmail.gr>
Date: Sun, 15 Oct 2023 18:35:39 +0300
Subject: [PATCH 7/9] Fixes bug with unfinished filename extension (file.p)

---
 src/main/resources/static/js/multitool/PdfContainer.js | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/main/resources/static/js/multitool/PdfContainer.js b/src/main/resources/static/js/multitool/PdfContainer.js
index f51bfade..5ec366ca 100644
--- a/src/main/resources/static/js/multitool/PdfContainer.js
+++ b/src/main/resources/static/js/multitool/PdfContainer.js
@@ -228,8 +228,16 @@ class PdfContainer {
 
         const filenameInput = document.getElementById('filename-input');
 
+        let inputArr = filenameInput.value.split('.');
+
+        if (inputArr !== null && inputArr !== undefined && inputArr.length > 0) {
+            filenameInput.value = inputArr[0];
+            this.filename = filenameInput.value;
+        }
+
         if (!filenameInput.value.includes('.pdf')) {
             filenameInput.value = filenameInput.value + '.pdf';
+            this.filename = filenameInput.value;
         }
 
         if (downloadOption === 'sameWindow') {

From 49f1f4e7c76e8154607975d505e995cb9dd15ee6 Mon Sep 17 00:00:00 2001
From: Dimitrios Kaitantzidis <james_k23@hotmail.gr>
Date: Sun, 15 Oct 2023 19:03:10 +0300
Subject: [PATCH 8/9] Fixes bug with unfinished filename extension (multiple
 dots problem)

---
 .../static/js/multitool/PdfContainer.js       | 23 +++++++++++++++++--
 src/main/resources/templates/multi-tool.html  |  2 +-
 2 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/main/resources/static/js/multitool/PdfContainer.js b/src/main/resources/static/js/multitool/PdfContainer.js
index 5ec366ca..907e099a 100644
--- a/src/main/resources/static/js/multitool/PdfContainer.js
+++ b/src/main/resources/static/js/multitool/PdfContainer.js
@@ -17,6 +17,7 @@ class PdfContainer {
         this.exportPdf = this.exportPdf.bind(this);
         this.updateFilename = this.updateFilename.bind(this);
         this.setDownloadAttribute = this.setDownloadAttribute.bind(this);
+        this.preventIllegalChars = this.preventIllegalChars.bind(this);
 
         this.pdfAdapters = pdfAdapters;
 
@@ -36,6 +37,7 @@ class PdfContainer {
         const downloadBtn = document.getElementById('export-button');
 
         filenameInput.onkeyup = this.updateFilename;
+        filenameInput.onkeydown = this.preventIllegalChars;
         filenameInput.disabled = true;
         filenameInput.innerText = "";
         downloadBtn.disabled = true;
@@ -231,7 +233,14 @@ class PdfContainer {
         let inputArr = filenameInput.value.split('.');
 
         if (inputArr !== null && inputArr !== undefined && inputArr.length > 0) {
-            filenameInput.value = inputArr[0];
+
+            inputArr = inputArr.filter(n => n); // remove all empty strings, nulls or undefined
+
+            if (inputArr.length > 1) {
+                inputArr.pop(); // remove right part after last dot
+            }
+
+            filenameInput.value = inputArr.join();
             this.filename = filenameInput.value;
         }
 
@@ -275,7 +284,17 @@ class PdfContainer {
 
         downloadBtn.disabled = false;
         this.filename = filenameInput.value;
-        filenameParagraph.innerText = this.filename + ".pdf";
+    }
+
+    preventIllegalChars(e) {
+        // const filenameInput = document.getElementById('filename-input');
+        //
+        // filenameInput.value = filenameInput.value.replace('.pdf', '');
+        //
+        // // prevent .
+        // if (filenameInput.value.includes('.')) {
+        //     filenameInput.value.replace('.','');
+        // }
     }
 }
 
diff --git a/src/main/resources/templates/multi-tool.html b/src/main/resources/templates/multi-tool.html
index 4994c078..167d6849 100644
--- a/src/main/resources/templates/multi-tool.html
+++ b/src/main/resources/templates/multi-tool.html
@@ -23,7 +23,7 @@
                         <div id="global-buttons-container" class="d-flex align-content-center justify-content-center">
                             <div class="form-group">
                                 <label for="filename-input">Filename</label>
-                                <input type="text" class="form-control" id="filename-input" placeholder="filename" >
+                                <input type="text" class="form-control" id="filename-input" placeholder="filename">
                             </div>
                         </div>
                         <div id="global-buttons-container">

From 89345c8d601545f6c7d4b607a7311f41fe975db1 Mon Sep 17 00:00:00 2001
From: Dimitrios Kaitantzidis <james_k23@hotmail.gr>
Date: Sun, 15 Oct 2023 19:10:30 +0300
Subject: [PATCH 9/9] Removes commas in multiple dots with text.

---
 src/main/resources/static/js/multitool/PdfContainer.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/main/resources/static/js/multitool/PdfContainer.js b/src/main/resources/static/js/multitool/PdfContainer.js
index 907e099a..4c7c8497 100644
--- a/src/main/resources/static/js/multitool/PdfContainer.js
+++ b/src/main/resources/static/js/multitool/PdfContainer.js
@@ -240,7 +240,7 @@ class PdfContainer {
                 inputArr.pop(); // remove right part after last dot
             }
 
-            filenameInput.value = inputArr.join();
+            filenameInput.value = inputArr.join('');
             this.filename = filenameInput.value;
         }