<!DOCTYPE html> <html th:lang="${#locale.toString()}" th:lang-direction="#{language.direction}" xmlns:th="http://www.thymeleaf.org"> <th:block th:insert="~{fragments/common :: head(title=#{changeMetadata.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"> <div class="row justify-content-center"> <div class="col-md-6"> <h2 th:text="#{changeMetadata.header}"></h2> <form method="post" id="form1" enctype="multipart/form-data" th:action="@{/update-metadata}"> <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div> <p class="text-muted" th:text="#{changeMetadata.selectText.1}"></p> <div class="mb-3-inline form-check"> <input type="checkbox" class="form-check-input" id="deleteAll" name="deleteAll"> <label class="ms-3" for="deleteAll" th:text="#{changeMetadata.selectText.2}" ></label> </div> <div class="mb-3-inline form-check"> <input type="checkbox" class="form-check-input" id="customModeCheckbox"> <label class="ms-3" for="customModeCheckbox" th:text="#{changeMetadata.selectText.3}"></label> </div> <div class="mb-3"> <label class="form-check-label" for="author" th:text="#{changeMetadata.author}"></label> <input type="text" class="form-control" id="author" name="author"> </div> <div class="mb-3"> <label class="form-check-label" for="creationDate" th:text="#{changeMetadata.creationDate}"></label> <input type="text" class="form-control" id="creationDate" name="creationDate" placeholder="2020/12/25 18:30:59"> </div> <div class="mb-3"> <label class="form-check-label" for="creator" th:text="#{changeMetadata.creator}"></label> <input type="text" class="form-control" id="creator" name="creator"> </div> <div class="mb-3"> <label class="form-check-label" for="keywords" th:text="#{changeMetadata.keywords}"></label> <input type="text" class="form-control" id="keywords" name="keywords"> </div> <div class="mb-3"> <label class="form-check-label" for="modificationDate" th:text="#{changeMetadata.modDate}"></label> <input type="text" class="form-control" id="modificationDate" name="modificationDate" placeholder="2020/12/25 18:30:59"> </div> <div class="mb-3"> <label class="form-check-label" for="producer" th:text="#{changeMetadata.producer}"></label> <input type="text" class="form-control" id="producer" name="producer"> </div> <div class="mb-3"> <label class="form-check-label" for="subject" th:text="#{changeMetadata.subject}"></label> <input type="text" class="form-control" id="subject" name="subject"> </div> <div class="mb-3"> <label class="form-check-label" for="title" th:text="#{changeMetadata.title}"></label> <input type="text" class="form-control" id="title" name="title"> </div> <div class="mb-3"> <label class="form-check-label" for="trapped" th:text="#{changeMetadata.trapped}"></label> <select class="form-control" id="trapped" name="trapped"> <option value="True" th:text="#{true}"></option> <option value="False" th:text="#{false}" selected></option> <option value="Unknown" th:text="#{unknown}"></option> </select> </div> <div id="customMetadata" style="display: none;"> <h3 th:text="#{changeMetadata.selectText.4}"></h3> <div class="mb-3" id="otherMetadataEntries"></div> </div> <div id="customMetadataEntries"></div> <button type="button" class="btn btn-secondary" id="addMetadataBtn" th:text="#{changeMetadata.selectText.5}"></button> <br> <br> <button class="btn btn-primary" type="submit" id="submitBtn" th:text="#{changeMetadata.submit}"></button> <script> const deleteAllCheckbox = document.querySelector("#deleteAll"); const inputs = document.querySelectorAll(".form-control"); const customMetadataDiv = document.getElementById('customMetadata'); const otherMetadataEntriesDiv = document.getElementById('otherMetadataEntries'); deleteAllCheckbox.addEventListener("change", function(event) { if (event.target !== deleteAllCheckbox) { return; } inputs.forEach(input => { if (input === deleteAllCheckbox) { return; } input.disabled = deleteAllCheckbox.checked; }); }); const customModeCheckbox = document.getElementById('customModeCheckbox'); const addMetadataBtn = document.getElementById("addMetadataBtn"); const customMetadataFormContainer = document.getElementById("customMetadataEntries"); var count = 1; const fileInput = document.querySelector("#fileInput-input"); const authorInput = document.querySelector("#author"); const creationDateInput = document.querySelector("#creationDate"); const creatorInput = document.querySelector("#creator"); const keywordsInput = document.querySelector("#keywords"); const modificationDateInput = document.querySelector("#modificationDate"); const producerInput = document.querySelector("#producer"); const subjectInput = document.querySelector("#subject"); const titleInput = document.querySelector("#title"); const trappedInput = document.querySelector("#trapped"); var lastPDFFileMeta = null; fileInput.addEventListener("change", async function() { while (otherMetadataEntriesDiv.firstChild) { otherMetadataEntriesDiv.removeChild(otherMetadataEntriesDiv.firstChild); } while (customMetadataFormContainer.firstChild) { customMetadataFormContainer.removeChild(customMetadataFormContainer.firstChild); } const file = this.files[0]; var url = URL.createObjectURL(file) pdfjsLib.GlobalWorkerOptions.workerSrc = 'pdfjs/pdf.worker.js' const pdf = await pdfjsLib.getDocument(url).promise; const pdfMetadata = await pdf.getMetadata(); lastPDFFile = pdfMetadata?.info console.log(pdfMetadata); if(!pdfMetadata?.info?.Custom || pdfMetadata?.info?.Custom.size == 0) { customModeCheckbox.disabled = true; customModeCheckbox.checked = false; } else { customModeCheckbox.disabled = false; } authorInput.value = pdfMetadata?.info?.Author; creationDateInput.value = convertDateFormat(pdfMetadata?.info?.CreationDate); creatorInput.value = pdfMetadata?.info?.Creator; keywordsInput.value = pdfMetadata?.info?.Keywords; modificationDateInput.value = convertDateFormat(pdfMetadata?.info?.ModDate); producerInput.value = pdfMetadata?.info?.Producer; subjectInput.value = pdfMetadata?.info?.Subject; titleInput.value = pdfMetadata?.info?.Title; console.log(pdfMetadata?.info); const trappedValue = pdfMetadata?.info?.Trapped; // Get all options in the select element const options = trappedInput.options; // Loop through all options to find the one with a matching value for (let i = 0; i < options.length; i++) { if (options[i].value === trappedValue) { options[i].selected = true; break; } } addExtra(); }); addMetadataBtn.addEventListener("click", () => { const keyInput = document.createElement("input"); keyInput.type = "text"; keyInput.placeholder = 'Key'; keyInput.className = "form-control"; keyInput.name = "customKey" + count; const valueInput = document.createElement("input"); valueInput.type = "text"; valueInput.placeholder = 'Value'; valueInput.className = "form-control"; valueInput.name = "customValue" + count; count = count + 1; const formGroup = document.createElement("div"); formGroup.className = "mb-3"; formGroup.appendChild(keyInput); formGroup.appendChild(valueInput); customMetadataFormContainer.appendChild(formGroup); }); function convertDateFormat(dateTimeString) { if (!dateTimeString || dateTimeString.length < 17) { return dateTimeString; } const year = dateTimeString.substring(2, 6); const month = dateTimeString.substring(6, 8); const day = dateTimeString.substring(8, 10); const hour = dateTimeString.substring(10, 12); const minute = dateTimeString.substring(12, 14); const second = dateTimeString.substring(14, 16); return year + "/" + month + "/" + day + " " + hour + ":" + minute + ":" + second; } function addExtra() { const event = document.getElementById("customModeCheckbox"); if (event.checked && lastPDFFile.Custom != null) { customMetadataDiv.style.display = 'block'; for (const [key, value] of Object.entries(lastPDFFile.Custom)) { if (key === 'Author' || key === 'CreationDate' || key === 'Creator' || key === 'Keywords' || key === 'ModDate' || key === 'Producer' || key === 'Subject' || key === 'Title' || key === 'Trapped') { continue; } const entryDiv = document.createElement('div'); entryDiv.className = 'mb-3'; entryDiv.innerHTML = `<div class="mb-3"><label class="form-check-label" for="${key}">${key}:</label><input name="${key}" value="${value}" type="text" class="form-control" id="${key}"></div>`; otherMetadataEntriesDiv.appendChild(entryDiv); } } else { customMetadataDiv.style.display = 'none'; while (otherMetadataEntriesDiv.firstChild) { otherMetadataEntriesDiv.removeChild(otherMetadataEntriesDiv.firstChild); } } } customModeCheckbox.addEventListener('change', (event) => { addExtra(); }); </script> </form> </div> </div> </div> </div> <div th:insert="~{fragments/footer.html :: footer}"></div> </div> </body> </html>