Feature/2198/multitool multi select move pages (#2294)

* Multitool - Select multiple pages for rotation tool * Multitool multi select delete feature * Multitool multi select UI improvements and big fixes * Multitool multi select select all and UI improvements * Multi tool multi select, download selected, clean up and bug fixes * Groundwork for multiselect drag and drop * Multi select drag and drop finalised * Update translation files Signed-off-by: GitHub Action <action@github.com> * Turn off select mode after multidrag --------- Signed-off-by: GitHub Action <action@github.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
2025-03-20 00:17:10 +01:00 · 2024-11-22 11:39:22 +00:00 · 2024-11-22 11:39:22 +00:00 · 0e602153f3
commit 0e602153f3
parent 597619740a
42 changed files with 165 additions and 71 deletions
--- a/src/main/java/stirling/software/SPDF/controller/api/security/CertSignController.java
+++ b/src/main/java/stirling/software/SPDF/controller/api/security/CertSignController.java
@ -98,10 +98,10 @@ public class CertSignController {

        public CreateSignature(KeyStore keystore, char[] pin)
                throws KeyStoreException,
-                        UnrecoverableKeyException,
-                        NoSuchAlgorithmException,
-                        IOException,
-                        CertificateException {
+                UnrecoverableKeyException,
+                NoSuchAlgorithmException,
+                IOException,
+                CertificateException {
            super(keystore, pin);
            ClassPathResource resource = new ClassPathResource("static/images/signature.png");
            try (InputStream is = resource.getInputStream()) {
@ -160,8 +160,7 @@ public class CertSignController {
                        extState.setNonStrokingAlphaConstant(0.5f);
                        cs.setGraphicsStateParameters(extState);
                        cs.transform(Matrix.getScaleInstance(0.08f, 0.08f));
-                        PDImageXObject img =
-                                PDImageXObject.createFromFileByExtension(logoFile, doc);
+                        PDImageXObject img = PDImageXObject.createFromFileByExtension(logoFile, doc);
                        cs.drawImage(img, 100, 0);
                        cs.restoreGraphicsState();
                    }
@ -209,10 +208,7 @@ public class CertSignController {
    }

    @PostMapping(consumes = "multipart/form-data", value = "/cert-sign")
-    @Operation(
-            summary = "Sign PDF with a Digital Certificate",
-            description =
-                    "This endpoint accepts a PDF file, a digital certificate and related information to sign the PDF. It then returns the digitally signed PDF file. Input:PDF Output:PDF Type:SISO")
+    @Operation(summary = "Sign PDF with a Digital Certificate", description = "This endpoint accepts a PDF file, a digital certificate and related information to sign the PDF. It then returns the digitally signed PDF file. Input:PDF Output:PDF Type:SISO")
    public ResponseEntity<byte[]> signPDFWithCert(@ModelAttribute SignPDFWithCertRequest request)
            throws Exception {
        MultipartFile pdf = request.getFileInput();
@ -242,7 +238,7 @@ public class CertSignController {
                PrivateKey privateKey = getPrivateKeyFromPEM(privateKeyFile.getBytes(), password);
                Certificate cert = (Certificate) getCertificateFromPEM(certFile.getBytes());
                ks.setKeyEntry(
-                        "alias", privateKey, password.toCharArray(), new Certificate[] {cert});
+                        "alias", privateKey, password.toCharArray(), new Certificate[] { cert });
                break;
            case "PKCS12":
                ks = KeyStore.getInstance("PKCS12");
@ -314,22 +310,19 @@ public class CertSignController {

    private PrivateKey getPrivateKeyFromPEM(byte[] pemBytes, String password)
            throws IOException, OperatorCreationException, PKCSException {
-        try (PEMParser pemParser =
-                new PEMParser(new InputStreamReader(new ByteArrayInputStream(pemBytes)))) {
+        try (PEMParser pemParser = new PEMParser(new InputStreamReader(new ByteArrayInputStream(pemBytes)))) {
            Object pemObject = pemParser.readObject();
            JcaPEMKeyConverter converter = new JcaPEMKeyConverter().setProvider("BC");
            PrivateKeyInfo pkInfo;
            if (pemObject instanceof PKCS8EncryptedPrivateKeyInfo) {
-                InputDecryptorProvider decProv =
-                        new JceOpenSSLPKCS8DecryptorProviderBuilder().build(password.toCharArray());
+                InputDecryptorProvider decProv = new JceOpenSSLPKCS8DecryptorProviderBuilder()
+                        .build(password.toCharArray());
                pkInfo = ((PKCS8EncryptedPrivateKeyInfo) pemObject).decryptPrivateKeyInfo(decProv);
            } else if (pemObject instanceof PEMEncryptedKeyPair) {
-                PEMDecryptorProvider decProv =
-                        new JcePEMDecryptorProviderBuilder().build(password.toCharArray());
-                pkInfo =
-                        ((PEMEncryptedKeyPair) pemObject)
-                                .decryptKeyPair(decProv)
-                                .getPrivateKeyInfo();
+                PEMDecryptorProvider decProv = new JcePEMDecryptorProviderBuilder().build(password.toCharArray());
+                pkInfo = ((PEMEncryptedKeyPair) pemObject)
+                        .decryptKeyPair(decProv)
+                        .getPrivateKeyInfo();
            } else {
                pkInfo = ((PEMKeyPair) pemObject).getPrivateKeyInfo();
            }
--- a/src/main/resources/messages_ar_AR.properties
+++ b/src/main/resources/messages_ar_AR.properties
@ -952,6 +952,7 @@ multiTool.split=Split
 multiTool.moveLeft=Move Left
 multiTool.moveRight=Move Right
 multiTool.delete=Delete
+multiTool.dragDropMessage=Page(s) Selected

 #multiTool-advert
 multiTool-advert.message=هذه الميزة متوفرة في <a href="{0}">صفحة الأدوات المتعددة</a> لدينا. اطلع عليها للحصول على واجهة مستخدم محسّنة لكل صفحة وميزات إضافية!
--- a/src/main/resources/messages_bg_BG.properties
+++ b/src/main/resources/messages_bg_BG.properties
@ -952,6 +952,7 @@ multiTool.split=Split
 multiTool.moveLeft=Move Left
 multiTool.moveRight=Move Right
 multiTool.delete=Delete
+multiTool.dragDropMessage=Page(s) Selected

 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!
--- a/src/main/resources/messages_ca_CA.properties
+++ b/src/main/resources/messages_ca_CA.properties
@ -952,6 +952,7 @@ multiTool.split=Split
 multiTool.moveLeft=Move Left
 multiTool.moveRight=Move Right
 multiTool.delete=Delete
+multiTool.dragDropMessage=Page(s) Selected

 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!
--- a/src/main/resources/messages_cs_CZ.properties
+++ b/src/main/resources/messages_cs_CZ.properties
@ -952,6 +952,7 @@ multiTool.split=Split
 multiTool.moveLeft=Move Left
 multiTool.moveRight=Move Right
 multiTool.delete=Delete
+multiTool.dragDropMessage=Page(s) Selected

 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!
--- a/src/main/resources/messages_da_DK.properties
+++ b/src/main/resources/messages_da_DK.properties
@ -952,6 +952,7 @@ multiTool.split=Split
 multiTool.moveLeft=Move Left
 multiTool.moveRight=Move Right
 multiTool.delete=Delete
+multiTool.dragDropMessage=Page(s) Selected

 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!
--- a/src/main/resources/messages_de_DE.properties
+++ b/src/main/resources/messages_de_DE.properties
@ -952,6 +952,7 @@ multiTool.split=Split
 multiTool.moveLeft=Move Left
 multiTool.moveRight=Move Right
 multiTool.delete=Delete
+multiTool.dragDropMessage=Page(s) Selected

 #multiTool-advert
 multiTool-advert.message=Diese Funktion ist auch auf unserer <a href="{0}">PDF-Multitool-Seite</a> verfügbar. Probieren Sie sie aus, denn sie bietet eine verbesserte Benutzeroberfläche und zusätzliche Funktionen!
--- a/src/main/resources/messages_el_GR.properties
+++ b/src/main/resources/messages_el_GR.properties
@ -952,6 +952,7 @@ multiTool.split=Split
 multiTool.moveLeft=Move Left
 multiTool.moveRight=Move Right
 multiTool.delete=Delete
+multiTool.dragDropMessage=Page(s) Selected

 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!
--- a/src/main/resources/messages_en_GB.properties
+++ b/src/main/resources/messages_en_GB.properties
@ -952,6 +952,7 @@ multiTool.split=Split
 multiTool.moveLeft=Move Left
 multiTool.moveRight=Move Right
 multiTool.delete=Delete
+multiTool.dragDropMessage=Page(s) Selected

 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!
--- a/src/main/resources/messages_en_US.properties
+++ b/src/main/resources/messages_en_US.properties
@ -952,6 +952,7 @@ multiTool.split=Split
 multiTool.moveLeft=Move Left
 multiTool.moveRight=Move Right
 multiTool.delete=Delete
+multiTool.dragDropMessage=Page(s) Selected

 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!
--- a/src/main/resources/messages_es_ES.properties
+++ b/src/main/resources/messages_es_ES.properties
@ -952,6 +952,7 @@ multiTool.split=Split
 multiTool.moveLeft=Move Left
 multiTool.moveRight=Move Right
 multiTool.delete=Delete
+multiTool.dragDropMessage=Page(s) Selected

 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!
--- a/src/main/resources/messages_eu_ES.properties
+++ b/src/main/resources/messages_eu_ES.properties
@ -952,6 +952,7 @@ multiTool.split=Split
 multiTool.moveLeft=Move Left
 multiTool.moveRight=Move Right
 multiTool.delete=Delete
+multiTool.dragDropMessage=Page(s) Selected

 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!
--- a/src/main/resources/messages_fr_FR.properties
+++ b/src/main/resources/messages_fr_FR.properties
@ -952,6 +952,7 @@ multiTool.split=Split
 multiTool.moveLeft=Move Left
 multiTool.moveRight=Move Right
 multiTool.delete=Delete
+multiTool.dragDropMessage=Page(s) Selected

 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!
--- a/src/main/resources/messages_ga_IE.properties
+++ b/src/main/resources/messages_ga_IE.properties
@ -952,6 +952,7 @@ multiTool.split=Split
 multiTool.moveLeft=Move Left
 multiTool.moveRight=Move Right
 multiTool.delete=Delete
+multiTool.dragDropMessage=Page(s) Selected

 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!
--- a/src/main/resources/messages_hi_IN.properties
+++ b/src/main/resources/messages_hi_IN.properties
@ -952,6 +952,7 @@ multiTool.split=Split
 multiTool.moveLeft=Move Left
 multiTool.moveRight=Move Right
 multiTool.delete=Delete
+multiTool.dragDropMessage=Page(s) Selected

 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!
--- a/src/main/resources/messages_hr_HR.properties
+++ b/src/main/resources/messages_hr_HR.properties
@ -952,6 +952,7 @@ multiTool.split=Split
 multiTool.moveLeft=Move Left
 multiTool.moveRight=Move Right
 multiTool.delete=Delete
+multiTool.dragDropMessage=Page(s) Selected

 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!
--- a/src/main/resources/messages_hu_HU.properties
+++ b/src/main/resources/messages_hu_HU.properties
@ -952,6 +952,7 @@ multiTool.split=Split
 multiTool.moveLeft=Move Left
 multiTool.moveRight=Move Right
 multiTool.delete=Delete
+multiTool.dragDropMessage=Page(s) Selected

 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!
--- a/src/main/resources/messages_id_ID.properties
+++ b/src/main/resources/messages_id_ID.properties
@ -952,6 +952,7 @@ multiTool.split=Split
 multiTool.moveLeft=Move Left
 multiTool.moveRight=Move Right
 multiTool.delete=Delete
+multiTool.dragDropMessage=Page(s) Selected

 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!
--- a/src/main/resources/messages_it_IT.properties
+++ b/src/main/resources/messages_it_IT.properties
@ -952,6 +952,7 @@ multiTool.split=Dividi
 multiTool.moveLeft=Move Left
 multiTool.moveRight=Move Right
 multiTool.delete=Delete
+multiTool.dragDropMessage=Page(s) Selected

 #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!
--- a/src/main/resources/messages_ja_JP.properties
+++ b/src/main/resources/messages_ja_JP.properties
@ -952,6 +952,7 @@ multiTool.split=Split
 multiTool.moveLeft=Move Left
 multiTool.moveRight=Move Right
 multiTool.delete=Delete
+multiTool.dragDropMessage=Page(s) Selected

 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!
--- a/src/main/resources/messages_ko_KR.properties
+++ b/src/main/resources/messages_ko_KR.properties
@ -952,6 +952,7 @@ multiTool.split=Split
 multiTool.moveLeft=Move Left
 multiTool.moveRight=Move Right
 multiTool.delete=Delete
+multiTool.dragDropMessage=Page(s) Selected

 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!
--- a/src/main/resources/messages_nl_NL.properties
+++ b/src/main/resources/messages_nl_NL.properties
@ -952,6 +952,7 @@ multiTool.split=Split
 multiTool.moveLeft=Move Left
 multiTool.moveRight=Move Right
 multiTool.delete=Delete
+multiTool.dragDropMessage=Page(s) Selected

 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!
--- a/src/main/resources/messages_no_NB.properties
+++ b/src/main/resources/messages_no_NB.properties
@ -952,6 +952,7 @@ multiTool.split=Split
 multiTool.moveLeft=Move Left
 multiTool.moveRight=Move Right
 multiTool.delete=Delete
+multiTool.dragDropMessage=Page(s) Selected

 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!
--- a/src/main/resources/messages_pl_PL.properties
+++ b/src/main/resources/messages_pl_PL.properties
@ -952,6 +952,7 @@ multiTool.split=Split
 multiTool.moveLeft=Move Left
 multiTool.moveRight=Move Right
 multiTool.delete=Delete
+multiTool.dragDropMessage=Page(s) Selected

 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!
--- a/src/main/resources/messages_pt_BR.properties
+++ b/src/main/resources/messages_pt_BR.properties
@ -952,6 +952,7 @@ multiTool.split=Split
 multiTool.moveLeft=Move Left
 multiTool.moveRight=Move Right
 multiTool.delete=Delete
+multiTool.dragDropMessage=Page(s) Selected

 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!
--- a/src/main/resources/messages_pt_PT.properties
+++ b/src/main/resources/messages_pt_PT.properties
@ -952,6 +952,7 @@ multiTool.split=Split
 multiTool.moveLeft=Move Left
 multiTool.moveRight=Move Right
 multiTool.delete=Delete
+multiTool.dragDropMessage=Page(s) Selected

 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!
--- a/src/main/resources/messages_ro_RO.properties
+++ b/src/main/resources/messages_ro_RO.properties
@ -952,6 +952,7 @@ multiTool.split=Split
 multiTool.moveLeft=Move Left
 multiTool.moveRight=Move Right
 multiTool.delete=Delete
+multiTool.dragDropMessage=Page(s) Selected

 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!
--- a/src/main/resources/messages_ru_RU.properties
+++ b/src/main/resources/messages_ru_RU.properties
@ -952,6 +952,7 @@ multiTool.split=Split
 multiTool.moveLeft=Move Left
 multiTool.moveRight=Move Right
 multiTool.delete=Delete
+multiTool.dragDropMessage=Page(s) Selected

 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!
--- a/src/main/resources/messages_sk_SK.properties
+++ b/src/main/resources/messages_sk_SK.properties
@ -952,6 +952,7 @@ multiTool.split=Split
 multiTool.moveLeft=Move Left
 multiTool.moveRight=Move Right
 multiTool.delete=Delete
+multiTool.dragDropMessage=Page(s) Selected

 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!
--- a/src/main/resources/messages_sr_LATN_RS.properties
+++ b/src/main/resources/messages_sr_LATN_RS.properties
@ -952,6 +952,7 @@ multiTool.split=Split
 multiTool.moveLeft=Move Left
 multiTool.moveRight=Move Right
 multiTool.delete=Delete
+multiTool.dragDropMessage=Page(s) Selected

 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!
--- a/src/main/resources/messages_sv_SE.properties
+++ b/src/main/resources/messages_sv_SE.properties
@ -952,6 +952,7 @@ multiTool.split=Split
 multiTool.moveLeft=Move Left
 multiTool.moveRight=Move Right
 multiTool.delete=Delete
+multiTool.dragDropMessage=Page(s) Selected

 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!
--- a/src/main/resources/messages_th_TH.properties
+++ b/src/main/resources/messages_th_TH.properties
@ -952,6 +952,7 @@ multiTool.split=Split
 multiTool.moveLeft=Move Left
 multiTool.moveRight=Move Right
 multiTool.delete=Delete
+multiTool.dragDropMessage=Page(s) Selected

 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!
--- a/src/main/resources/messages_tr_TR.properties
+++ b/src/main/resources/messages_tr_TR.properties
@ -952,6 +952,7 @@ multiTool.split=Split
 multiTool.moveLeft=Move Left
 multiTool.moveRight=Move Right
 multiTool.delete=Delete
+multiTool.dragDropMessage=Page(s) Selected

 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!
--- a/src/main/resources/messages_uk_UA.properties
+++ b/src/main/resources/messages_uk_UA.properties
@ -952,6 +952,7 @@ multiTool.split=Split
 multiTool.moveLeft=Move Left
 multiTool.moveRight=Move Right
 multiTool.delete=Delete
+multiTool.dragDropMessage=Page(s) Selected

 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!
--- a/src/main/resources/messages_vi_VN.properties
+++ b/src/main/resources/messages_vi_VN.properties
@ -952,6 +952,7 @@ multiTool.split=Split
 multiTool.moveLeft=Move Left
 multiTool.moveRight=Move Right
 multiTool.delete=Delete
+multiTool.dragDropMessage=Page(s) Selected

 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!
--- a/src/main/resources/messages_zh_CN.properties
+++ b/src/main/resources/messages_zh_CN.properties
@ -952,6 +952,7 @@ multiTool.split=Split
 multiTool.moveLeft=Move Left
 multiTool.moveRight=Move Right
 multiTool.delete=Delete
+multiTool.dragDropMessage=Page(s) Selected

 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!
--- a/src/main/resources/messages_zh_TW.properties
+++ b/src/main/resources/messages_zh_TW.properties
@ -952,6 +952,7 @@ multiTool.split=Split
 multiTool.moveLeft=Move Left
 multiTool.moveRight=Move Right
 multiTool.delete=Delete
+multiTool.dragDropMessage=Page(s) Selected

 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!
--- a/src/main/resources/static/css/dragdrop.css
+++ b/src/main/resources/static/css/dragdrop.css
@ -19,6 +19,15 @@
  transform-origin: top left;
 }

+#drag-container .multidrag {
+  position: fixed;
+  max-width: 200px;
+  max-height: 200px;
+  transform-origin: top left;
+  margin-left: 1rem;
+  background-color: rgba(0, 29, 41, 0.9);
+}
+
 .drag-manager_dragging {
  width: 0px;
  visibility: hidden;
--- a/src/main/resources/static/css/pdfActions.css
+++ b/src/main/resources/static/css/pdfActions.css
@ -138,7 +138,7 @@ html[dir="rtl"] .pdf-actions_container:last-child>.pdf-actions_insert-file-butto
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 16px;
-  z-index: 3;
+  z-index: 10;
 }

 .hidden {
--- a/src/main/resources/static/js/multitool/DragDropManager.js
+++ b/src/main/resources/static/js/multitool/DragDropManager.js
@ -1,29 +1,21 @@
 class DragDropManager {
-  dragContainer;
-  wrapper;
-  pageDirection;
-  movePageTo;
-  pageDragging;
-  draggelEl;
-  draggedImageEl;
-  hoveredEl;
-  endInsertionElement;
-
  constructor(id, wrapperId) {
    this.dragContainer = document.getElementById(id);
    this.pageDirection = document.documentElement.getAttribute("dir");
    this.wrapper = document.getElementById(wrapperId);
    this.pageDragging = false;
    this.hoveredEl = undefined;
-    this.draggelEl = undefined;
    this.draggedImageEl = undefined;
+    this.draggedEl = undefined;
+    this.selectedPageElements = []; // Store selected pages for multi-page mode

-    var styleElement = document.createElement("link");
+    // Add CSS dynamically
+    const styleElement = document.createElement("link");
    styleElement.rel = "stylesheet";
    styleElement.href = "css/dragdrop.css";
-
    document.head.appendChild(styleElement);

+    // Create the endpoint element
    const div = document.createElement("div");
    div.classList.add("drag-manager_endpoint");
    div.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-file-earmark-arrow-down" viewBox="0 0 16 16">
@ -32,6 +24,7 @@ class DragDropManager {
        </svg>`;
    this.endInsertionElement = div;

+    // Bind methods
    this.startDraggingPage = this.startDraggingPage.bind(this);
    this.onDragEl = this.onDragEl.bind(this);
    this.stopDraggingPage = this.stopDraggingPage.bind(this);
@ -40,20 +33,41 @@ class DragDropManager {
  }

  startDraggingPage(div) {
-    this.pageDragging = true;
-    this.draggedEl = div;
-    const img = div.querySelector("img");
-    div.classList.add("drag-manager_dragging");
-    const imageSrc = img.src;
+    if (window.selectPage) {
+      // Multi-page drag logic
+      this.selectedPageElements = window.selectedPages.map((index) => {
+        const pageEl = document.getElementById(`page-container-${index}`);
+        if (pageEl) {
+          pageEl.initialTransform = pageEl.style.transform || "translate(0px, 0px)";
+        }
+        return pageEl;
+      }).filter(Boolean);

-    const imgEl = document.createElement("img");
-    imgEl.classList.add("dragged-img");
-    imgEl.src = imageSrc;
-    this.draggedImageEl = imgEl;
-    imgEl.style.visibility = "hidden";
-    imgEl.style.transform = `rotate(${img.style.rotate === "" ? "0deg" : img.style.rotate}) translate(-50%, -50%)`;
-    this.dragContainer.appendChild(imgEl);
+      if (this.selectedPageElements.length === 0) return;

+      this.pageDragging = true;
+      this.draggedImageEl = document.createElement("div");
+      this.draggedImageEl.classList.add("multidrag");
+      this.draggedImageEl.textContent = `${this.selectedPageElements.length} ${window.translations.dragDropMessage}`;
+      this.draggedImageEl.style.visibility = "hidden";
+      this.dragContainer.appendChild(this.draggedImageEl);
+    } else {
+      // Single-page drag logic
+      this.pageDragging = true;
+      this.draggedEl = div;
+      const img = div.querySelector("img");
+      div.classList.add("drag-manager_dragging");
+
+      const imgEl = document.createElement("img");
+      imgEl.classList.add("dragged-img");
+      imgEl.src = img.src;
+      imgEl.style.visibility = "hidden";
+      imgEl.style.transform = `rotate(${img.style.rotate === "" ? "0deg" : img.style.rotate}) translate(-50%, -50%)`;
+      this.draggedImageEl = imgEl;
+      this.dragContainer.appendChild(imgEl);
+    }
+
+    // Common setup for both modes
    window.addEventListener("mouseup", this.stopDraggingPage);
    window.addEventListener("mousemove", this.onDragEl);
    this.wrapper.classList.add("drag-manager_dragging-container");
@ -74,21 +88,43 @@ class DragDropManager {
    this.wrapper.classList.remove("drag-manager_dragging-container");
    this.wrapper.removeChild(this.endInsertionElement);
    window.removeEventListener("mouseup", this.stopDraggingPage);
-    this.draggedImageEl = undefined;
+
+    if (this.draggedImageEl) {
+      this.dragContainer.removeChild(this.draggedImageEl);
+      this.draggedImageEl = undefined;
+    }
+
+    if (window.selectPage) {
+      // Multi-page drop logic
+      if (!this.hoveredEl) {
+        this.selectedPageElements.forEach((pageEl) => {
+          pageEl.style.transform = pageEl.initialTransform || "translate(0px, 0px)";
+          pageEl.classList.remove("drag-manager_dragging");
+        });
+      } else {
+        this.selectedPageElements.forEach((pageEl) => {
+          pageEl.classList.remove("drag-manager_dragging");
+          if (this.hoveredEl === this.endInsertionElement) {
+            this.movePageTo(pageEl);
+          } else {
+            this.movePageTo(pageEl, this.hoveredEl);
+          }
+        });
+      }
+      this.selectedPageElements = [];
+      window.resetPages()
+    } else {
+      // Single-page drop logic
+      if (!this.hoveredEl) return;
+      this.draggedEl.classList.remove("drag-manager_dragging");
+      if (this.hoveredEl === this.endInsertionElement) {
+        this.movePageTo(this.draggedEl);
+      } else {
+        this.movePageTo(this.draggedEl, this.hoveredEl);
+      }
+    }
+
    this.pageDragging = false;
-    this.draggedEl.classList.remove("drag-manager_dragging");
-    this.hoveredEl?.classList.remove("drag-manager_draghover");
-    this.dragContainer.childNodes.forEach((dragChild) => {
-      this.dragContainer.removeChild(dragChild);
-    });
-    if (!this.hoveredEl) {
-      return;
-    }
-    if (this.hoveredEl === this.endInsertionElement) {
-      this.movePageTo(this.draggedEl);
-      return;
-    }
-    this.movePageTo(this.draggedEl, this.hoveredEl);
  }

  setActions({ movePageTo }) {
--- a/src/main/resources/static/js/multitool/PdfContainer.js
+++ b/src/main/resources/static/js/multitool/PdfContainer.js
@ -29,6 +29,7 @@ class PdfContainer {
    this.updatePagesFromCSV = this.updatePagesFromCSV.bind(this);
    this.addFilesBlankAll = this.addFilesBlankAll.bind(this)
    this.removeAllElements = this.removeAllElements.bind(this);
+    this.resetPages = this.resetPages.bind(this);

    this.pdfAdapters = pdfAdapters;

@ -55,6 +56,7 @@ class PdfContainer {
    window.updatePageNumbersAndCheckboxes = this.updatePageNumbersAndCheckboxes;
    window.addFilesBlankAll = this.addFilesBlankAll
    window.removeAllElements = this.removeAllElements;
+    window.resetPages = this.resetPages;

    const filenameInput = document.getElementById("filename-input");
    const downloadBtn = document.getElementById("export-button");
@ -193,7 +195,7 @@ class PdfContainer {
      const div = document.createElement("div");

      div.classList.add("page-container");
-
+      div.id = "page-container-" + (i + 1);
      var img = document.createElement("img");
      img.classList.add("page-image");
      const imageSrc = await renderer.renderPage(i);
@ -202,7 +204,6 @@ class PdfContainer {
      img.rend = renderer;
      img.doc = pdfDocument;
      div.appendChild(img);
-
      this.pdfAdapters.forEach((adapter) => {
        adapter.adapt?.(div);
      });
@ -701,6 +702,31 @@ class PdfContainer {
    }
  }

+   resetPages() {
+    const pageContainers = this.pagesContainer.querySelectorAll(".page-container");
+
+    pageContainers.forEach((container, index) => {
+      container.id = "page-container-" + (index + 1);
+    });
+
+    const checkboxes = document.querySelectorAll(".pdf-actions_checkbox");
+    window.selectAll = false;
+    const selectIcon = document.getElementById("select-All-Container");
+    const deselectIcon = document.getElementById("deselect-All-Container");
+
+      selectIcon.style.display = "inline";
+      deselectIcon.style.display = "none";
+
+    checkboxes.forEach((checkbox) => {
+      const pageNumber = Array.from(checkbox.parentNode.parentNode.children).indexOf(checkbox.parentNode) + 1;
+
+        const index = window.selectedPages.indexOf(pageNumber);
+        if (index !== -1) {
+          window.selectedPages.splice(index, 1);
+        }
+    });
+    window.toggleSelectPageVisibility();
+  }

  setDownloadAttribute() {
    this.downloadLink.setAttribute("download", this.fileName ? this.fileName : "managed.pdf");
--- a/src/main/resources/templates/multi-tool.html
+++ b/src/main/resources/templates/multi-tool.html
@ -112,13 +112,6 @@
              <div class="multi-tool-container">
                <div class="d-flex flex-wrap" id="pages-container-wrapper">
                  <div id="pages-container">
-                    <div class="page-container" th:each="file, status: ${fileList}"
-                      th:id="'page-container-' + ${status.index}">
-                      <div class="page-number-container">
-                        <span th:text="${status.index + 1}"></span>
-                      </div>
-                      <img th:src="${file.imageUrl}" alt="File Page">
-                    </div>
                  </div>
                </div>
              </div>
@ -145,7 +138,8 @@
        delete: '[[#{multiTool.delete}]]',
        split: '[[#{multiTool.split}]]',
        addFile: '[[#{multiTool.addFile}]]',
-        insertPageBreak:'[[#{multiTool.insertPageBreak}]]'
+        insertPageBreak:'[[#{multiTool.insertPageBreak}]]',
+        dragDropMessage:'[[#{multiTool.dragDropMessage}]]'
    };