Validation for input file (#3196)

# Description of Changes

Please provide a summary of the changes, including:

- Added an invalid event listener for the input element, which will be
triggered if the input is empty and the element is required in the form.
This is a global change, where all pages using this component will have
this functionality.

Closes #1841

---

## Checklist

### General

- [x] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [x] I have read the [Stirling-PDF Developer
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/DeveloperGuide.md)
(if applicable)
- [x] I have read the [How to add new languages to
Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/HowToAddNewLanguage.md)
(if applicable)
- [x] I have performed a self-review of my own code
- [x] My changes generate no new warnings

### Documentation

- [x] I have updated relevant docs on [Stirling-PDF's doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
(if functionality has heavily changed)
- [x] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

### UI Changes (if applicable)

- [x] Screenshots or videos demonstrating the UI changes are attached
(e.g., as comments or direct attachments in the PR)

![image](https://github.com/user-attachments/assets/c53af9fa-b933-420f-9ee3-7b4600c44ea4)

![image](https://github.com/user-attachments/assets/8da04fa1-58be-42eb-977a-c850f917c011)

![image](https://github.com/user-attachments/assets/48dcce19-68c3-4676-a6d2-28b1b0e86004)

### Testing (if applicable)

- [x] I have tested my changes locally. Refer to the [Testing
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/DeveloperGuide.md#6-testing)
for more details.

---------

Co-authored-by: Anthony Stirling <77850077+Frooodle@users.noreply.github.com>

src/main/resources/messages_en_GB.properties

@@ -83,6 +83,7 @@ loading=Loading...
 addToDoc=Add to Document
 reset=Reset
 apply=Apply
+noFileSelected=No file selected. Please upload one.
 
 legal.privacy=Privacy Policy
 legal.terms=Terms and Conditions

src/main/resources/messages_en_US.properties

@@ -83,6 +83,7 @@ loading=Loading...
 addToDoc=Add to Document
 reset=Reset
 apply=Apply
+noFileSelected=No file selected. Please upload one.
 
 legal.privacy=Privacy Policy
 legal.terms=Terms and Conditions

src/main/resources/static/js/fileInput.js

@@ -35,6 +35,7 @@ function setupFileInput(chooser) {
   const pdfPrompt = chooser.getAttribute('data-bs-pdf-prompt');
   const inputContainerId = chooser.getAttribute('data-bs-element-container-id');
   const showUploads = chooser.getAttribute('data-bs-show-uploads') === "true";
+  const noFileSelectedPrompt = chooser.getAttribute('data-bs-no-file-selected');
 
   let inputContainer = document.getElementById(inputContainerId);
   const input = document.getElementById(elementId);
@@ -58,6 +59,12 @@ function setupFileInput(chooser) {
     inputBtn.click();
   });
 
+  // Handle form validation if the input is left empty
+  input.addEventListener("invalid", (e) => {
+    e.preventDefault();
+    alert(noFileSelectedPrompt);
+  });
+
   const dragenterListener = function () {
     dragCounter++;
     if (!overlay) {

src/main/resources/templates/fragments/common.html

@@ -228,7 +228,7 @@
       loading: '[[#{loading}]]'
     };</script>
   <div class="custom-file-chooser mb-3"
-    th:attr="data-bs-unique-id=${name}, data-bs-element-id=${name+'-input'}, data-bs-element-container-id=${name+'-input-container'}, data-bs-show-uploads=${showUploads}, data-bs-files-selected=#{filesSelected}, data-bs-pdf-prompt=#{pdfPrompt}">
+    th:attr="data-bs-unique-id=${name}, data-bs-element-id=${name+'-input'}, data-bs-element-container-id=${name+'-input-container'}, data-bs-show-uploads=${showUploads}, data-bs-files-selected=#{filesSelected}, data-bs-pdf-prompt=#{pdfPrompt}, data-bs-no-file-selected=#{noFileSelected}">
     <div class="mb-3 d-flex flex-row justify-content-center align-items-center flex-wrap input-container"
       th:name="${name}+'-input'" th:id="${name}+'-input-container'" th:data-text="#{fileChooser.hoveredDragAndDrop}">
       <label class="file-input-btn d-none">