upload progress bar

public/app.js

@@ -385,22 +385,87 @@ dropZone.addEventListener('drop', (e) => {
     }
 });
 
+// File Input Change
+document.getElementById('file-input').addEventListener('change', (e) => {
+    if (e.target.files.length > 0) {
+        uploadFiles(e.target.files);
+        // Reset input so same file can be selected again if needed
+        e.target.value = '';
+    }
+});
+
 async function uploadFiles(files) {
     const statusDiv = document.getElementById('upload-status');
+    const progressContainer = document.getElementById('progress-container');
+    const progressBar = document.getElementById('progress-bar');
+    const progressText = document.getElementById('progress-text');
+
     statusDiv.innerHTML = 'Uploading...';
+    progressContainer.classList.remove('hidden');
+    progressBar.style.width = '0%';
+    progressText.textContent = '0%';
+
+    let totalSize = 0;
+    for (let file of files) totalSize += file.size;
+
+    // Avoid division by zero
+    if (totalSize === 0) totalSize = 1;
+
+    let previousFilesSize = 0;
 
     for (let file of files) {
-        const formData = new FormData();
-        formData.append('file', file);
-        if (currentPath) {
-            await fetch(`/api/upload?path=${encodeURIComponent(currentPath)}`, { method: 'POST', body: formData });
-        } else {
-            await fetch('/api/upload', { method: 'POST', body: formData });
+        try {
+            await new Promise((resolve, reject) => {
+                const xhr = new XMLHttpRequest();
+                const formData = new FormData();
+                formData.append('file', file);
+
+                const url = currentPath
+                    ? `/api/upload?path=${encodeURIComponent(currentPath)}`
+                    : '/api/upload';
+
+                xhr.open('POST', url);
+
+                xhr.upload.onprogress = (e) => {
+                    if (e.lengthComputable) {
+                        const currentLoaded = e.loaded;
+                        const totalLoaded = previousFilesSize + currentLoaded;
+                        const percent = Math.min(100, Math.round((totalLoaded / totalSize) * 100));
+                        progressBar.style.width = percent + '%';
+                        progressText.textContent = percent + '%';
+                    }
+                };
+
+                xhr.onload = () => {
+                    if (xhr.status >= 200 && xhr.status < 300) {
+                        resolve();
+                    } else {
+                        reject(new Error(`Upload failed: ${xhr.statusText}`));
+                    }
+                };
+
+                xhr.onerror = () => reject(new Error('Network Error'));
+
+                xhr.send(formData);
+            });
+            previousFilesSize += file.size;
+        } catch (e) {
+            console.error(e);
+            statusDiv.innerHTML = `<span style="color:var(--danger-color)">Error uploading ${file.name}</span>`;
         }
     }
 
+    progressBar.style.width = '100%';
+    progressText.textContent = '100%';
     statusDiv.innerHTML = 'Done!';
-    setTimeout(() => statusDiv.innerHTML = '', 2000);
+
+    setTimeout(() => {
+        statusDiv.innerHTML = '';
+        progressContainer.classList.add('hidden');
+        progressBar.style.width = '0%';
+        progressText.textContent = '0%';
+    }, 2000);
+
     loadFiles();
 }