<!DOCTYPE html> <html th:lang="${#locale.language}" th:lang-direction="#{language.direction}" xmlns:th="http://www.thymeleaf.org"> <th:block th:insert="~{fragments/common :: head(title=#{merge.title})}"></th:block> <body> <div id="page-container"> <div id="content-wrap"> <div th:insert="~{fragments/navbar.html :: navbar}"></div> <br> <br> <div class="container" id="dropContainer"> <div class="row justify-content-center"> <div class="col-md-6"> <h2 th:text="#{merge.header}"></h2> <form action="merge-pdfs" method="post" enctype="multipart/form-data"> <div class="form-group"> <label th:text="#{multiPdfDropPrompt}"></label> <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=true, accept='application/pdf')}"></div> </div> <div class="form-group"> <ul id="selectedFiles" class="list-group"></ul> </div> <div class="form-group text-center"> <button type="submit" class="btn btn-primary" th:text="#{merge.submit}"></button> </div> </form> <style> .list-group-item { display: flex; justify-content: space-between; align-items: center; } .filename { flex-grow: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right: 10px; } .arrows { flex-shrink: 0; display: flex; justify-content: flex-end; } .move-up span, .move-down span { font-weight: bold; font-size: 1.2em; } </style> <script> document.getElementById("fileInput-input").addEventListener("change", function() { var files = this.files; var list = document.getElementById("selectedFiles"); list.innerHTML = ""; for (var i = 0; i < files.length; i++) { var item = document.createElement("li"); item.className = "list-group-item"; item.innerHTML = ` <div class="d-flex justify-content-between align-items-center w-100"> <div class="filename">${files[i].name}</div> <div class="arrows d-flex"> <button class="btn btn-secondary move-up"><span>↑</span></button> <button class="btn btn-secondary move-down"><span>↓</span></button> </div> </div> `; list.appendChild(item); } var moveUpButtons = document.querySelectorAll(".move-up"); for (var i = 0; i < moveUpButtons.length; i++) { moveUpButtons[i].addEventListener("click", function(event) { event.preventDefault(); var parent = this.closest(".list-group-item"); var grandParent = parent.parentNode; if (parent.previousElementSibling) { grandParent.insertBefore(parent, parent.previousElementSibling); updateFiles(); } }); } var moveDownButtons = document.querySelectorAll(".move-down"); for (var i = 0; i < moveDownButtons.length; i++) { moveDownButtons[i].addEventListener("click", function(event) { event.preventDefault(); var parent = this.closest(".list-group-item"); var grandParent = parent.parentNode; if (parent.nextElementSibling) { grandParent.insertBefore(parent.nextElementSibling, parent); updateFiles(); } }); } function updateFiles() { var dataTransfer = new DataTransfer(); var liElements = document.querySelectorAll("#selectedFiles li"); for (var i = 0; i < liElements.length; i++) { var fileNameFromList = liElements[i].querySelector(".filename").innerText; var fileFromFiles; for (var j = 0; j < files.length; j++) { var file = files[j]; if (file.name === fileNameFromList) { dataTransfer.items.add(file); break; } } } document.getElementById("fileInput-input").files = dataTransfer.files; } }); </script> </div> </div> </div> </div> <div th:insert="~{fragments/footer.html :: footer}"></div> </div> </body> </html>