From 5938e18e2e61dd7eaad413ff129cc8ebd8975c5e Mon Sep 17 00:00:00 2001
From: saikumarjetti <saikumar.jetti09@gmail.com>
Date: Tue, 18 Mar 2025 00:41:48 +0530
Subject: [PATCH] invalid event listener is added to file input

---
 src/main/resources/static/js/fileInput.js     | 25 ++++++++++++-------
 .../resources/templates/fragments/common.html |  2 +-
 2 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/src/main/resources/static/js/fileInput.js b/src/main/resources/static/js/fileInput.js
index 91ad372ce..85c407281 100644
--- a/src/main/resources/static/js/fileInput.js
+++ b/src/main/resources/static/js/fileInput.js
@@ -36,6 +36,7 @@ function setupFileInput(chooser) {
   const inputContainerId = chooser.getAttribute('data-bs-element-container-id');
 
   let inputContainer = document.getElementById(inputContainerId);
+  let fileInput = document.getElementById(elementId);
 
   if (inputContainer.id === 'pdf-upload-input-container') {
     inputContainer.querySelector('#dragAndDrop').innerHTML = window.fileInput.dragAndDropPDF;
@@ -51,6 +52,12 @@ function setupFileInput(chooser) {
     inputBtn.click();
   });
 
+  // Handle form validation if the input is left empty
+  fileInput.addEventListener("invalid", (e)=>{
+     e.preventDefault();
+    alert('Please select a PDF file before submitting.')
+  });
+
   const dragenterListener = function () {
     dragCounter++;
     if (!overlay) {
@@ -149,7 +156,7 @@ function setupFileInput(chooser) {
       });
 
       await Promise.all(promises);
-      
+
     }
     const originalText = inputContainer.querySelector('#fileInputText').innerHTML;
     const decryptFile = new DecryptFile();
@@ -170,7 +177,7 @@ function setupFileInput(chooser) {
           }
           decryptedFile.uniqueId = UUID.uuidv4();
           return decryptedFile;
-          
+
         } catch (error) {
           console.error(`Error decrypting file: ${file.name}`, error);
           if (!file.uniqueId) file.uniqueId = UUID.uuidv4();
@@ -200,9 +207,9 @@ function setupFileInput(chooser) {
     var counter = 0;
 
     // do an overall count, then proceed to make the pdf files
-    await jszip.loadAsync(zipFile)  
+    await jszip.loadAsync(zipFile)
       .then(function (zip) {
-        
+
           zip.forEach(function (relativePath, zipEntry) {
             counter+=1;
           })
@@ -224,23 +231,23 @@ function setupFileInput(chooser) {
             if (content.size > 0) {
               const extension = zipEntry.name.split('.').pop().toLowerCase();
               const mimeType = mimeTypes[extension];
-  
+
               // Check for file extension
               if (mimeType && (mimeType.startsWith(acceptedFileType.split('/')[0]) || acceptedFileType === mimeType)) {
 
                 var file = new File([content], zipEntry.name, { type: mimeType });
                 file.uniqueId = UUID.uuidv4();
                 allFiles.push(file);
-  
+
               } else {
                 console.log(`File ${zipEntry.name} skipped. MIME type (${mimeType}) does not match accepted type (${acceptedFileType})`);
               }
             }
           });
-  
+
           extractionPromises.push(promise);
         });
-  
+
         return Promise.all(extractionPromises);
       })
       .catch(function (err) {
@@ -248,7 +255,7 @@ function setupFileInput(chooser) {
         throw err;
       });
   }
-  
+
   function handleFileInputChange(inputElement) {
 
     const files = allFiles;
diff --git a/src/main/resources/templates/fragments/common.html b/src/main/resources/templates/fragments/common.html
index d1567833e..1e801d06f 100644
--- a/src/main/resources/templates/fragments/common.html
+++ b/src/main/resources/templates/fragments/common.html
@@ -232,7 +232,7 @@
       th:name="${name}+'-input'" th:id="${name}+'-input-container'" th:data-text="#{fileChooser.hoveredDragAndDrop}">
       <label class="file-input-btn d-none">
         <input type="file" class="form-control" th:name="${name}" th:id="${name}+'-input'" th:accept="${accept} + ',.zip'"
-          th:attr="multiple=${!disableMultipleFiles}" th:required="${notRequired} ? null : 'required'" oninvalid="alert('Please select a PDF file before submitting.');">
+          th:attr="multiple=${!disableMultipleFiles}" th:required="${notRequired} ? null : 'required'">
         Browse
       </label>
       <div class="d-flex justify-content-start align-items-center" id="fileInputText">