From e9f80d03ea38eebb3c3a3a2f5cafbd12f05df137 Mon Sep 17 00:00:00 2001
From: Reece Browne <reecebrowne1995@gmail.com>
Date: Wed, 18 Dec 2024 00:16:01 +0000
Subject: [PATCH] Fix missing info in form data

---
 src/main/resources/static/js/downloader.js    |  5 ++-
 .../static/js/pages/adjust-contrast.js        |  2 +-
 .../templates/convert/img-to-pdf.html         | 45 ++++++++++++++++---
 3 files changed, 44 insertions(+), 8 deletions(-)

diff --git a/src/main/resources/static/js/downloader.js b/src/main/resources/static/js/downloader.js
index 57ae8c47b..e2a0364b7 100644
--- a/src/main/resources/static/js/downloader.js
+++ b/src/main/resources/static/js/downloader.js
@@ -412,8 +412,9 @@
       const promises = chunk.map(async (file) => {
         let fileFormData = new FormData();
         fileFormData.append('fileInput', file);
-        console.log(fileFormData);
-        // Add other form data
+        for (let [key, value] of fileFormData.entries()) {
+          console.log(key, value);
+        } // Add other form data
         for (let pair of formData.entries()) {
           fileFormData.append(pair[0], pair[1]);
           console.log(pair[0] + ', ' + pair[1]);
diff --git a/src/main/resources/static/js/pages/adjust-contrast.js b/src/main/resources/static/js/pages/adjust-contrast.js
index 792c06669..a9692d2bc 100644
--- a/src/main/resources/static/js/pages/adjust-contrast.js
+++ b/src/main/resources/static/js/pages/adjust-contrast.js
@@ -222,7 +222,7 @@ async function downloadPDF() {
 
 // Event listeners
 document.getElementById('fileInput-input').addEventListener('change', function (e) {
-  const fileInput = event.target;
+  const fileInput = e.target;
   fileInput.addEventListener('file-input-change', async (e) => {
     const {allFiles} = e.detail;
     if (allFiles && allFiles.length > 0) {
diff --git a/src/main/resources/templates/convert/img-to-pdf.html b/src/main/resources/templates/convert/img-to-pdf.html
index 758e83289..fa0fc74f2 100644
--- a/src/main/resources/templates/convert/img-to-pdf.html
+++ b/src/main/resources/templates/convert/img-to-pdf.html
@@ -17,7 +17,7 @@
                 <span class="material-symbols-rounded tool-header-icon image">image</span>
                 <span class="tool-header-text" th:text="#{imageToPDF.header}"></span>
               </div>
-              <form method="post" enctype="multipart/form-data" th:action="@{'/api/v1/convert/img/pdf'}">
+              <form  id="imageToPDFForm" method="post" enctype="multipart/form-data" th:action="@{'/api/v1/convert/img/pdf'}">
                 <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multipleInputsForSingleRequest=false, accept='image/*', inputText=#{imgPrompt})}"></div>
                 <div class="mb-3">
                   <label for="fitOption" th:text="#{imageToPDF.selectLabel}">Fit Options</label>
@@ -51,15 +51,18 @@
                 <br>
                 <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{imageToPDF.submit}"></button>
                 <script>
-                  $('#fileInput-input').on('change', function() {
-                    var files = document.getElementById("fileInput-input").files;
+                  $('#fileInput-input').on('change', function(e) {
+                    const fileInput = e.target;
+                    fileInput.addEventListener('file-input-change', async (e) => {
+                    const {allFiles} = e.detail;
                     var conversionType = document.getElementById("conversionType");
-                    console.log("files.length=" + files.length)
-                    if (files.length > 1) {
+                    console.log("files.length=" + allFiles.length)
+                    if (allFiles.length > 1) {
                       conversionType.disabled = false;
                     } else {
                       conversionType.disabled = true;
                     }
+                    });
                   });
 
                   $('#conversionType').change(function() {
@@ -72,6 +75,38 @@
                       override.value = "multi";
                     }
                   });
+                  document.getElementById("imageToPDFForm").addEventListener("submit", async function (e) {
+    e.preventDefault();
+
+    const form = e.target;
+    const formData = new FormData(form);
+
+    const fitOptionSelect = document.getElementById("fitOption");
+    const fitOptionValue = fitOptionSelect ? fitOptionSelect.value : "fit-to-page"; // Default value
+    formData.append("fitOption", fitOptionValue);
+
+    const overrideInput = document.getElementById("override");
+    console.log("Override value before submission:", overrideInput.value);
+
+    for (let [key, value] of formData.entries()) {
+        console.log(`${key}:`, value);
+    }
+
+    try {
+        const response = await fetch(form.action, {
+            method: "POST",
+            body: formData
+        });
+
+        if (response.ok) {
+            console.log("Form successfully submitted");
+        } else {
+            console.error("Failed to submit the form");
+        }
+    } catch (error) {
+        console.error("Error submitting the form:", error);
+    }
+});
                 </script>
               </form>
             </div>