diff --git a/templates/index.html b/templates/index.html
index 7afaed3..7fb941e 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -49,7 +49,6 @@
color: #fff;
}
- /* Disabled State */
button:disabled {
background: #f0f0f0;
color: #999;
@@ -57,7 +56,6 @@
cursor: not-allowed;
}
- /* New Cancel Style */
.btn-cancel {
background: #fff;
color: #cc0000;
@@ -112,7 +110,14 @@
- 0%
+
+
0%
+
+ 0 KB/S
+ |
+ --:--
+
+
@@ -172,8 +177,38 @@
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;
+ // Helper: Human Readable Size
+ 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];
+ }
+
+ // Helper: Human Readable Time
+ 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) => {
@@ -201,7 +236,7 @@
function showFile(file) {
document.getElementById('dz-text').innerText =
- file.name + " (" + Math.round(file.size / 1024) + " KB)";
+ `${file.name} (${formatBytes(file.size)})`;
}
uploadBtn.onclick = () => {
@@ -222,12 +257,9 @@
uploadBtn.innerText = "UPLOADING...";
cancelBtn.classList.remove('hidden');
- const progressContainer = document.getElementById("progress-container");
- const progressBar = document.getElementById("progress-bar");
- const progressText = document.getElementById("progress-text");
-
progressContainer.classList.remove("hidden");
progressText.classList.remove("hidden");
+ statsText.classList.remove("hidden");
const fd = new FormData();
fd.append("file", file);
@@ -236,11 +268,23 @@
const xhr = new XMLHttpRequest();
currentXhr = 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);
+ }
}
};
@@ -258,7 +302,7 @@
document.getElementById('res-url').value = dlUrl;
document.getElementById('res-del').value = delUrl;
} catch (err) {
- alert(err.message);
+ alert(err.message || "An error occurred");
location.reload();
}
};