Add size, upload speed indicator

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 @@
                     <div id="progress-bar" class="h-full bg-black" style="width:0%"></div>
                 </div>
 
-                <div id="progress-text" class="text-xs mt-1 hidden">0%</div>
+                <div class="flex justify-between items-center mt-1">
+                    <div id="progress-text" class="text-[10px] font-bold hidden">0%</div>
+                    <div id="stats-text" class="text-[10px] font-bold hidden uppercase">
+                        <span id="speed-text">0 KB/S</span>
+                        <span class="mx-1 opacity-30">|</span>
+                        <span id="eta-text">--:--</span>
+                    </div>
+                </div>
             </div>
 
             <div class="space-y-4">
@@ -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();
             }
         };