Add files via upload
This commit is contained in:
Anthony Stirling
@@ -1,77 +1,95 @@
|
||||
<head th:fragment="head">
|
||||
<link rel="shortcut icon" href="favicon.svg">
|
||||
<script
|
||||
src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
|
||||
<link rel="stylesheet"
|
||||
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
|
||||
<script
|
||||
src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<link rel="stylesheet" th:href="@{dark-mode.css}" id="dark-mode-styles">
|
||||
<script>
|
||||
function toggleDarkMode() {
|
||||
var checkbox = document.getElementById("toggle-dark-mode");
|
||||
var darkModeStyles = document.getElementById("dark-mode-styles");
|
||||
if (checkbox.checked) {
|
||||
localStorage.setItem("dark-mode", "on");
|
||||
darkModeStyles.disabled = false;
|
||||
} else {
|
||||
localStorage.setItem("dark-mode", "off");
|
||||
darkModeStyles.disabled = true;
|
||||
}
|
||||
}
|
||||
$(document).ready(function () {
|
||||
var darkModeStyles = document.getElementById("dark-mode-styles");
|
||||
var checkbox = document.getElementById("toggle-dark-mode");
|
||||
if(localStorage.getItem("dark-mode") == "on"){
|
||||
darkModeStyles.disabled = false;
|
||||
checkbox.checked = true;
|
||||
}
|
||||
if(localStorage.getItem("dark-mode") == "off"){
|
||||
darkModeStyles.disabled = true;
|
||||
checkbox.checked = false;
|
||||
}
|
||||
|
||||
});
|
||||
</script>
|
||||
<link rel="stylesheet" href="general.css">
|
||||
</head>
|
||||
|
||||
<th:block th:fragment="filelist">
|
||||
<div id="fileList"></div>
|
||||
<div id="fileList2"></div>
|
||||
<script>
|
||||
var input = document.getElementById("fileInput");
|
||||
var output = document.getElementById("fileList");
|
||||
|
||||
input.addEventListener("change", function() {
|
||||
var files = input.files;
|
||||
var fileNames = "";
|
||||
|
||||
for (var i = 0; i < files.length; i++) {
|
||||
fileNames += (i + 1) + ". " + files[i].name + "<br>";
|
||||
}
|
||||
|
||||
output.innerHTML = fileNames;
|
||||
});
|
||||
|
||||
</script>
|
||||
<script>
|
||||
var input2 = document.getElementById("fileInput2");
|
||||
var output2 = document.getElementById("fileList2");
|
||||
if(input2 != null && !input2) {
|
||||
input2.addEventListener("change", function() {
|
||||
var files = input2.files;
|
||||
var fileNames = "";
|
||||
|
||||
for (var i = 0; i < files.length; i++) {
|
||||
fileNames += (i + 1) + ". " + files[i].name + "<br>";
|
||||
}
|
||||
|
||||
output2.innerHTML = fileNames;
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</th:block>
|
||||
|
||||
<head th:fragment="head">
|
||||
<link rel="shortcut icon" href="favicon.svg">
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
|
||||
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<link rel="stylesheet" th:href="@{dark-mode.css}" id="dark-mode-styles">
|
||||
<script>
|
||||
function toggleDarkMode() {
|
||||
var checkbox = document.getElementById("toggle-dark-mode");
|
||||
var darkModeStyles = document.getElementById("dark-mode-styles");
|
||||
if (checkbox.checked) {
|
||||
localStorage.setItem("dark-mode", "on");
|
||||
darkModeStyles.disabled = false;
|
||||
} else {
|
||||
localStorage.setItem("dark-mode", "off");
|
||||
darkModeStyles.disabled = true;
|
||||
}
|
||||
}
|
||||
$(document).ready(function () {
|
||||
var darkModeStyles = document.getElementById("dark-mode-styles");
|
||||
var checkbox = document.getElementById("toggle-dark-mode");
|
||||
if (localStorage.getItem("dark-mode") == "on") {
|
||||
darkModeStyles.disabled = false;
|
||||
checkbox.checked = true;
|
||||
}
|
||||
if (localStorage.getItem("dark-mode") == "off") {
|
||||
darkModeStyles.disabled = true;
|
||||
checkbox.checked = false;
|
||||
}
|
||||
|
||||
});
|
||||
</script>
|
||||
<link rel="stylesheet" href="general.css">
|
||||
</head>
|
||||
|
||||
<th:block th:fragment="filelist">
|
||||
<div id="fileList"></div>
|
||||
<div id="fileList2"></div>
|
||||
<script>
|
||||
var input = document.getElementById("fileInput");
|
||||
var output = document.getElementById("fileList");
|
||||
|
||||
input.addEventListener("change", function () {
|
||||
var files = input.files;
|
||||
var fileNames = "";
|
||||
|
||||
for (var i = 0; i < files.length; i++) {
|
||||
fileNames += (i + 1) + ". " + files[i].name + "<br>";
|
||||
}
|
||||
|
||||
output.innerHTML = fileNames;
|
||||
});
|
||||
|
||||
</script>
|
||||
<script>
|
||||
var input2 = document.getElementById("fileInput2");
|
||||
var output2 = document.getElementById("fileList2");
|
||||
if (input2 != null && !input2) {
|
||||
input2.addEventListener("change", function () {
|
||||
var files = input2.files;
|
||||
var fileNames = "";
|
||||
|
||||
for (var i = 0; i < files.length; i++) {
|
||||
fileNames += (i + 1) + ". " + files[i].name + "<br>";
|
||||
}
|
||||
|
||||
output2.innerHTML = fileNames;
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<script>
|
||||
if (dropContainer) {
|
||||
dropContainer.ondragover = dropContainer.ondragenter = function (evt) {
|
||||
evt.preventDefault();
|
||||
};
|
||||
|
||||
dropContainer.ondrop = function (evt) {
|
||||
if(fileInput) {
|
||||
fileInput.files = evt.dataTransfer.files;
|
||||
|
||||
const dT = new DataTransfer();
|
||||
dT.items.add(evt.dataTransfer.files[0]);
|
||||
dT.items.add(evt.dataTransfer.files[3]);
|
||||
fileInput.files = dT.files;
|
||||
|
||||
evt.preventDefault();
|
||||
}
|
||||
};
|
||||
}
|
||||
</script>
|
||||
</th:block>
|
||||
@@ -15,7 +15,7 @@
|
||||
<div class="col-md-6">
|
||||
<h2>PDF to img</h2>
|
||||
<form method="post" enctype="multipart/form-data"
|
||||
th:action="@{/convert-to-image}">
|
||||
th:action="@{/convert-from-pdf}">
|
||||
<div class="custom-file">
|
||||
<input type="file" class="custom-file-input" id="fileInput"
|
||||
name="fileInput" required> <label
|
||||
|
||||
@@ -8,4 +8,4 @@
|
||||
class="mx-1"> <i class="fab fa-docker fa-2x"></i>
|
||||
</a>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
@@ -4,33 +4,16 @@
|
||||
<th:block th:insert="~{common :: head}"></th:block>
|
||||
<title>S-PDF MergePDFs</title>
|
||||
|
||||
<script>
|
||||
dropContainer.ondragover = dropContainer.ondragenter = function(evt) {
|
||||
evt.preventDefault();
|
||||
};
|
||||
|
||||
dropContainer.ondrop = function(evt) {
|
||||
// pretty simple -- but not for IE :(
|
||||
fileInput.files = evt.dataTransfer.files;
|
||||
|
||||
// If you want to use some of the dropped files
|
||||
const dT = new DataTransfer();
|
||||
dT.items.add(evt.dataTransfer.files[0]);
|
||||
dT.items.add(evt.dataTransfer.files[3]);
|
||||
fileInput.files = dT.files;
|
||||
|
||||
evt.preventDefault();
|
||||
};
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div th:insert="~{navbar.html :: navbar}"></div>
|
||||
<br>
|
||||
<br>
|
||||
<div class="container">
|
||||
<div class="container" id="dropContainer">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-6" id="dropContainer">
|
||||
<div class="col-md-6" >
|
||||
<h2>Merge multiple PDFs (2+)</h2>
|
||||
<form action="/merge-pdfs" method="post"
|
||||
enctype="multipart/form-data">
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
<h1>Split PDF</h1>
|
||||
<p>The numbers you select are the page number you wish to do a
|
||||
split on</p>
|
||||
<p>As such selecting 1,3,7-8 would split a 12 page document into
|
||||
<p>As such selecting 1,3,7-8 would split a 10 page document into
|
||||
6 separate PDFS with:</p>
|
||||
<p>Document #1: Page 1</p>
|
||||
<p>Document #2: Page 2 and 3</p>
|
||||
|
||||
Reference in New Issue
Block a user