Update build.gradle

Fix deserialization failure in Change Metadata (#2382 )
* Fix deserialization failure from String to Map Fix deserialization failure from String to Map that caused the following exception: Resolved [org.springframework.web.bind.MethodArgumentNotValidException: Validation failed for argument [0] in public org.springframework.http.ResponseEntity<byte[]> stirling.software.SPDF.controller.api.misc.MetadataController.metadata(stirling.software.SPDF.model.api.misc.MetadataRequest) throws java.io.IOException: [Field error in object 'metadataRequest' on field 'allRequestParams': rejected value [{"customKey1" : "YourCustomKey", "customKeyValue1", "YourCustomValue"}]; codes [typeMismatch.metadataRequest.allRequestParams,typeMismatch.allRequestParams,typeMismatch.java.util.Map,typeMismatch]; * Fix form binding for dynamic Map entries in Change Metadata - Implemented support for dynamic key-value inputs in Change Metadata form using proper `name` attributes for Map (`allRequestParams`) binding. - Fix form binding for dynamic Map (`allRequestParams`) entries in Change Metadata as the `allRequestParams` (Map name) was being sent as an empty map.
2024-12-03 10:54:07 +00:00 · 2024-12-03 08:28:34 +00:00 · 2024-12-02 19:25:16 +00:00 · 2024-12-02 18:59:05 +00:00 · 2024-12-02 18:32:07 +00:00 · 2024-12-02 18:18:16 +00:00
51 changed files with 753 additions and 105 deletions
--- a/README.md
+++ b/README.md
@@ -196,36 +196,36 @@ Stirling-PDF currently supports 37 languages!
 | Basque (Euskara) (eu_ES)                     | ![54%](https://geps.dev/progress/54)   |
 | Bulgarian (Български) (bg_BG)                | ![94%](https://geps.dev/progress/94)   |
 | Catalan (Català) (ca_CA)                     | ![88%](https://geps.dev/progress/88)   |
-| Croatian (Hrvatski) (hr_HR)                  | ![96%](https://geps.dev/progress/96)   |
+| Croatian (Hrvatski) (hr_HR)                  | ![95%](https://geps.dev/progress/95)   |
 | Czech (Česky) (cs_CZ)                        | ![95%](https://geps.dev/progress/95)   |
 | Danish (Dansk) (da_DK)                       | ![94%](https://geps.dev/progress/94)   |
-| Dutch (Nederlands) (nl_NL)                   | ![94%](https://geps.dev/progress/94)   |
+| Dutch (Nederlands) (nl_NL)                   | ![93%](https://geps.dev/progress/93)   |
 | English (English) (en_GB)                    | ![100%](https://geps.dev/progress/100) |
 | English (US) (en_US)                         | ![100%](https://geps.dev/progress/100) |
 | French (Français) (fr_FR)                    | ![97%](https://geps.dev/progress/97)   |
 | German (Deutsch) (de_DE)                     | ![97%](https://geps.dev/progress/97)   |
 | Greek (Ελληνικά) (el_GR)                     | ![95%](https://geps.dev/progress/95)   |
-| Hindi (हिंदी) (hi_IN)                          | ![93%](https://geps.dev/progress/93)   |
+| Hindi (हिंदी) (hi_IN)                          | ![92%](https://geps.dev/progress/92)   |
 | Hungarian (Magyar) (hu_HU)                   | ![95%](https://geps.dev/progress/95)   |
 | Indonesian (Bahasa Indonesia) (id_ID)        | ![95%](https://geps.dev/progress/95)   |
-| Irish (Gaeilge) (ga_IE)                      | ![86%](https://geps.dev/progress/86)   |
+| Irish (Gaeilge) (ga_IE)                      | ![85%](https://geps.dev/progress/85)   |
 | Italian (Italiano) (it_IT)                   | ![99%](https://geps.dev/progress/99)   |
 | Japanese (日本語) (ja_JP)                    | ![83%](https://geps.dev/progress/83)   |
 | Korean (한국어) (ko_KR)                      | ![93%](https://geps.dev/progress/93)   |
 | Norwegian (Norsk) (no_NB)                    | ![85%](https://geps.dev/progress/85)   |
 | Polish (Polski) (pl_PL)                      | ![94%](https://geps.dev/progress/94)   |
 | Portuguese (Português) (pt_PT)               | ![95%](https://geps.dev/progress/95)   |
-| Portuguese Brazilian (Português) (pt_BR)     | ![96%](https://geps.dev/progress/96)   |
-| Romanian (Română) (ro_RO)                    | ![88%](https://geps.dev/progress/88)   |
-| Russian (Русский) (ru_RU)                    | ![95%](https://geps.dev/progress/95)   |
+| Portuguese Brazilian (Português) (pt_BR)     | ![95%](https://geps.dev/progress/95)   |
+| Romanian (Română) (ro_RO)                    | ![87%](https://geps.dev/progress/87)   |
+| Russian (Русский) (ru_RU)                    | ![94%](https://geps.dev/progress/94)   |
 | Serbian Latin alphabet (Srpski) (sr_LATN_RS) | ![68%](https://geps.dev/progress/68)   |
 | Simplified Chinese (简体中文) (zh_CN)         | ![89%](https://geps.dev/progress/89)   |
 | Slovakian (Slovensky) (sk_SK)                | ![80%](https://geps.dev/progress/80)   |
-| Spanish (Español) (es_ES)                    | ![96%](https://geps.dev/progress/96)   |
+| Spanish (Español) (es_ES)                    | ![95%](https://geps.dev/progress/95)   |
 | Swedish (Svenska) (sv_SE)                    | ![94%](https://geps.dev/progress/94)   |
-| Thai (ไทย) (th_TH)                           | ![94%](https://geps.dev/progress/94)   |
-| Traditional Chinese (繁體中文) (zh_TW)        | ![96%](https://geps.dev/progress/96)   |
-| Turkish (Türkçe) (tr_TR)                     | ![90%](https://geps.dev/progress/90)   |
+| Thai (ไทย) (th_TH)                           | ![93%](https://geps.dev/progress/93)   |
+| Traditional Chinese (繁體中文) (zh_TW)        | ![95%](https://geps.dev/progress/95)   |
+| Turkish (Türkçe) (tr_TR)                     | ![89%](https://geps.dev/progress/89)   |
 | Ukrainian (Українська) (uk_UA)               | ![78%](https://geps.dev/progress/78)   |
 | Vietnamese (Tiếng Việt) (vi_VN)              | ![86%](https://geps.dev/progress/86)   |

--- a/build.gradle
+++ b/build.gradle
@@ -26,7 +26,7 @@ ext {
 }

 group = "stirling.software"
-version = "0.35.0"
+version = "0.35.1"


 java {
--- a/src/main/java/stirling/software/SPDF/controller/api/misc/MetadataController.java
+++ b/src/main/java/stirling/software/SPDF/controller/api/misc/MetadataController.java
@@ -14,6 +14,8 @@ import org.apache.pdfbox.pdmodel.PDDocumentInformation;
 import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
 import org.springframework.http.ResponseEntity;
+import org.springframework.web.bind.WebDataBinder;
+import org.springframework.web.bind.annotation.InitBinder;
 import org.springframework.web.bind.annotation.ModelAttribute;
 import org.springframework.web.bind.annotation.PostMapping;
 import org.springframework.web.bind.annotation.RequestMapping;
@@ -26,6 +28,7 @@ import io.swagger.v3.oas.annotations.tags.Tag;

 import stirling.software.SPDF.model.api.misc.MetadataRequest;
 import stirling.software.SPDF.utils.WebResponseUtils;
+import stirling.software.SPDF.utils.propertyeditor.StringToMapPropertyEditor;

@RestController
@RequestMapping("/api/v1/misc")
@@ -44,6 +47,11 @@ public class MetadataController {
        return entry;
    }

+    @InitBinder
+    public void initBinder(WebDataBinder binder) {
+        binder.registerCustomEditor(Map.class, "allRequestParams", new StringToMapPropertyEditor());
+    }
+
    @PostMapping(consumes = "multipart/form-data", value = "/update-metadata")
    @Operation(
            summary = "Update metadata of a PDF file",
--- a/src/main/java/stirling/software/SPDF/controller/api/misc/StampController.java
+++ b/src/main/java/stirling/software/SPDF/controller/api/misc/StampController.java
@@ -147,7 +147,7 @@ public class StampController {
        return WebResponseUtils.pdfDocToWebResponse(
                document,
                Filenames.toSimpleFileName(pdfFile.getOriginalFilename())
-                                .replaceFirst("[.][^.]+$", "")
+                        .replaceFirst("[.][^.]+$", "")
                        + "_stamped.pdf");
    }

@@ -191,7 +191,7 @@ public class StampController {
            String fileExtension = resourceDir.substring(resourceDir.lastIndexOf("."));
            File tempFile = Files.createTempFile("NotoSansFont", fileExtension).toFile();
            try (InputStream is = classPathResource.getInputStream();
-                    FileOutputStream os = new FileOutputStream(tempFile)) {
+                 FileOutputStream os = new FileOutputStream(tempFile)) {
                IOUtils.copy(is, os);
                font = PDType0Font.load(document, tempFile);
            } finally {
@@ -229,10 +229,22 @@ public class StampController {
                    calculatePositionY(
                            pageSize, position, calculateTextCapHeight(font, fontSize), margin);
        }
+        // Split the stampText into multiple lines
+        String[] lines = stampText.split("\\\\n");
+
+        // Calculate dynamic line height based on font ascent and descent
+        float ascent = font.getFontDescriptor().getAscent();
+        float descent = font.getFontDescriptor().getDescent();
+        float lineHeight = ((ascent - descent) / 1000) * fontSize;

        contentStream.beginText();
-        contentStream.setTextMatrix(Matrix.getRotateInstance(Math.toRadians(rotation), x, y));
-        contentStream.showText(stampText);
+        for (int i = 0; i < lines.length; i++) {
+            String line = lines[i];
+            // Set the text matrix for each line with rotation
+            contentStream.setTextMatrix(
+                    Matrix.getRotateInstance(Math.toRadians(rotation), x, y - (i * lineHeight)));
+            contentStream.showText(line);
+        }
        contentStream.endText();
    }

@@ -327,4 +339,4 @@ public class StampController {
    private float calculateTextCapHeight(PDFont font, float fontSize) {
        return font.getFontDescriptor().getCapHeight() / 1000 * fontSize;
    }
-}
+}
--- a/src/main/java/stirling/software/SPDF/utils/propertyeditor/StringToMapPropertyEditor.java
+++ b/src/main/java/stirling/software/SPDF/utils/propertyeditor/StringToMapPropertyEditor.java
@@ -0,0 +1,26 @@
+package stirling.software.SPDF.utils.propertyeditor;
+
+import java.beans.PropertyEditorSupport;
+import java.util.HashMap;
+import java.util.Map;
+
+import com.fasterxml.jackson.core.type.TypeReference;
+import com.fasterxml.jackson.databind.ObjectMapper;
+
+public class StringToMapPropertyEditor extends PropertyEditorSupport {
+
+    private final ObjectMapper objectMapper = new ObjectMapper();
+
+    @Override
+    public void setAsText(String text) throws IllegalArgumentException {
+        try {
+            TypeReference<HashMap<String, String>> typeRef =
+                    new TypeReference<HashMap<String, String>>() {};
+            Map<String, String> map = objectMapper.readValue(text, typeRef);
+            setValue(map);
+        } catch (Exception e) {
+            throw new IllegalArgumentException(
+                    "Failed to convert java.lang.String to java.util.Map");
+        }
+    }
+}
--- a/src/main/resources/messages_ar_AR.properties
+++ b/src/main/resources/messages_ar_AR.properties
@@ -1263,6 +1263,11 @@ splitByChapters.desc.3=تمثيل البيانات الأصلية: إذا تم
 splitByChapters.desc.4=سماح بالتكرار: إذا تم اختياره، يسمح بوجود معاينات متعددة في الصفحة نفسها لخلق ملفات PDF منفصلة.
 splitByChapters.submit=تقطيع ملف PDF

+#File Chooser
+fileChooser.click=انقر هنا
+fileChooser.or=أو
+fileChooser.dragAndDrop=قم بسحب الملفات وإفلاتها
+fileChooser.hoveredDragAndDrop=قم بسحب المفات وإفلاتها هنا

 #release notes
 releases.footer=Releases
--- a/src/main/resources/messages_az_AZ.properties
+++ b/src/main/resources/messages_az_AZ.properties
@@ -1263,6 +1263,11 @@ splitByChapters.desc.3=Metadatanı daxil edin: Əgər yoxlanılıbsa, orijinal P
 splitByChapters.desc.4=Allow Duplicates: Dublikatlara icazə verin: Əgər işarələnərsə, eyni səhifədə birdən çox bookmarka ayrı-ayrı PDF sənədləri yaratmağa icazə verin.
 splitByChapters.submit=PDF-i Ayır

+#File Chooser
+fileChooser.click=Click
+fileChooser.or=or
+fileChooser.dragAndDrop=Drag & Drop
+fileChooser.hoveredDragAndDrop=Drag & Drop file(s) here

 #release notes
 releases.footer=Buraxılışlar
--- a/src/main/resources/messages_bg_BG.properties
+++ b/src/main/resources/messages_bg_BG.properties
@@ -1263,6 +1263,11 @@ splitByChapters.desc.3=Включване на метаданни: Ако е о
 splitByChapters.desc.4=Разрешаване на дубликати: Ако е отметнато, позволява множество отметки на една и съща страница за създаване на отделни PDF файлове.
 splitByChapters.submit=Разделяне на PDF

+#File Chooser
+fileChooser.click=Click
+fileChooser.or=or
+fileChooser.dragAndDrop=Drag & Drop
+fileChooser.hoveredDragAndDrop=Drag & Drop file(s) here

 #release notes
 releases.footer=Releases
--- a/src/main/resources/messages_ca_CA.properties
+++ b/src/main/resources/messages_ca_CA.properties
@@ -1263,6 +1263,11 @@ splitByChapters.desc.3=Incloure Metadades: Si està marcat, les metadades del PD
 splitByChapters.desc.4=Permetre Duplicats: Si està marcat, permet diversos marcadors a la mateixa pàgina per crear PDFs separats.
 splitByChapters.submit=Divideix PDF

+#File Chooser
+fileChooser.click=Click
+fileChooser.or=or
+fileChooser.dragAndDrop=Drag & Drop
+fileChooser.hoveredDragAndDrop=Drag & Drop file(s) here

 #release notes
 releases.footer=Releases
--- a/src/main/resources/messages_cs_CZ.properties
+++ b/src/main/resources/messages_cs_CZ.properties
@@ -1263,6 +1263,11 @@ splitByChapters.desc.3=Zahrnout metadatů: Pokud je zaškrtnuto, původní metad
 splitByChapters.desc.4=Povolit duplicitní záznamy: Pokud je zaškrtnuto, návštěvníci mohou vytvořit samostatné PDF soubory z více záhlaví na stejné straně.
 splitByChapters.submit=Podělit se PDF

+#File Chooser
+fileChooser.click=Click
+fileChooser.or=or
+fileChooser.dragAndDrop=Drag & Drop
+fileChooser.hoveredDragAndDrop=Drag & Drop file(s) here

 #release notes
 releases.footer=Releases
--- a/src/main/resources/messages_da_DK.properties
+++ b/src/main/resources/messages_da_DK.properties
@@ -1263,6 +1263,11 @@ splitByChapters.desc.3=Inkluder metadata: Hvis markeret, vil den originale PDF's
 splitByChapters.desc.4=Tillad duplikater: Hvis markeret, tillader det flere bogmærker på samme side til at oprette separate PDF'er.
 splitByChapters.submit=Splitter PDF

+#File Chooser
+fileChooser.click=Click
+fileChooser.or=or
+fileChooser.dragAndDrop=Drag & Drop
+fileChooser.hoveredDragAndDrop=Drag & Drop file(s) here

 #release notes
 releases.footer=Releases
--- a/src/main/resources/messages_de_DE.properties
+++ b/src/main/resources/messages_de_DE.properties
@@ -1263,6 +1263,11 @@ splitByChapters.desc.3=Metadaten einschließen: Wenn diese Option aktiviert ist,
 splitByChapters.desc.4=Duplikate erlauben: Wenn diese Option aktiviert ist, können mehrere Lesezeichen auf derselben Seite separate PDF Dateien erstellen.
 splitByChapters.submit=PDF teilen

+#File Chooser
+fileChooser.click=Click
+fileChooser.or=or
+fileChooser.dragAndDrop=Drag & Drop
+fileChooser.hoveredDragAndDrop=Drag & Drop file(s) here

 #release notes
 releases.footer=Releases
--- a/src/main/resources/messages_el_GR.properties
+++ b/src/main/resources/messages_el_GR.properties
@@ -1056,8 +1056,8 @@ watermark.selectText.1=Επιλέξτε PDF για την προσθήκη το
 watermark.selectText.2=Κείμενο Υδατογραφήματος:
 watermark.selectText.3=Μέγεθος Κειμένου:
 watermark.selectText.4=Περιστροφή (0-360):
-watermark.selectText.5=widthSpacer (Κενό μεταξύ κάθε υδατογραφήματος οριζόντια):
-watermark.selectText.6=heightSpacer (Κενό μεταξύ κάθε υδατογραφήματος κάθετα):
+watermark.selectText.5=Width Spacer (Κενό μεταξύ κάθε υδατογραφήματος οριζόντια):
+watermark.selectText.6=Height Spacer (Κενό μεταξύ κάθε υδατογραφήματος κάθετα):
 watermark.selectText.7=Αδιαφάνεια (Opacity) (0% - 100%):
 watermark.selectText.8=Τύπος Υδατογραφήματος:
 watermark.selectText.9=Εικόνα Υδατογραφήματος:
@@ -1263,6 +1263,11 @@ splitByChapters.desc.3=Πρόσθεση Metadata: Αν επεξεργαστεί
 splitByChapters.desc.4=Διάλυση Παρόντων Τίτλων Επιπέδου: Αν επεξεργαστείται, επιτρέπει τη δημιουργία αποκοπών PDF με βάση πλήρως καθορισμένους σήμαντες έδρας.
 splitByChapters.submit=Διαλύστε το PDF

+#File Chooser
+fileChooser.click=Click
+fileChooser.or=or
+fileChooser.dragAndDrop=Drag & Drop
+fileChooser.hoveredDragAndDrop=Drag & Drop file(s) here

 #release notes
 releases.footer=Releases
--- a/src/main/resources/messages_en_GB.properties
+++ b/src/main/resources/messages_en_GB.properties
@@ -1056,8 +1056,8 @@ watermark.selectText.1=Select PDF to add watermark to:
 watermark.selectText.2=Watermark Text:
 watermark.selectText.3=Font Size:
 watermark.selectText.4=Rotation (0-360):
-watermark.selectText.5=widthSpacer (Space between each watermark horizontally):
-watermark.selectText.6=heightSpacer (Space between each watermark vertically):
+watermark.selectText.5=Width Spacer (Space between each watermark horizontally):
+watermark.selectText.6=Height Spacer (Space between each watermark vertically):
 watermark.selectText.7=Opacity (0% - 100%):
 watermark.selectText.8=Watermark Type:
 watermark.selectText.9=Watermark Image:
@@ -1263,6 +1263,11 @@ splitByChapters.desc.3=Include Metadata: If checked, the original PDF's metadata
 splitByChapters.desc.4=Allow Duplicates: If checked, allows multiple bookmarks on the same page to create separate PDFs.
 splitByChapters.submit=Split PDF

+#File Chooser
+fileChooser.click=Click
+fileChooser.or=or
+fileChooser.dragAndDrop=Drag & Drop
+fileChooser.hoveredDragAndDrop=Drag & Drop file(s) here

 #release notes
 releases.footer=Releases
--- a/src/main/resources/messages_en_US.properties
+++ b/src/main/resources/messages_en_US.properties
@@ -1056,8 +1056,8 @@ watermark.selectText.1=Select PDF to add watermark to:
 watermark.selectText.2=Watermark Text:
 watermark.selectText.3=Font Size:
 watermark.selectText.4=Rotation (0-360):
-watermark.selectText.5=widthSpacer (Space between each watermark horizontally):
-watermark.selectText.6=heightSpacer (Space between each watermark vertically):
+watermark.selectText.5=Width Spacer (Space between each watermark horizontally):
+watermark.selectText.6=Height Spacer (Space between each watermark vertically):
 watermark.selectText.7=Opacity (0% - 100%):
 watermark.selectText.8=Watermark Type:
 watermark.selectText.9=Watermark Image:
@@ -1263,6 +1263,11 @@ splitByChapters.desc.3=Include Metadata: If checked, the original PDF's metadata
 splitByChapters.desc.4=Allow Duplicates: If checked, allows multiple bookmarks on the same page to create separate PDFs.
 splitByChapters.submit=Split PDF

+#File Chooser
+fileChooser.click=Click
+fileChooser.or=or
+fileChooser.dragAndDrop=Drag & Drop
+fileChooser.hoveredDragAndDrop=Drag & Drop file(s) here

 #release notes
 releases.footer=Releases
--- a/src/main/resources/messages_es_ES.properties
+++ b/src/main/resources/messages_es_ES.properties
@@ -1263,6 +1263,11 @@ splitByChapters.desc.3=Incluir Metadatos: Si está seleccionado, los metadatos d
 splitByChapters.desc.4=Permitir Duplicados: Si está seleccionado, permite que múltiples marcadores en la misma página creen archivos PDF separados.
 splitByChapters.submit=Dividir PDF

+#File Chooser
+fileChooser.click=Click
+fileChooser.or=or
+fileChooser.dragAndDrop=Drag & Drop
+fileChooser.hoveredDragAndDrop=Drag & Drop file(s) here

 #release notes
 releases.footer=Releases
--- a/src/main/resources/messages_eu_ES.properties
+++ b/src/main/resources/messages_eu_ES.properties
@@ -1263,6 +1263,11 @@ splitByChapters.desc.3=Include Metadata: If checked, the original PDF's metadata
 splitByChapters.desc.4=Allow Duplicates: If checked, allows multiple bookmarks on the same page to create separate PDFs.
 splitByChapters.submit=Split PDF

+#File Chooser
+fileChooser.click=Click
+fileChooser.or=or
+fileChooser.dragAndDrop=Drag & Drop
+fileChooser.hoveredDragAndDrop=Drag & Drop file(s) here

 #release notes
 releases.footer=Releases
--- a/src/main/resources/messages_fr_FR.properties
+++ b/src/main/resources/messages_fr_FR.properties
@@ -1056,8 +1056,8 @@ watermark.selectText.1=PDF auquel ajouter un filigrane
 watermark.selectText.2=Texte du filigrane
 watermark.selectText.3=Taille de police
 watermark.selectText.4=Rotation (de 0 à 360 degrés)
-watermark.selectText.5=widthSpacer (espace entre chaque filigrane horizontalement)
-watermark.selectText.6=heightSpacer (espace entre chaque filigrane verticalement)
+watermark.selectText.5=Width Spacer (espace entre chaque filigrane horizontalement)
+watermark.selectText.6=Height Spacer (espace entre chaque filigrane verticalement)
 watermark.selectText.7=Opacité (de 0% à 100%)
 watermark.selectText.8=Type de filigrane
 watermark.selectText.9=Image du filigrane
@@ -1263,6 +1263,11 @@ splitByChapters.desc.3=Inclure les Métadonnées : Si coché, les métadonnées
 splitByChapters.desc.4=Autoriser les Doublons : Si coché, permet à plusieurs signets sur la même page de créer des PDF séparés.
 splitByChapters.submit=Diviser le PDF

+#File Chooser
+fileChooser.click=Click
+fileChooser.or=or
+fileChooser.dragAndDrop=Drag & Drop
+fileChooser.hoveredDragAndDrop=Drag & Drop file(s) here

 #release notes
 releases.footer=Releases
--- a/src/main/resources/messages_ga_IE.properties
+++ b/src/main/resources/messages_ga_IE.properties
@@ -1056,7 +1056,7 @@ watermark.selectText.1=Roghnaigh PDF chun comhartha uisce a chur leis:
 watermark.selectText.2=Téacs Comhartha Uisce:
 watermark.selectText.3=Méid cló:
 watermark.selectText.4=Rothlú (0-360):
-watermark.selectText.5=widthSpacer (Spás idir gach comhartha uisce go cothrománach):
+watermark.selectText.5=Width Spacer (Spás idir gach comhartha uisce go cothrománach):
 watermark.selectText.6=spásaire airde (Spás idir gach comhartha uisce go hingearach):
 watermark.selectText.7=Teimhneacht (0% - 100%):
 watermark.selectText.8=Cineál Comhartha Uisce:
@@ -1263,6 +1263,11 @@ splitByChapters.desc.3=Include Metadata: If checked, the original PDF's metadata
 splitByChapters.desc.4=Allow Duplicates: If checked, allows multiple bookmarks on the same page to create separate PDFs.
 splitByChapters.submit=Split PDF

+#File Chooser
+fileChooser.click=Click
+fileChooser.or=or
+fileChooser.dragAndDrop=Drag & Drop
+fileChooser.hoveredDragAndDrop=Drag & Drop file(s) here

 #release notes
 releases.footer=Releases
--- a/src/main/resources/messages_hi_IN.properties
+++ b/src/main/resources/messages_hi_IN.properties
@@ -1263,6 +1263,11 @@ splitByChapters.desc.3=मॉडेटरेट का शामिल करे
 splitByChapters.desc.4=यादृच्छिक पुनरावृत्ति अनुमोदित: यदि सत्यापित किया जाता है, एक ही पेज पर दोहरे मूल्यांकन पब्लिक पीड़एफ बनाने की संभावना देता है।
 splitByChapters.submit=PDF विभाजित

+#File Chooser
+fileChooser.click=Click
+fileChooser.or=or
+fileChooser.dragAndDrop=Drag & Drop
+fileChooser.hoveredDragAndDrop=Drag & Drop file(s) here

 #release notes
 releases.footer=Releases
--- a/src/main/resources/messages_hr_HR.properties
+++ b/src/main/resources/messages_hr_HR.properties
@@ -1263,6 +1263,11 @@ splitByChapters.desc.3=Uključi metapodatke: Ako je pokušano, metapodaci iz ori
 splitByChapters.desc.4=Dopuštaj duplikate: Ako je ova opcija zaštićena, dozvoljava se da se na istoj strani mogu stvoriti posebne PDF datoteke s više oznaka.
 splitByChapters.submit=Podijeli PDF

+#File Chooser
+fileChooser.click=Click
+fileChooser.or=or
+fileChooser.dragAndDrop=Drag & Drop
+fileChooser.hoveredDragAndDrop=Drag & Drop file(s) here

 #release notes
 releases.footer=Releases
--- a/src/main/resources/messages_hu_HU.properties
+++ b/src/main/resources/messages_hu_HU.properties
@@ -1056,8 +1056,8 @@ watermark.selectText.1=Válassza ki a PDF-t, amelyhez vízjelet kíván hozzáad
 watermark.selectText.2=Vízjel szövege:
 watermark.selectText.3=Betűméret:
 watermark.selectText.4=Forgatás (0-360):
-watermark.selectText.5=widthSpacer (Hely a vízjelek között vízszintesen):
-watermark.selectText.6=heightSpacer (Hely a vízjelek között függőlegesen):
+watermark.selectText.5=Width Spacer (Hely a vízjelek között vízszintesen):
+watermark.selectText.6=Height Spacer (Hely a vízjelek között függőlegesen):
 watermark.selectText.7=Átlátszóság (0% - 100%):
 watermark.selectText.8=Vízjel típusa:
 watermark.selectText.9=Vízjel képe:
@@ -1263,6 +1263,11 @@ splitByChapters.desc.3=Metaadatok belefoglalása: Ha bevanítva van, az eredeti
 splitByChapters.desc.4=Duplikációk engedélyezése: Ha bevanítva van, lehetővé teszi a megadott oldalon lévő több kijelzőszint alapján új PDF-ek létrehozása.
 splitByChapters.submit=PDF osztás

+#File Chooser
+fileChooser.click=Click
+fileChooser.or=or
+fileChooser.dragAndDrop=Drag & Drop
+fileChooser.hoveredDragAndDrop=Drag & Drop file(s) here

 #release notes
 releases.footer=Releases
--- a/src/main/resources/messages_id_ID.properties
+++ b/src/main/resources/messages_id_ID.properties
@@ -1056,8 +1056,8 @@ watermark.selectText.1=Pilih PDF untuk menambahkan watermark:
 watermark.selectText.2=Text Watermark:
 watermark.selectText.3=Ukuran Huruf:
 watermark.selectText.4=Rotasi (0-360):
-watermark.selectText.5=widthSpacer (Spasi diantara setiap watermark horisontal):
-watermark.selectText.6=heightSpacer (Spasi diantara setiap watermark vertikal):
+watermark.selectText.5=Width Spacer (Spasi diantara setiap watermark horisontal):
+watermark.selectText.6=Height Spacer (Spasi diantara setiap watermark vertikal):
 watermark.selectText.7=Kejernihan (0% - 100%):
 watermark.selectText.8=Tipe Watermark:
 watermark.selectText.9=Gambar Watermark:
@@ -1263,6 +1263,11 @@ splitByChapters.desc.3=Termasuk Metadata: Jika dicentang, metadata asli PDF akan
 splitByChapters.desc.4=Izinkan Duplikat: Jika dicentang, mengizinkan beberapa markah pada halaman yang sama untuk membuat PDF terpisah.
 splitByChapters.submit=Pecah PDF

+#File Chooser
+fileChooser.click=Click
+fileChooser.or=or
+fileChooser.dragAndDrop=Drag & Drop
+fileChooser.hoveredDragAndDrop=Drag & Drop file(s) here

 #release notes
 releases.footer=Releases
--- a/src/main/resources/messages_it_IT.properties
+++ b/src/main/resources/messages_it_IT.properties
@@ -958,8 +958,8 @@ multiTool.moveLeft=Sposta a sinistra
 multiTool.moveRight=Sposta a destra
 multiTool.delete=Elimina
 multiTool.dragDropMessage=Pagina(e) selezionata(e)
-multiTool.undo=Undo
-multiTool.redo=Redo
+multiTool.undo=Annulla
+multiTool.redo=Rifai

 #multiTool-advert
 multiTool-advert.message=Questa funzione è disponibile anche nella nostra <a href="{0}">pagina multi-strumento</a>. Scoprila per un'interfaccia utente pagina per pagina migliorata e funzionalità aggiuntive!
@@ -1263,6 +1263,11 @@ splitByChapters.desc.3=Includi metadati: se selezionato, i metadati del PDF orig
 splitByChapters.desc.4=Consenti duplicati: se selezionata, consente più segnalibri sulla stessa pagina per creare PDF separati.
 splitByChapters.submit=Dividi PDF

+#File Chooser
+fileChooser.click=Clicca
+fileChooser.or=o
+fileChooser.dragAndDrop=Trascina & Rilascia
+fileChooser.hoveredDragAndDrop=Trascina & rilascia i file qui

 #release notes
 releases.footer=Rilasci
--- a/src/main/resources/messages_ja_JP.properties
+++ b/src/main/resources/messages_ja_JP.properties
@@ -1263,6 +1263,11 @@ splitByChapters.desc.3=Include Metadata: If checked, the original PDF's metadata
 splitByChapters.desc.4=Allow Duplicates: If checked, allows multiple bookmarks on the same page to create separate PDFs.
 splitByChapters.submit=Split PDF

+#File Chooser
+fileChooser.click=Click
+fileChooser.or=or
+fileChooser.dragAndDrop=Drag & Drop
+fileChooser.hoveredDragAndDrop=Drag & Drop file(s) here

 #release notes
 releases.footer=Releases
--- a/src/main/resources/messages_ko_KR.properties
+++ b/src/main/resources/messages_ko_KR.properties
@@ -1263,6 +1263,11 @@ splitByChapters.desc.3=메타데이터 포함: 체크하면 각 분할된 PDF에
 splitByChapters.desc.4=중복 허용: 중복 북마크가 있는 같은 페이지에 여러 번 분할 PDF를 생성합니다.
 splitByChapters.submit=PDF 분할

+#File Chooser
+fileChooser.click=Click
+fileChooser.or=or
+fileChooser.dragAndDrop=Drag & Drop
+fileChooser.hoveredDragAndDrop=Drag & Drop file(s) here

 #release notes
 releases.footer=Releases
--- a/src/main/resources/messages_nl_NL.properties
+++ b/src/main/resources/messages_nl_NL.properties
@@ -1263,6 +1263,11 @@ splitByChapters.desc.3=Metadata inclusief: Als gecijfeld, de originele PDF's met
 splitByChapters.desc.4=Dubbele items toestaan: Als gecijfeld, zorgen multiple boekmarkeersymboolen op dezelfde pagina voor het maken van aparte PDF-bestanden.
 splitByChapters.submit=PDF splitsen

+#File Chooser
+fileChooser.click=Click
+fileChooser.or=or
+fileChooser.dragAndDrop=Drag & Drop
+fileChooser.hoveredDragAndDrop=Drag & Drop file(s) here

 #release notes
 releases.footer=Releases
--- a/src/main/resources/messages_no_NB.properties
+++ b/src/main/resources/messages_no_NB.properties
@@ -1263,6 +1263,11 @@ splitByChapters.desc.3=Include Metadata: If checked, the original PDF's metadata
 splitByChapters.desc.4=Allow Duplicates: If checked, allows multiple bookmarks on the same page to create separate PDFs.
 splitByChapters.submit=Split PDF

+#File Chooser
+fileChooser.click=Click
+fileChooser.or=or
+fileChooser.dragAndDrop=Drag & Drop
+fileChooser.hoveredDragAndDrop=Drag & Drop file(s) here

 #release notes
 releases.footer=Releases
--- a/src/main/resources/messages_pl_PL.properties
+++ b/src/main/resources/messages_pl_PL.properties
@@ -1263,6 +1263,11 @@ splitByChapters.desc.3=Dołącz Metadane: Jeśli opcja ta jest zaznaczona, metad
 splitByChapters.desc.4=Zezwól na Duplikaty: Jeśli ta opcja jest zaznaczona, pozwala na tworzenie oddzielnych plików PDF przez wiele zakładek na tej samej stronie.
 splitByChapters.submit=Podziel PDF

+#File Chooser
+fileChooser.click=Click
+fileChooser.or=or
+fileChooser.dragAndDrop=Drag & Drop
+fileChooser.hoveredDragAndDrop=Drag & Drop file(s) here

 #release notes
 releases.footer=Releases
--- a/src/main/resources/messages_pt_BR.properties
+++ b/src/main/resources/messages_pt_BR.properties
@@ -1056,8 +1056,8 @@ watermark.selectText.1=Selecione PDF para adicionar a marca d'água:
 watermark.selectText.2=Texto da marca d'água:
 watermark.selectText.3=Tamanho da fonte:
 watermark.selectText.4=Rotação (0-360):
-watermark.selectText.5=widthSpacer (Espaço entre cada marca d'água horizontalmente):
-watermark.selectText.6=heightSpacer (Espaço entre cada marca d'água verticalmente):
+watermark.selectText.5=Width Spacer (Espaço entre cada marca d'água horizontalmente):
+watermark.selectText.6=Height Spacer (Espaço entre cada marca d'água verticalmente):
 watermark.selectText.7=Opacidade (0% - 100%):
 watermark.selectText.8=Tipo de marca d'água:
 watermark.selectText.9=Imagem da marca d'água:
@@ -1263,6 +1263,11 @@ splitByChapters.desc.3=Incluir Metadados: Se marcado, os metadados do PDF origin
 splitByChapters.desc.4=Permitir Cópias: Se marcado, habilita vários marcadores na mesma página para criar PDFs separados.
 splitByChapters.submit=Dividir PDF

+#File Chooser
+fileChooser.click=Click
+fileChooser.or=or
+fileChooser.dragAndDrop=Drag & Drop
+fileChooser.hoveredDragAndDrop=Drag & Drop file(s) here

 #release notes
 releases.footer=Releases
--- a/src/main/resources/messages_pt_PT.properties
+++ b/src/main/resources/messages_pt_PT.properties
@@ -1056,8 +1056,8 @@ watermark.selectText.1=Seleccione o PDF para Adicionar a Marca d'Água
 watermark.selectText.2=Texto da Marca d'Água
 watermark.selectText.3=Tamanho da Fonte
 watermark.selectText.4=Rotação (0-360)
-watermark.selectText.5=Espaçamento Horizontal (widthSpacer)
-watermark.selectText.6=Espaçamento Vertical (heightSpacer)
+watermark.selectText.5=Espaçamento Horizontal (Width Spacer)
+watermark.selectText.6=Espaçamento Vertical (Height Spacer)
 watermark.selectText.7=Opacidade (0% - 100%)
 watermark.selectText.8=Tipo de Marca d'Água
 watermark.selectText.9=Imagem da Marca d'Água
@@ -1263,6 +1263,11 @@ splitByChapters.desc.3=Inclua Metadados: Se marcado, os metadados originais do P
 splitByChapters.desc.4=Permitir Duplicatas: Se marcado, permite a criação de vários bookmarks na mesma página para criar separadamente vários PDFs.
 splitByChapters.submit=Dividir o PDF

+#File Chooser
+fileChooser.click=Click
+fileChooser.or=or
+fileChooser.dragAndDrop=Drag & Drop
+fileChooser.hoveredDragAndDrop=Drag & Drop file(s) here

 #release notes
 releases.footer=Releases
--- a/src/main/resources/messages_ro_RO.properties
+++ b/src/main/resources/messages_ro_RO.properties
@@ -1263,6 +1263,11 @@ splitByChapters.desc.3=Include Metadata: If checked, the original PDF's metadata
 splitByChapters.desc.4=Allow Duplicates: If checked, allows multiple bookmarks on the same page to create separate PDFs.
 splitByChapters.submit=Split PDF

+#File Chooser
+fileChooser.click=Click
+fileChooser.or=or
+fileChooser.dragAndDrop=Drag & Drop
+fileChooser.hoveredDragAndDrop=Drag & Drop file(s) here

 #release notes
 releases.footer=Releases
--- a/src/main/resources/messages_ru_RU.properties
+++ b/src/main/resources/messages_ru_RU.properties
@@ -1056,8 +1056,8 @@ watermark.selectText.1=Выберите PDF, чтобы добавить вод
 watermark.selectText.2=Текст водяного знака:
 watermark.selectText.3=Размер шрифта:
 watermark.selectText.4=Поворот (0-360):
-watermark.selectText.5=widthSpacer (пробел между каждым водяным знаком по горизонтали):
-watermark.selectText.6=heightSpacer (пробел между каждым водяным знаком по вертикали):
+watermark.selectText.5=Width Spacer (пробел между каждым водяным знаком по горизонтали):
+watermark.selectText.6=Height Spacer (пробел между каждым водяным знаком по вертикали):
 watermark.selectText.7=Непрозрачность (0% - 100%):
 watermark.selectText.8=Тип водяного знака:
 watermark.selectText.9=Изображение водяного знака:
@@ -1263,6 +1263,11 @@ splitByChapters.desc.3=Включить метаданные: если эта о
 splitByChapters.desc.4=Позволять дубликаты: если эта опция отмечена, на одной странице могут быть созданы несколько PDF из-за нескольких одинаковых закладок.
 splitByChapters.submit=Разделить PDF

+#File Chooser
+fileChooser.click=Click
+fileChooser.or=or
+fileChooser.dragAndDrop=Drag & Drop
+fileChooser.hoveredDragAndDrop=Drag & Drop file(s) here

 #release notes
 releases.footer=Releases
--- a/src/main/resources/messages_sk_SK.properties
+++ b/src/main/resources/messages_sk_SK.properties
@@ -1263,6 +1263,11 @@ splitByChapters.desc.3=Include Metadata: If checked, the original PDF's metadata
 splitByChapters.desc.4=Allow Duplicates: If checked, allows multiple bookmarks on the same page to create separate PDFs.
 splitByChapters.submit=Split PDF

+#File Chooser
+fileChooser.click=Click
+fileChooser.or=or
+fileChooser.dragAndDrop=Drag & Drop
+fileChooser.hoveredDragAndDrop=Drag & Drop file(s) here

 #release notes
 releases.footer=Releases
--- a/src/main/resources/messages_sr_LATN_RS.properties
+++ b/src/main/resources/messages_sr_LATN_RS.properties
@@ -1263,6 +1263,11 @@ splitByChapters.desc.3=Include Metadata: If checked, the original PDF's metadata
 splitByChapters.desc.4=Allow Duplicates: If checked, allows multiple bookmarks on the same page to create separate PDFs.
 splitByChapters.submit=Split PDF

+#File Chooser
+fileChooser.click=Click
+fileChooser.or=or
+fileChooser.dragAndDrop=Drag & Drop
+fileChooser.hoveredDragAndDrop=Drag & Drop file(s) here

 #release notes
 releases.footer=Releases
--- a/src/main/resources/messages_sv_SE.properties
+++ b/src/main/resources/messages_sv_SE.properties
@@ -1056,8 +1056,8 @@ watermark.selectText.1=Välj PDF för att lägga till vattenstämpel till:
 watermark.selectText.2=Vattenmärkestext:
 watermark.selectText.3=Teckenstorlek:
 watermark.selectText.4=Vändning (0-360):
-watermark.selectText.5=widthSpacer (mellanrum mellan varje vattenstämpel horisontellt):
-watermark.selectText.6=heightSpacer (mellanrum mellan varje vattenstämpel vertikalt):
+watermark.selectText.5=Width Spacer (mellanrum mellan varje vattenstämpel horisontellt):
+watermark.selectText.6=Height Spacer (mellanrum mellan varje vattenstämpel vertikalt):
 watermark.selectText.7=Opacitet (0% - 100%):
 watermark.selectText.8=Vattenstämpeltyp:
 watermark.selectText.9=Vattenstämpelbild:
@@ -1263,6 +1263,11 @@ splitByChapters.desc.3=Include Metadata: If checked, the original PDF's metadata
 splitByChapters.desc.4=Tillåt duplicieringar: Om kryssrutan är markerad tillåts flera bokmärken på samma sida skapa individuella PDF:er.
 splitByChapters.submit=Dela upp PDF

+#File Chooser
+fileChooser.click=Click
+fileChooser.or=or
+fileChooser.dragAndDrop=Drag & Drop
+fileChooser.hoveredDragAndDrop=Drag & Drop file(s) here

 #release notes
 releases.footer=Releases
--- a/src/main/resources/messages_th_TH.properties
+++ b/src/main/resources/messages_th_TH.properties
@@ -1263,6 +1263,11 @@ splitByChapters.desc.3=รวมข้อมูลเสริม: หากถ
 splitByChapters.desc.4=อนุญาตให้มีการซ้ำ: หากถูกเลือก จะทำให้สามารถสร้างไฟล์ PDF แยกออกมาจากหน้าเดียวกันได้หลายรายการ
 splitByChapters.submit=แบ่งไฟล์ PDF

+#File Chooser
+fileChooser.click=Click
+fileChooser.or=or
+fileChooser.dragAndDrop=Drag & Drop
+fileChooser.hoveredDragAndDrop=Drag & Drop file(s) here

 #release notes
 releases.footer=Releases
--- a/src/main/resources/messages_tr_TR.properties
+++ b/src/main/resources/messages_tr_TR.properties
@@ -1263,6 +1263,11 @@ splitByChapters.desc.3=Include Metadata: If checked, the original PDF's metadata
 splitByChapters.desc.4=Allow Duplicates: If checked, allows multiple bookmarks on the same page to create separate PDFs.
 splitByChapters.submit=Split PDF

+#File Chooser
+fileChooser.click=Click
+fileChooser.or=or
+fileChooser.dragAndDrop=Drag & Drop
+fileChooser.hoveredDragAndDrop=Drag & Drop file(s) here

 #release notes
 releases.footer=Releases
--- a/src/main/resources/messages_uk_UA.properties
+++ b/src/main/resources/messages_uk_UA.properties
@@ -1056,8 +1056,8 @@ watermark.selectText.1=Виберіть PDF, щоб додати водяний
 watermark.selectText.2=Текст водяного знаку:
 watermark.selectText.3=Розмір шрифту:
 watermark.selectText.4=Обертання (0-360):
-watermark.selectText.5=widthSpacer (проміжок між кожним водяним знаком по горизонталі):
-watermark.selectText.6=heightSpacer (проміжок між кожним водяним знаком по вертикалі):
+watermark.selectText.5=Width Spacer (проміжок між кожним водяним знаком по горизонталі):
+watermark.selectText.6=Height Spacer (проміжок між кожним водяним знаком по вертикалі):
 watermark.selectText.7=Непрозорість (0% - 100%):
 watermark.selectText.8=Тип водяного знаку:
 watermark.selectText.9=Зображення водяного знаку:
@@ -1263,6 +1263,11 @@ splitByChapters.desc.3=Include Metadata: If checked, the original PDF's metadata
 splitByChapters.desc.4=Allow Duplicates: If checked, allows multiple bookmarks on the same page to create separate PDFs.
 splitByChapters.submit=Split PDF

+#File Chooser
+fileChooser.click=Click
+fileChooser.or=or
+fileChooser.dragAndDrop=Drag & Drop
+fileChooser.hoveredDragAndDrop=Drag & Drop file(s) here

 #release notes
 releases.footer=Releases
--- a/src/main/resources/messages_vi_VN.properties
+++ b/src/main/resources/messages_vi_VN.properties
@@ -1263,6 +1263,11 @@ splitByChapters.desc.3=Include Metadata: If checked, the original PDF's metadata
 splitByChapters.desc.4=Allow Duplicates: If checked, allows multiple bookmarks on the same page to create separate PDFs.
 splitByChapters.submit=Split PDF

+#File Chooser
+fileChooser.click=Click
+fileChooser.or=or
+fileChooser.dragAndDrop=Drag & Drop
+fileChooser.hoveredDragAndDrop=Drag & Drop file(s) here

 #release notes
 releases.footer=Releases
--- a/src/main/resources/messages_zh_CN.properties
+++ b/src/main/resources/messages_zh_CN.properties
@@ -1263,6 +1263,11 @@ splitByChapters.desc.3=Include Metadata: If checked, the original PDF's metadata
 splitByChapters.desc.4=Allow Duplicates: If checked, allows multiple bookmarks on the same page to create separate PDFs.
 splitByChapters.submit=Split PDF

+#File Chooser
+fileChooser.click=Click
+fileChooser.or=or
+fileChooser.dragAndDrop=Drag & Drop
+fileChooser.hoveredDragAndDrop=Drag & Drop file(s) here

 #release notes
 releases.footer=Releases
--- a/src/main/resources/messages_zh_TW.properties
+++ b/src/main/resources/messages_zh_TW.properties
@@ -1056,8 +1056,8 @@ watermark.selectText.1=選擇要新增浮水印的 PDF：
 watermark.selectText.2=浮水印文字：
 watermark.selectText.3=字型大小：
 watermark.selectText.4=旋轉（0-360）：
-watermark.selectText.5=widthSpacer（每個浮水印之間的水平間距）：
-watermark.selectText.6=heightSpacer（每個浮水印之間的垂直間距）：
+watermark.selectText.5=Width Spacer（每個浮水印之間的水平間距）：
+watermark.selectText.6=Height Spacer（每個浮水印之間的垂直間距）：
 watermark.selectText.7=不透明度（0% - 100%）：
 watermark.selectText.8=浮水印類型：
 watermark.selectText.9=浮水印影像：
@@ -1263,6 +1263,11 @@ splitByChapters.desc.3=包含中繼資料：如果勾選，原始 PDF 的中繼
 splitByChapters.desc.4=允許重複：如果勾選，允許同一頁面上的多個書籤建立獨立的 PDF。
 splitByChapters.submit=分割 PDF

+#File Chooser
+fileChooser.click=Click
+fileChooser.or=or
+fileChooser.dragAndDrop=Drag & Drop
+fileChooser.hoveredDragAndDrop=Drag & Drop file(s) here

 #release notes
 releases.footer=Releases
--- a/src/main/resources/static/css/fileSelect.css
+++ b/src/main/resources/static/css/fileSelect.css
@@ -1,10 +1,221 @@
+.custom-file-chooser {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+
+  min-height: 55px;
+  border-radius: 1rem;
+  --selected-files-display: none;
+}
+
+.input-container {
+  position: relative;
+  border-radius: 1rem;
+  border: 1px dashed rgb(105, 116, 134);
+
+  column-gap: 7px;
+  row-gap: 7px;
+  height: 150px;
+  width: 100%;
+
+  --overlay-display: none;
+  transition: background-color 0.5s linear;
+}
+
+.input-container:hover {
+  outline: none;
+  border: none;
+  background-color: var(--md-sys-color-surface-container-low);
+
+ -webkit-transition:  box-shadow 1s ease, background-color 2s linear;
+ -moz-transition:  box-shadow 1s ease, background-color 2s linear;
+ -o-transition:  box-shadow 1s ease, background-color 2s linear;
+ -ms-transition: box-shadow 1s ease, background-color 2s linear;
+ transition: box-shadow 1s ease, background-color 2s linear;
+
+ box-shadow: 0 0 10px rgb(105, 116, 134);
+ cursor: pointer;
+}
+
+.input-container * {
+  user-select: none;
+  pointer-events: none;
+}
+
+
+.input-container::before {
+  display: var(--overlay-display);
+  position: absolute;
+
+  content: '';
+
+  top: 0;
+  left: 0;
+
+  height: 100%;
+  width: 100%;
+
+  background-color: var(--md-sys-color-surface);
+  z-index: 1;
+
+  white-space: pre;
+  border-radius: 1rem;
+}
+
+.input-container::after {
+  display: var(--overlay-display);
+  position: absolute;
+
+  content: attr(data-text);
+  font-size: 0.9rem;
+  font-weight: 550;
+  color: var(--md-sys-color-on-surface);
+
+  background-color: transparent;
+
+  min-width: 150px;
+
+  top: 50%;
+  left: 50%;
+
+  transform: translateX(-50%) translateY(-50%);
+  text-align: center;
+
+  z-index: 2;
+}
+
+input[type="file"] {
+  display: none;
+}
+
+.input-container div:nth-of-type(2) {
+  color: var(--md-sys-color-on-surface);
+}
+
+.input-container div:nth-of-type(1), .input-container div:nth-of-type(3) {
+  color: var(--md-sys-color-on-surface);
+  font-size: 16px;
+  font-weight: bold;
+}
+
+.file-input-btn {
+  display: inline-block;
+
+  border: 1px solid #ccc;
+  padding: 6px 12px;
+  cursor: pointer;
+
+  color: #212529;
+  font-size: 1rem;
+  border-radius: 3rem;
+
+  background-color: #DDE0E3;
+}
+
+.small-file-container {
+  padding-top: 1px;
+  position: relative;
+  row-gap: 1px;
+  height: 60px;
+  width: 60px;
+}
+
+.file-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 30px;
+  width: 30px;
+}
+
+.file-icon * {
+  height: inherit;
+  width: inherit;
+}
+
+.file-info {
+  min-width: 0;
+}
+
+.file-info > div:nth-child(1) {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--md-sys-color-on-surface);
+
+  max-width: 60px;
+  font-size: 0.75rem;
+}
+
+.file-info > div:nth-child(2) {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: grey;
+
+  max-width: 60px;
+  font-size: 10px;
+}
+
+.remove-selected-file {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  position: absolute;
+  height: 15px;
+  width: 15px;
+
+  right: 10px;
+  top: -5px;
+}
+
+.remove-selected-file * {
+  overflow: hidden;
+  height: inherit;
+  width: inherit;
+  z-index: 3;
+  pointer-events: none;
+  user-select: none;
+}
+
+.remove-selected-file:after {
+  content: '';
+  position: absolute;
+
+  left: 1;
+
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+
+  background-color: white;
+  z-index: 2;
+
+  user-select: none;
+  pointer-events: none;
+}
+
+.remove-selected-file:hover {
+  cursor: pointer;
+}
+
 .custom-file-label {
  padding-right: 90px;
 }

 .selected-files {
-  margin-top: 10px;
-  max-height: 150px;
-  overflow-y: auto;
+  display: var(--selected-files-display);
+  padding-left: 5px;
+  padding-right: 3px;
+  padding-top: 15px;
+  padding-bottom: 15px;
+
+  flex: 1;
  white-space: pre-wrap;
+
+  row-gap: 12px;
+  column-gap: 5px;
+
+  border-radius: 1rem;
+  border: 1px solid rgb(105, 116, 134, 0.5);
 }
--- a/src/main/resources/static/js/file-icon-factory.js
+++ b/src/main/resources/static/js/file-icon-factory.js
@@ -0,0 +1,52 @@
+class FileIconFactory {
+  static createFileIcon(fileExtension) {
+    let ext = fileExtension.toLowerCase();
+    switch (ext) {
+      case "pdf":
+        return this.createPDFIcon();
+      case "csv":
+        return this.createCSVIcon();
+      case "jpe":
+      case "jpg":
+      case "jpeg":
+      case "gif":
+      case "png":
+      case "bmp":
+      case "ico":
+      case "svg":
+      case "svgz":
+      case "tif":
+      case "tiff":
+      case "ai":
+      case "drw":
+      case "pct":
+      case "psp":
+      case "xcf":
+      case "psd":
+      case "raw":
+      case "webp":
+      case "heic":
+        return this.createImageIcon();
+      default:
+        return this.createUnknownFileIcon();
+    }
+  }
+
+  static createPDFIcon() {
+    return `
+    <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-filetype-pdf" viewBox="0 0 16 16">
+        <path fill-rule="evenodd" d="M14 4.5V14a2 2 0 0 1-2 2h-1v-1h1a1 1 0 0 0 1-1V4.5h-2A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v9H2V2a2 2 0 0 1 2-2h5.5zM1.6 11.85H0v3.999h.791v-1.342h.803q.43 0 .732-.173.305-.175.463-.474a1.4 1.4 0 0 0 .161-.677q0-.375-.158-.677a1.2 1.2 0 0 0-.46-.477q-.3-.18-.732-.179m.545 1.333a.8.8 0 0 1-.085.38.57.57 0 0 1-.238.241.8.8 0 0 1-.375.082H.788V12.48h.66q.327 0 .512.181.185.183.185.522m1.217-1.333v3.999h1.46q.602 0 .998-.237a1.45 1.45 0 0 0 .595-.689q.196-.45.196-1.084 0-.63-.196-1.075a1.43 1.43 0 0 0-.589-.68q-.396-.234-1.005-.234zm.791.645h.563q.371 0 .609.152a.9.9 0 0 1 .354.454q.118.302.118.753a2.3 2.3 0 0 1-.068.592 1.1 1.1 0 0 1-.196.422.8.8 0 0 1-.334.252 1.3 1.3 0 0 1-.483.082h-.563zm3.743 1.763v1.591h-.79V11.85h2.548v.653H7.896v1.117h1.606v.638z"/>
+    </svg>
+      `;
+  }
+
+  static createImageIcon() {
+    return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor"><path d="M216-144q-30 0-51-21.5T144-216v-528q0-29 21-50.5t51-21.5h528q30 0 51 21.5t21 50.5v528q0 29-21 50.5T744-144H216Zm48-144h432L552-480 444-336l-72-96-108 144Z"/></svg>`;
+  }
+
+  static createUnknownFileIcon() {
+    return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor"><path d="M263.72-96Q234-96 213-117.15T192-168v-624q0-29.7 21.15-50.85Q234.3-864 264-864h312l192 192v504q0 29.7-21.16 50.85Q725.68-96 695.96-96H263.72ZM528-624h168L528-792v168Z"/></svg>`;
+  }
+}
+
+export default FileIconFactory;
--- a/src/main/resources/static/js/file-utils.js
+++ b/src/main/resources/static/js/file-utils.js
@@ -0,0 +1,31 @@
+class FileUtils {
+  static extractFileExtension(filename) {
+    if (!filename || filename.trim().length <= 0) return "";
+    let trimmedName = filename.trim();
+    return trimmedName.substring(trimmedName.lastIndexOf(".") + 1);
+  }
+
+  static transformFileSize(size) {
+    if (!size) return `0Bs`;
+    let oneKB = 1024;
+    let oneMB = oneKB * 1024;
+    let oneGB = oneMB * 1024;
+    let oneTB = oneGB * 1024;
+
+    if (size < oneKB) return `${this._toFixed(size)}Bs`;
+    else if (oneKB <= size && size < oneMB) return `${this._toFixed(size / oneKB)}KBs`;
+    else if (oneMB <= size && size < oneGB) return `${this._toFixed(size / oneMB)}MBs`;
+    else if (oneGB <= size && size < oneTB) return `${this._toFixed(size / oneGB)}GBs`;
+    else return `${this._toFixed(size / oneTB)}TBs`;
+  }
+
+  static _toFixed(val, digits = 1) {
+    // Return value without ending 0s after decimal point
+    // Example: if res == 145.0 then return 145, else if 145.x (where x != 0) return 145.x
+    let res = val.toFixed(digits);
+    let resRounded = (res|0);
+    return res == resRounded ? resRounded : res;
+  }
+}
+
+export default FileUtils;
--- a/src/main/resources/static/js/fileInput.js
+++ b/src/main/resources/static/js/fileInput.js
@@ -1,72 +1,92 @@
-document.addEventListener("DOMContentLoaded", function () {
-  document.querySelectorAll(".custom-file-chooser").forEach(setupFileInput);
-});
+import FileIconFactory from "./file-icon-factory.js";
+import FileUtils from "./file-utils.js";
+import UUID from './uuid.js';
+
+let isScriptExecuted = false;
+if (!isScriptExecuted) {
+  isScriptExecuted = true;
+  document.addEventListener("DOMContentLoaded", function () {
+    document.querySelectorAll(".custom-file-chooser").forEach(setupFileInput);
+  });
+}
+

 function setupFileInput(chooser) {
  const elementId = chooser.getAttribute("data-bs-element-id");
  const filesSelected = chooser.getAttribute("data-bs-files-selected");
  const pdfPrompt = chooser.getAttribute("data-bs-pdf-prompt");
+  const inputContainerId = chooser.getAttribute('data-bs-element-container-id');
+
+  let inputContainer = document.getElementById(inputContainerId);

  let allFiles = [];
  let overlay;
  let dragCounter = 0;

+  inputContainer.addEventListener('click', (e) => {
+    let inputBtn = document.getElementById(elementId);
+    inputBtn.click();
+  })
+
  const dragenterListener = function () {
    dragCounter++;
    if (!overlay) {
-      overlay = document.createElement("div");
-      overlay.style.position = "fixed";
-      overlay.style.top = 0;
-      overlay.style.left = 0;
-      overlay.style.width = "100%";
-      overlay.style.height = "100%";
-      overlay.style.background = "rgba(0, 0, 0, 0.5)";
-      overlay.style.color = "#fff";
-      overlay.style.zIndex = "1000";
-      overlay.style.display = "flex";
-      overlay.style.alignItems = "center";
-      overlay.style.justifyContent = "center";
-      overlay.style.pointerEvents = "none";
-      overlay.innerHTML = "<p>Drop files anywhere to upload</p>";
-      document.getElementById("content-wrap").appendChild(overlay);
+      // Show overlay by removing display: none from pseudo elements (::before and ::after)
+      inputContainer.style.setProperty('--overlay-display', "''");
+      overlay = true;
    }
  };

  const dragleaveListener = function () {
    dragCounter--;
    if (dragCounter === 0) {
-      if (overlay) {
-        overlay.remove();
-        overlay = null;
-      }
+      hideOverlay();
    }
  };

+  function hideOverlay() {
+    if (!overlay) return;
+    inputContainer.style.setProperty('--overlay-display', 'none');
+    overlay = false;
+  }
+
  const dropListener = function (e) {
    e.preventDefault();
+    // Drag and Drop shall only affect the target file chooser
+    if (e.target !== inputContainer) {
+      hideOverlay();
+      dragCounter = 0;
+      return;
+    }
+
    const dt = e.dataTransfer;
    const files = dt.files;

-    for (let i = 0; i < files.length; i++) {
-      allFiles.push(files[i]);
+    const fileInput = document.getElementById(elementId);
+    if (fileInput?.hasAttribute("multiple")) {
+      pushFileListTo(files, allFiles);
+    } else if (fileInput) {
+      allFiles = [files[0]];
    }

    const dataTransfer = new DataTransfer();
    allFiles.forEach((file) => dataTransfer.items.add(file));

-    const fileInput = document.getElementById(elementId);
    fileInput.files = dataTransfer.files;

-    if (overlay) {
-      overlay.remove();
-      overlay = null;
-    }
+    hideOverlay();

    dragCounter = 0;

    fileInput.dispatchEvent(new CustomEvent("change", { bubbles: true, detail: {source: 'drag-drop'} }));
  };

+  function pushFileListTo(fileList, container) {
+    for (let file of fileList) {
+      container.push(file);
+    }
+  }
+
  ["dragenter", "dragover", "dragleave", "drop"].forEach((eventName) => {
    document.body.addEventListener(eventName, preventDefaults, false);
  });
@@ -83,16 +103,20 @@ function setupFileInput(chooser) {
  $("#" + elementId).on("change", function (e) {
    let element = e.target;
    const isDragAndDrop = e.detail?.source == 'drag-drop';
-    
+
    if (element instanceof HTMLInputElement && element.hasAttribute("multiple")) {
      allFiles = isDragAndDrop ? allFiles : [... allFiles, ... element.files];
    } else {
      allFiles = Array.from(isDragAndDrop ? allFiles : [element.files[0]]);
    }

+    allFiles = allFiles.map(file => {
+      if (!file.uniqueId) file.uniqueId = UUID.uuidv4();
+      return file;
+    });
+
    if (!isDragAndDrop) {
-        let dataTransfer = new DataTransfer();
-        allFiles.forEach(file => dataTransfer.items.add(file));
+        let dataTransfer = toDataTransfer(allFiles);
        element.files = dataTransfer.files;
    }

@@ -100,28 +124,109 @@ function setupFileInput(chooser) {
    this.dispatchEvent(new CustomEvent("file-input-change", { bubbles: true }));
 });

+  function toDataTransfer(files) {
+    let dataTransfer = new DataTransfer();
+    files.forEach(file => dataTransfer.items.add(file));
+    return dataTransfer;
+  }
+
  function handleFileInputChange(inputElement) {
    const files = allFiles;
-    const fileNames = files.map((f) => f.name);
-    const selectedFilesContainer = $(inputElement).siblings(".selected-files");
+    showOrHideSelectedFilesContainer(files);
+
+    const filesInfo = files.map((f) => ({name: f.name, size: f.size, uniqueId: f.uniqueId}));
+
+    const selectedFilesContainer = $(inputContainer).siblings(".selected-files");
    selectedFilesContainer.empty();
-    fileNames.forEach((fileName) => {
-      selectedFilesContainer.append("<div>" + fileName + "</div>");
+    filesInfo.forEach((info) => {
+      let fileContainerClasses = 'small-file-container d-flex flex-column justify-content-center align-items-center';
+
+      let fileContainer = document.createElement('div');
+      $(fileContainer).addClass(fileContainerClasses);
+      $(fileContainer).attr('id', info.uniqueId);
+
+      let fileIconContainer = createFileIconContainer(info);
+
+      let fileInfoContainer = createFileInfoContainer(info);
+
+      let removeBtn = document.createElement('div');
+      removeBtn.classList.add('remove-selected-file');
+
+      let removeBtnIconHTML = `<svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px" fill="#C02223"><path d="m339-288 141-141 141 141 51-51-141-141 141-141-51-51-141 141-141-141-51 51 141 141-141 141 51 51ZM480-96q-79 0-149-30t-122.5-82.5Q156-261 126-331T96-480q0-80 30-149.5t82.5-122Q261-804 331-834t149-30q80 0 149.5 30t122 82.5Q804-699 834-629.5T864-480q0 79-30 149t-82.5 122.5Q699-156 629.5-126T480-96Z"/></svg>`;
+      $(removeBtn).append(removeBtnIconHTML);
+      $(removeBtn).attr('data-file-id', info.uniqueId).click(removeFileListener);
+
+      $(fileContainer).append(fileIconContainer);
+      $(fileContainer).append(fileInfoContainer);
+      $(fileContainer).append(removeBtn);
+
+      selectedFilesContainer.append(fileContainer);
    });
-    if (fileNames.length === 1) {
-      $(inputElement).siblings(".custom-file-label").addClass("selected").html(fileNames[0]);
-    } else if (fileNames.length > 1) {
-      $(inputElement)
-        .siblings(".custom-file-label")
-        .addClass("selected")
-        .html(fileNames.length + " " + filesSelected);
-    } else {
-      $(inputElement).siblings(".custom-file-label").addClass("selected").html(pdfPrompt);
-    }
+
+    showOrHideSelectedFilesContainer(filesInfo);
  }
+
+  function showOrHideSelectedFilesContainer(files) {
+    if (files && files.length > 0)
+      chooser.style.setProperty('--selected-files-display', 'flex');
+    else
+    chooser.style.setProperty('--selected-files-display', 'none');
+  }
+
+  function removeFileListener(e) {
+    const fileId = (e.target).getAttribute('data-file-id');
+
+    let inputElement = document.getElementById(elementId);
+    removeFileById(fileId, inputElement);
+
+    showOrHideSelectedFilesContainer(allFiles);
+
+    inputElement.dispatchEvent(new CustomEvent("file-input-change", { bubbles: true }));
+  }
+
+  function removeFileById(fileId, inputElement) {
+    let fileContainer = document.getElementById(fileId);
+    fileContainer.remove();
+
+    allFiles = allFiles.filter(v => v.uniqueId != fileId);
+    let dataTransfer = toDataTransfer(allFiles);
+
+    if (inputElement) inputElement.files = dataTransfer.files;
+  }
+
+  function createFileIconContainer(info) {
+    let fileIconContainer = document.createElement('div');
+    fileIconContainer.classList.add('file-icon');
+
+    // Add icon based on the extension
+    let fileExtension = FileUtils.extractFileExtension(info.name);
+    let fileIcon = FileIconFactory.createFileIcon(fileExtension);
+
+    $(fileIconContainer).append(fileIcon);
+    return fileIconContainer;
+  }
+
+  function createFileInfoContainer(info) {
+    let fileInfoContainer = document.createElement("div");
+    let fileInfoContainerClasses = 'file-info d-flex flex-column align-items-center justify-content-center';
+
+    $(fileInfoContainer).addClass(fileInfoContainerClasses);
+
+    $(fileInfoContainer).append(
+      `<div title="${info.name}">${info.name}</div>`
+    );
+    let fileSizeWithUnits = FileUtils.transformFileSize(info.size);
+    $(fileInfoContainer).append(
+      `<div title="${info.size}">${fileSizeWithUnits}</div>`
+    );
+    return fileInfoContainer;
+  }
+
  //Listen for event of file being removed and the filter it out of the allFiles array
  document.addEventListener("fileRemoved", function (e) {
-    const fileName = e.detail;
-    allFiles = allFiles.filter(file => file.name !== fileName);
+    const fileId = e.detail;
+    let inputElement = document.getElementById(elementId);
+    removeFileById(fileId, inputElement);
+    showOrHideSelectedFilesContainer(allFiles);
  });
 }
--- a/src/main/resources/static/js/merge.js
+++ b/src/main/resources/static/js/merge.js
@@ -29,6 +29,7 @@ async function displayFiles(files) {
    // Create filename div and set textContent to sanitize
    const fileNameDiv = document.createElement("div");
    fileNameDiv.className = "filename";
+    fileNameDiv.setAttribute("data-file-id", files[i].uniqueId);
    fileNameDiv.textContent = files[i].name;

    // Create page info div and set textContent to sanitize
@@ -110,11 +111,13 @@ function attachMoveButtons() {
      event.preventDefault();
      var parent = this.closest(".list-group-item");
      //Get name of removed file
-      var fileName = parent.querySelector(".filename").innerText;
+      let filenameNode = parent.querySelector(".filename");
+      var fileName = filenameNode.innerText;
+      const fileId = filenameNode.getAttribute("data-file-id");
      parent.remove();
      updateFiles();
      //Dispatch a custom event with the name of the removed file
-      var event = new CustomEvent("fileRemoved", { detail: fileName });
+      var event = new CustomEvent("fileRemoved", { detail: fileId });
      document.dispatchEvent(event);
    });
  }
--- a/src/main/resources/static/js/uuid.js
+++ b/src/main/resources/static/js/uuid.js
@@ -0,0 +1,9 @@
+class UUID {
+  static uuidv4() {
+    return "10000000-1000-4000-8000-100000000000".replace(/[018]/g, c =>
+      (+c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> +c / 4).toString(16)
+    );
+  }
+}
+
+export default UUID;
--- a/src/main/resources/templates/crop.html
+++ b/src/main/resources/templates/crop.html
@@ -22,7 +22,7 @@
                <input id="y" type="hidden" name="y">
                <input id="width" type="hidden" name="width">
                <input id="height" type="hidden" name="height">
-                <button type="submit" class="btn btn-primary" th:text="#{crop.submit}"></button>
+                <button id="submitBtn" type="submit" class="btn btn-primary" th:text="#{crop.submit}"></button>
              </form>
              <div id="canvasesContainer" style="position: relative; margin: 20px 0; width: auto;">
                <canvas id="cropPdfCanvas" style="width: 100%"></canvas>
--- a/src/main/resources/templates/fragments/common.html
+++ b/src/main/resources/templates/fragments/common.html
@@ -204,11 +204,17 @@
                <script type="module" th:src="@{'/pdfjs-legacy/pdf.mjs'}"></script>
                <script th:src="@{'/js/downloader.js'}"></script>

-                <div class="custom-file-chooser" th:attr="data-bs-unique-id=${name}, data-bs-element-id=${name+'-input'}, data-bs-files-selected=#{filesSelected}, data-bs-pdf-prompt=#{pdfPrompt}">
-                  <div class="mb-3">
-                    <input type="file" class="form-control" th:name="${name}" th:id="${name}+'-input'" th:accept="${accept}" th:attr="multiple=${!disableMultipleFiles}" th:required="${notRequired} ? null : 'required'">
+                <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">
+                        <input type="file" class="form-control" th:name="${name}" th:id="${name}+'-input'" th:accept="${accept}" th:attr="multiple=${!disableMultipleFiles}" th:required="${notRequired} ? null : 'required'">
+                        Browse
+                      </label>
+                      <div th:text="#{fileChooser.click}"></div>
+                      <div th:text="#{fileChooser.or}"></div>
+                      <div th:text="#{fileChooser.dragAndDrop}"></div>
                  </div>
-                  <div class="selected-files"></div>
+                    <div class="selected-files flex-wrap"></div>
                </div>

                <div class="progressBarContainer" style="display: none; position: relative;">
@@ -218,5 +224,5 @@
                    </div>
                  </div>
                </div>
-                <script th:src="@{'/js/fileInput.js'}"></script>
+                <script th:src="@{'/js/fileInput.js'}" type="module"></script>
 </th:block>
--- a/src/main/resources/templates/misc/change-metadata.html
+++ b/src/main/resources/templates/misc/change-metadata.html
@@ -164,13 +164,13 @@
                    keyInput.type = "text";
                    keyInput.placeholder = 'Key';
                    keyInput.className = "form-control";
-                    keyInput.name = "customKey" + count;
+                    keyInput.name = `allRequestParams[customKey${count}]`;

                    const valueInput = document.createElement("input");
                    valueInput.type = "text";
                    valueInput.placeholder = 'Value';
                    valueInput.className = "form-control";
-                    valueInput.name = "customValue" + count;
+                    valueInput.name = `allRequestParams[customValue${count}]`;
                    count = count + 1;

                    const formGroup = document.createElement("div");
Author	SHA1	Message	Date
Anthony Stirling	32e46eeb73	Update build.gradle	2024-12-03 10:54:07 +00:00
Omar Ahmed Hassan	b7da84d257	Fix deserialization failure in Change Metadata (#2382 ) * Fix deserialization failure from String to Map Fix deserialization failure from String to Map that caused the following exception: Resolved [org.springframework.web.bind.MethodArgumentNotValidException: Validation failed for argument [0] in public org.springframework.http.ResponseEntity<byte[]> stirling.software.SPDF.controller.api.misc.MetadataController.metadata(stirling.software.SPDF.model.api.misc.MetadataRequest) throws java.io.IOException: [Field error in object 'metadataRequest' on field 'allRequestParams': rejected value [{"customKey1" : "YourCustomKey", "customKeyValue1", "YourCustomValue"}]; codes [typeMismatch.metadataRequest.allRequestParams,typeMismatch.allRequestParams,typeMismatch.java.util.Map,typeMismatch]; * Fix form binding for dynamic Map entries in Change Metadata - Implemented support for dynamic key-value inputs in Change Metadata form using proper `name` attributes for Map (`allRequestParams`) binding. - Fix form binding for dynamic Map (`allRequestParams`) entries in Change Metadata as the `allRequestParams` (Map name) was being sent as an empty map.	2024-12-03 08:28:34 +00:00
github-actions[bot]	1c1ead5d62	📝 Update README: Translation Progress Table (#2381 ) 📝 Sync README > Made via sync_files.yml Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2024-12-02 19:25:16 +00:00
albanobattistella	6ff53aa5b3	Update messages_it_IT.properties (#2380 )	2024-12-02 18:59:05 +00:00
github-actions[bot]	8d60b08cd9	📝 Update README: Translation Progress Table (#2379 ) 📝 Sync README > Made via sync_files.yml Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2024-12-02 18:32:07 +00:00
github-actions[bot]	64cf5167c0	Update translation files (#2378 ) Signed-off-by: GitHub Action <action@github.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>	2024-12-02 18:18:16 +00:00
Omar Ahmed Hassan	de4637e8d4	Fix drag and drop area for file choosers by adding separate ones (#2368 ) * Add separate drag and drop area for file choosers - Add separate drag and drop area for file choosers ### Why? Previously, when there were multiple file choosers in the same page, if you attempted to drag and drop any files, they would be added to both file choosers as it was designed at first to handle 1 file chooser present, now that we have multiple ones, it is necessary to adapt our design to match the changing functionality. ### Can you not preserve the old overlay when there's only one file chooser present? Yes, we can, but imagine as a user, you try to drag and drop a file in one page and the fields turn into drag and drop areas then you go to another page and try to drag and drop again but you encounter the old overlay instead, as a user you might get confused and ask yourself "What changed?" or if a user is telling another user the steps to drag and drop files and he didn't know about this case, then it would still be confusing, thus consistency is preferred in this case. * Update file chooser UI * Add support for listing and removing selected files and their file icons - Selected files are listed below the file chooser in a selected files container. - Users can now remove uploaded/selected files. - Hide selected files container/box unless there are files selected/uploaded. - Add separate overlay for each drag & drop area. ## FAQ: - Why did you assign a unique id to each file? isn't the filename enough? = Because a user might upload multiple files with the same name, if the user wanted to remove one of them, how would we differentiate between them? we won't be able to unless we assign an identifier, you might argue "we remove based on the filename and size", then what if the user uploaded the same file more than once (intentionally), then we would accidentally remove all the files even though that is not what the user wanted, so going with unique ID approach would prevent this issue/problem from occurring in the first place. * Rename remove-file css class to remove-selected-file - Rename remove-file css class to remove-selected-file to avoid css conflict with remove-file in merge.css * Use input element to dispatch event on file removal Use the correct element to dispatch "file-input-change" (input element is the correct one). * Adapt file chooser UI to themes - Adapt file chooser UI to themes by adjusting their font colors and background colors. - Make text more visible in overlay by increasing the font size by 0.1rem and setting font weight to 550. * Remove extra overlay border - Removing overlay's border as it is unnecessary and only causing a double border issue on the file input container. * Remove Browse button, highlight file chooser and make it clickable - Remove browse button. - Make the entire file chooser container clickable. - Add glowing effect on hover for file chooser. - Change color of file chooser on hover. * Replace crypto.randomUUID() with UUID.uuidv4() - Replace crypto.randomUUID() with UUID.uuidv4() as crypto.randomUUID() is only supported in secured contexts such as localhost 127.0.0.1 and over HTTPS * Fix merge file removal not being reflected in file chooser - Files removed from the list in merge page would now be reflected in the file chooser's container. * Make inputElement optional in removeFileById - Make inputElement optional in removeFileById, this way we could control changing inputElements files. * Add translation support to file chooser --------- Co-authored-by: Anthony Stirling <77850077+Frooodle@users.noreply.github.com>	2024-12-02 18:10:12 +00:00
Sai Kumar	3c0a8071dc	added support for new line break in stampController (#2370 ) added support for new line in stampController Co-authored-by: Anthony Stirling <77850077+Frooodle@users.noreply.github.com>	2024-12-02 17:48:19 +00:00
Omar Ahmed Hassan	04ccdf6f76	Fix: prevent fileInput.js from adding event listeners more than once (#2365 ) Fix fileInput.js adding event listeners more than once - Fix a bug that caused fileInput.js to add event listeners more than once per HTML file as it's included in fileSelector fragment in fragments/common.html thus it's being loaded N times where N is the number of file selectors / custom file chooser / file input elements per HTML file, which resulted in each event actions being executed N times as well, which was prevalent in drag and drop operations such as dragging and dropping a file called y.png, it would be duplicated N times (as in /sign path).	2024-12-02 17:41:11 +00:00
Omar Ahmed Hassan	db02fba31f	Fix translations for watermark spacers (#2369 ) Fix translations by adding a space between width/height and spacer and capitalize the first letter	2024-12-02 17:01:19 +00:00
Omar Ahmed Hassan	5b6f649e4e	Fix submit button in crop by adding id (#2374 ) - Add missing ID to submit button in crop page.	2024-12-02 10:40:46 +00:00
Omar Ahmed Hassan	de23bb702c	Fix allowing multiple files to be dropped onto a single file input (#2359 ) Fix a bug that allowed multiple files to be dropped onto a single-file input element - Fix a bug that allowed multiple files to be dropped onto a single-file input element by accepting only the first file.	2024-11-29 17:31:14 +00:00