Feature/improved signature element (#2489)

# Description

Please provide a summary of the changes, including relevant motivation
and context.

Closes #(issue_number)

## Checklist

- [ ] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [ ] I have performed a self-review of my own code
- [ ] I have attached images of the change if it is UI based
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] If my code has heavily changed functionality I have updated
relevant docs on [Stirling-PDFs doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
- [ ] My changes generate no new warnings
- [ ] 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)

---------

Co-authored-by: Anthony Stirling <77850077+Frooodle@users.noreply.github.com>
Co-authored-by: Reece Browne <reece@stirling.pdf>

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

@@ -213,7 +213,10 @@
                     unexpectedError: '[[#{decrypt.unexpectedError}]]',
                     serverError: '[[#{decrypt.serverError}]]',
                     success: '[[#{decrypt.success}]]',
-              };</script>
+              };
+              window.fileInput = {
+                dragAndDropPDF : '[[#{fileChooser.dragAndDropPDF}]]',
+                dragAndDropImage : '[[#{fileChooser.dragAndDropImage}]]'};</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-files-selected=#{filesSelected}, data-bs-pdf-prompt=#{pdfPrompt}">
                   <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">
@@ -222,7 +225,7 @@
                       </label>
                       <div th:text="#{fileChooser.click}"></div>
                       <div th:text="#{fileChooser.or}"></div>
-                      <div th:text="#{fileChooser.dragAndDrop}"></div>
+                      <div  th:text="#{fileChooser.dragAndDrop}" id="dragAndDrop"></div>
                   </div>
                     <div class="selected-files flex-wrap"></div>
                 </div>