Update app.py

app.py

@@ -437,7 +437,7 @@ HTML_CONTENT = """
             overflow: auto;
         }
 
-        .quick-open-content {
+                .quick-open-content {
             margin: 5% auto;
             padding: 20px;
             width: 90%;
@@ -445,7 +445,7 @@ HTML_CONTENT = """
             text-align: center;
         }
 
-                .quick-open-content img,
+        .quick-open-content img,
         .quick-open-content video,
         .quick-open-content audio {
             max-width: 100%;
@@ -698,11 +698,29 @@ HTML_CONTENT = """
             const formData = new FormData();
             formData.append('file', file);
 
+            const startTime = Date.now();
+            let lastUpdateTime = startTime;
+            let lastLoaded = 0;
+
             while (true) {
                 try {
                     const xhr = new XMLHttpRequest();
                     xhr.open('POST', '/upload', true);
-                    xhr.upload.onprogress = (event) => updateProgress(event, progressBar.querySelector('.progress'));
+                    xhr.upload.onprogress = (event) => {
+                        const currentTime = Date.now();
+                        const elapsedTime = (currentTime - startTime) / 1000; // in seconds
+                        const loadedSinceLastUpdate = event.loaded - lastLoaded;
+                        const timeSinceLastUpdate = (currentTime - lastUpdateTime) / 1000; // in seconds
+                        
+                        const uploadSpeed = loadedSinceLastUpdate / timeSinceLastUpdate; // bytes per second
+                        const remainingBytes = event.total - event.loaded;
+                        const estimatedTimeRemaining = remainingBytes / uploadSpeed;
+                        
+                        updateProgress(event, progressBar.querySelector('.progress'), elapsedTime, estimatedTimeRemaining);
+                        
+                        lastUpdateTime = currentTime;
+                        lastLoaded = event.loaded;
+                    };
                     
                     xhr.onload = function() {
                         if (xhr.status === 200) {
@@ -749,16 +767,34 @@ HTML_CONTENT = """
             label.textContent = fileName;
             label.style.fontSize = '0.8rem';
             label.style.marginBottom = '5px';
+            const timeEstimate = document.createElement('div');
+            timeEstimate.id = 'timeEstimate';
+            timeEstimate.style.fontSize = '0.8rem';
+            timeEstimate.style.marginTop = '5px';
             const container = document.createElement('div');
             container.appendChild(label);
             container.appendChild(progressBarContainer);
+            container.appendChild(timeEstimate);
             return container;
         }
 
-        function updateProgress(event, progressBar) {
+        function updateProgress(event, progressBar, elapsedTime, estimatedTimeRemaining) {
             if (event.lengthComputable) {
                 const percentComplete = (event.loaded / event.total) * 100;
                 progressBar.style.width = percentComplete + '%';
+                
+                const timeEstimate = document.getElementById('timeEstimate');
+                timeEstimate.textContent = `${percentComplete.toFixed(1)}% - ${formatTime(elapsedTime)} elapsed, ${formatTime(estimatedTimeRemaining)} remaining`;
+            }
+        }
+
+        function formatTime(seconds) {
+            if (seconds < 60) {
+                return `${Math.round(seconds)} seconds`;
+            } else if (seconds < 3600) {
+                return `${Math.round(seconds / 60)} minutes`;
+            } else {
+                return `${Math.round(seconds / 3600)} hours`;
             }
         }
 
@@ -839,7 +875,7 @@ HTML_CONTENT = """
             localStorage.setItem('uploadHistory', JSON.stringify(history));
         }
 
-        function showHistory() {
+                function showHistory() {
             const history = JSON.parse(localStorage.getItem('uploadHistory')) || [];
             historyList.innerHTML = '';
             history.forEach(item => {
@@ -889,7 +925,7 @@ HTML_CONTENT = """
             historyModal.style.display = "block";
         }
 
-                function quickOpen(url, fileName, originalExtension) {
+        function quickOpen(url, fileName, originalExtension) {
             quickOpenContent.innerHTML = '';
             const fullUrl = window.location.origin + url;
             
@@ -1099,4 +1135,4 @@ async def retry_upload(upload_url: str, file_content: bytes, content_type: str,
         await asyncio.sleep(delay)
         delay = min(delay * 2, 60)
     
-    return False
+    return False