Merge pull request #2493 from reecebrowne/bug/2490/2488/image-to-pdf

Img to pdf bug fixes

src/main/java/stirling/software/SPDF/controller/api/converters/ConvertImgPDFController.java

@@ -208,7 +208,13 @@ public class ConvertImgPDFController {
         String fitOption = request.getFitOption();
         String colorType = request.getColorType();
         boolean autoRotate = request.isAutoRotate();
-
+        // Handle Null entries for formdata
+        if (colorType == null || colorType.isBlank()) {
+            colorType = "color";
+        }
+        if (fitOption == null || fitOption.isEmpty()) {
+            fitOption = "fillPage";
+        }
         // Convert the file to PDF and get the resulting bytes
         byte[] bytes =
                 PdfUtils.imageToPdf(file, fitOption, autoRotate, colorType, pdfDocumentFactory);

src/main/resources/static/js/downloader.js

@@ -415,8 +415,9 @@
       const promises = chunk.map(async (file) => {
         let fileFormData = new FormData();
         fileFormData.append('fileInput', file);
-        console.log(fileFormData);
+        for (let [key, value] of fileFormData.entries()) {
-        // Add other form data
+          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]);

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) {

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,11 +51,18 @@
                 <br>
                 <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{imageToPDF.submit}"></button>
                 <script>
-                    $('#fileInput-input').on('file-input-change', () => {
+                  $('#fileInput-input').on('change', function(e) {
-                    var files = document.getElementById("fileInput-input").files;
+                    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)
+                    console.log("files.length=" + allFiles.length)
-                    conversionType.disabled = files.length <= 1;
+                    if (allFiles.length > 1) {
+                      conversionType.disabled = false;
+                    } else {
+                      conversionType.disabled = true;
+                    }
+                    });
                   });
 
                   $('#conversionType').change(function() {
@@ -68,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>