Add QR code, Add MODT customisation

This commit is contained in:
2026-04-09 01:00:02 +02:00
parent e2f1bbcd64
commit 0ce248b2f9
8 changed files with 247 additions and 189 deletions

View File

@@ -6,6 +6,7 @@
<title>Send.it - File Ready</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
<style>
* {
border-radius: 0 !important;
@@ -107,7 +108,7 @@
<div class="section-label mb-1">Download_Link:</div>
<div class="flex">
<input id="res-url" readonly class="input-text">
<button onclick="copy('res-url')" class="border-l-0">COPY</button>
<button onclick="copy('res-url')" class="border-l-0 pl-1 pr-1">COPY</button>
</div>
</div>
@@ -116,7 +117,15 @@
<div class="section-label mb-1 text-red-600">Deletion_Link <span class="text-gray-400 normal-case">(private)</span>:</div>
<div class="flex">
<input id="res-del" readonly class="input-text" style="color:#cc0000;">
<button onclick="copy('res-del')" class="border-l-0">COPY</button>
<button onclick="copy('res-del')" class="border-l-0 pl-1 pr-1">COPY</button>
</div>
</div>
<div>
<button id="qr-btn" onclick="toggleQR()" class="pl-1 pr-1">Show_QR</button>
<div id="qr-container" class="mt-3 hidden border-2 border-black p-4 flex justify-center">
<div id="qr-code"></div>
</div>
</div>
@@ -126,11 +135,13 @@
</div>
</div>
</div>
<!-- Footer -->
<div class="w-full mt-3 flex justify-between items-center">
<span class="text-[10px] font-black uppercase text-gray-400">A_Service_By_Brammie15</span>
<span class="text-[10px] font-black text-gray-400">{{ .MODT }}</span>
<div class="flex gap-4">
<a href="/static/TOS.txt" class="nav-link">TOS</a>
<a href="/admin" class="nav-link">SUDO</a>
@@ -153,6 +164,25 @@
document.getElementById("res-url").value = `${base}/api/files/view/${downloadKey}`;
document.getElementById("res-del").value = `${base}/api/files/delete/${deleteKey}`;
const downloadURL = `${base}/api/files/view/${downloadKey}`;
// Generate QR code
new QRCode(document.getElementById("qr-code"), {
text: downloadURL,
width: 160,
height: 160
});
function toggleQR() {
const container = document.getElementById("qr-container");
const btn = document.getElementById("qr-btn");
const isHidden = container.classList.contains("hidden");
container.classList.toggle("hidden");
btn.textContent = isHidden ? "Hide_QR" : "Show_QR";
}
</script>
</body>

View File

@@ -138,6 +138,15 @@
<form method="POST" action="/config">
<div class="box mb-6">
<div class="section-title">General_Settings</div>
<div class="row">
<label>Site_MODT</label>
<input type="text" name="site_modt" value="{{.MODT}}">
</div>
</div>
<!-- UPLOAD SETTINGS -->
<div class="box mb-6">
<div class="section-title">Upload_Control</div>

View File

@@ -122,7 +122,7 @@
</div>
<div class="w-full mt-3 flex justify-between items-center">
<span class="text-[10px] font-black uppercase text-gray-400">A_Service_By_Brammie15</span>
<span class="text-[10px] font-black text-gray-400">{{.MODT}}</span>
<div class="flex gap-4">
<a href="/static/TOS.txt" class="nav-link">TOS</a>
<a href="/admin" class="nav-link">SUDO</a>

View File

@@ -281,7 +281,7 @@
<!-- Footer -->
<div class="w-full mt-3 flex justify-between items-center">
<span class="text-[10px] font-black uppercase text-gray-400">A_Service_By_Brammie15</span>
<span class="text-[10px] font-black text-gray-400">{{.MODT}}</span>
<div class="flex gap-4">
<a href="/static/TOS.txt" class="nav-link">TOS</a>
<a href="/admin" class="nav-link">SUDO</a>
@@ -289,188 +289,6 @@
</div>
</div>
<script>
const zone = document.getElementById('drop-zone');
const input = document.getElementById('fileInput');
const uploadBtn = document.getElementById('uploadBtn');
const cancelBtn = document.getElementById('cancelBtn');
const progressText = document.getElementById("progress-text");
const statsText = document.getElementById("stats-text");
const speedText = document.getElementById("speed-text");
const etaText = document.getElementById("eta-text");
const progressBar = document.getElementById("progress-bar");
const progressContainer = document.getElementById("progress-container");
let currentXhr = null;
function formatBytes(bytes, decimals = 2) {
if (bytes === 0) return '0 Bytes';
const k = 1024;
const dm = decimals < 0 ? 0 : decimals;
const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
const i = Math.floor(Math.log(bytes) / Math.log(k));
return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
}
function formatTime(seconds) {
if (!isFinite(seconds) || seconds < 0) return "--:--";
const h = Math.floor(seconds / 3600);
const m = Math.floor((seconds % 3600) / 60);
const s = Math.floor(seconds % 60);
return [
h > 0 ? h : null,
(h > 0 ? m.toString().padStart(2, '0') : m),
s.toString().padStart(2, '0')
].filter(x => x !== null).join(':');
}
zone.onclick = () => input.click();
zone.ondragover = (e) => {
e.preventDefault();
zone.classList.add('active');
};
zone.ondragleave = () => zone.classList.remove('active');
zone.ondrop = (e) => {
e.preventDefault();
zone.classList.remove('active');
if (e.dataTransfer.files.length) {
input.files = e.dataTransfer.files;
input.dispatchEvent(new Event('change'));
}
};
input.onchange = () => {
if (input.files.length) {
showFiles(input.files);
uploadBtn.disabled = false;
} else {
uploadBtn.disabled = true;
}
};
function showFiles(fileList) {
const files = Array.from(fileList || []);
if (files.length === 0) return;
const total = files.reduce((acc, f) => acc + f.size, 0);
if (files.length === 1) {
document.getElementById('dz-text').innerText =
`${files[0].name} [${formatBytes(files[0].size)}]`;
} else {
document.getElementById('dz-text').innerText =
`${files.length} FILES [${formatBytes(total)}] — will be zipped`;
}
}
uploadBtn.onclick = () => {
if (!input.files.length) return;
if (input.files.length === 1) {
handleUploadSingle(input.files[0]);
} else {
handleUploadMulti(input.files);
}
};
cancelBtn.onclick = (e) => {
e.stopPropagation();
if (currentXhr) {
currentXhr.abort();
alert("Upload cancelled.");
location.reload();
}
};
function commonFormData() {
const fd = new FormData();
fd.append("once", document.getElementById("once").checked ? "true" : "false");
const hours = parseInt(document.getElementById("duration").value, 10);
fd.append("duration", hours);
return fd;
}
function startUploadUI() {
uploadBtn.disabled = true;
uploadBtn.innerText = "UPLOADING...";
cancelBtn.classList.remove('hidden');
progressContainer.classList.remove("hidden");
progressText.classList.remove("hidden");
statsText.classList.remove("hidden");
}
function setupXHRHandlers(xhr) {
let startTime = Date.now();
xhr.upload.onprogress = (e) => {
if (e.lengthComputable) {
const percent = Math.round((e.loaded / e.total) * 100);
progressBar.style.width = percent + "%";
progressText.innerText = percent + "%";
const elapsedSeconds = (Date.now() - startTime) / 1000;
if (elapsedSeconds > 0) {
const bytesPerSecond = e.loaded / elapsedSeconds;
const remainingBytes = e.total - e.loaded;
const secondsRemaining = remainingBytes / bytesPerSecond;
speedText.innerText = formatBytes(bytesPerSecond) + "/S";
etaText.innerText = formatTime(secondsRemaining);
}
}
};
xhr.onload = () => {
if (xhr.status >= 200 && xhr.status < 300) {
try {
const data = JSON.parse(xhr.responseText);
if (data.error) throw new Error(data.error);
window.location.href = "/f/" + data.view_key;
} catch (err) {
console.error("Invalid response:", xhr.responseText);
alert("Server error");
}
} else {
alert("Upload failed");
}
};
xhr.onerror = () => {
if (xhr.statusText !== "abort") {
alert("Upload failed");
location.reload();
}
};
}
function handleUploadSingle(file) {
startUploadUI();
const fd = commonFormData();
fd.append("file", file);
const xhr = new XMLHttpRequest();
currentXhr = xhr;
setupXHRHandlers(xhr);
xhr.open("POST", "/api/files/upload");
xhr.send(fd);
}
function handleUploadMulti(fileList) {
startUploadUI();
const fd = commonFormData();
Array.from(fileList).forEach(f => fd.append("files", f));
const xhr = new XMLHttpRequest();
currentXhr = xhr;
setupXHRHandlers(xhr);
xhr.open("POST", "/api/files/upload-multi");
xhr.send(fd);
}
function copy(id) {
const el = document.getElementById(id);
el.select();
document.execCommand('copy');
}
</script>
<script src="/static/js/upload.js"></script>
</body>
</html>