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 @@
- +
+ + +
@@ -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(); } };