invalid event listener is added to file input

This commit is contained in:
saikumarjetti 2025-03-18 00:41:48 +05:30
parent 3ec2817485
commit 5938e18e2e
2 changed files with 17 additions and 10 deletions

View File

@ -36,6 +36,7 @@ function setupFileInput(chooser) {
const inputContainerId = chooser.getAttribute('data-bs-element-container-id'); const inputContainerId = chooser.getAttribute('data-bs-element-container-id');
let inputContainer = document.getElementById(inputContainerId); let inputContainer = document.getElementById(inputContainerId);
let fileInput = document.getElementById(elementId);
if (inputContainer.id === 'pdf-upload-input-container') { if (inputContainer.id === 'pdf-upload-input-container') {
inputContainer.querySelector('#dragAndDrop').innerHTML = window.fileInput.dragAndDropPDF; inputContainer.querySelector('#dragAndDrop').innerHTML = window.fileInput.dragAndDropPDF;
@ -51,6 +52,12 @@ function setupFileInput(chooser) {
inputBtn.click(); 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 () { const dragenterListener = function () {
dragCounter++; dragCounter++;
if (!overlay) { if (!overlay) {
@ -149,7 +156,7 @@ function setupFileInput(chooser) {
}); });
await Promise.all(promises); await Promise.all(promises);
} }
const originalText = inputContainer.querySelector('#fileInputText').innerHTML; const originalText = inputContainer.querySelector('#fileInputText').innerHTML;
const decryptFile = new DecryptFile(); const decryptFile = new DecryptFile();
@ -170,7 +177,7 @@ function setupFileInput(chooser) {
} }
decryptedFile.uniqueId = UUID.uuidv4(); decryptedFile.uniqueId = UUID.uuidv4();
return decryptedFile; return decryptedFile;
} catch (error) { } catch (error) {
console.error(`Error decrypting file: ${file.name}`, error); console.error(`Error decrypting file: ${file.name}`, error);
if (!file.uniqueId) file.uniqueId = UUID.uuidv4(); if (!file.uniqueId) file.uniqueId = UUID.uuidv4();
@ -200,9 +207,9 @@ function setupFileInput(chooser) {
var counter = 0; var counter = 0;
// do an overall count, then proceed to make the pdf files // do an overall count, then proceed to make the pdf files
await jszip.loadAsync(zipFile) await jszip.loadAsync(zipFile)
.then(function (zip) { .then(function (zip) {
zip.forEach(function (relativePath, zipEntry) { zip.forEach(function (relativePath, zipEntry) {
counter+=1; counter+=1;
}) })
@ -224,23 +231,23 @@ function setupFileInput(chooser) {
if (content.size > 0) { if (content.size > 0) {
const extension = zipEntry.name.split('.').pop().toLowerCase(); const extension = zipEntry.name.split('.').pop().toLowerCase();
const mimeType = mimeTypes[extension]; const mimeType = mimeTypes[extension];
// Check for file extension // Check for file extension
if (mimeType && (mimeType.startsWith(acceptedFileType.split('/')[0]) || acceptedFileType === mimeType)) { if (mimeType && (mimeType.startsWith(acceptedFileType.split('/')[0]) || acceptedFileType === mimeType)) {
var file = new File([content], zipEntry.name, { type: mimeType }); var file = new File([content], zipEntry.name, { type: mimeType });
file.uniqueId = UUID.uuidv4(); file.uniqueId = UUID.uuidv4();
allFiles.push(file); allFiles.push(file);
} else { } else {
console.log(`File ${zipEntry.name} skipped. MIME type (${mimeType}) does not match accepted type (${acceptedFileType})`); console.log(`File ${zipEntry.name} skipped. MIME type (${mimeType}) does not match accepted type (${acceptedFileType})`);
} }
} }
}); });
extractionPromises.push(promise); extractionPromises.push(promise);
}); });
return Promise.all(extractionPromises); return Promise.all(extractionPromises);
}) })
.catch(function (err) { .catch(function (err) {
@ -248,7 +255,7 @@ function setupFileInput(chooser) {
throw err; throw err;
}); });
} }
function handleFileInputChange(inputElement) { function handleFileInputChange(inputElement) {
const files = allFiles; const files = allFiles;

View File

@ -232,7 +232,7 @@
th:name="${name}+'-input'" th:id="${name}+'-input-container'" th:data-text="#{fileChooser.hoveredDragAndDrop}"> th:name="${name}+'-input'" th:id="${name}+'-input-container'" th:data-text="#{fileChooser.hoveredDragAndDrop}">
<label class="file-input-btn d-none"> <label class="file-input-btn d-none">
<input type="file" class="form-control" th:name="${name}" th:id="${name}+'-input'" th:accept="${accept} + ',.zip'" <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 Browse
</label> </label>
<div class="d-flex justify-content-start align-items-center" id="fileInputText"> <div class="d-flex justify-content-start align-items-center" id="fileInputText">