Changes filename using js, but the old filename persists in download

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;

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;