Con barra de progreso

static/app.js

@@ -208,7 +208,7 @@ document.getElementById('setBootOrderForm').addEventListener('submit', async (e)
     }
 });
 
-document.getElementById('uploadIsoForm').addEventListener('submit', async (e) => {
+document.getElementById('uploadIsoForm').addEventListener('submit', (e) => {
     e.preventDefault();
     const fileInput = document.getElementById('isoFile');
     const file = fileInput.files[0];
@@ -219,23 +219,54 @@ document.getElementById('uploadIsoForm').addEventListener('submit', async (e) =>
     const formData = new FormData();
     formData.append('file', file);
     
-    try {
-        const response = await fetch(`${API_BASE}/upload-iso`, {
-            method: 'POST',
-            body: formData
-        });
-        const result = await response.json();
-        if (response.ok) {
+    const progressContainer = document.getElementById('progressContainer');
+    const progressBar = document.getElementById('uploadProgress');
+    const uploadBtn = document.getElementById('uploadBtn');
+    
+    // Show progress bar
+    progressContainer.style.display = 'block';
+    uploadBtn.disabled = true;
+    progressBar.style.width = '0%';
+    progressBar.textContent = '0%';
+    
+    const xhr = new XMLHttpRequest();
+    
+    xhr.upload.addEventListener('progress', (e) => {
+        if (e.lengthComputable) {
+            const percentComplete = Math.round((e.loaded / e.total) * 100);
+            progressBar.style.width = percentComplete + '%';
+            progressBar.textContent = percentComplete + '%';
+        }
+    });
+    
+    xhr.addEventListener('load', () => {
+        if (xhr.status === 200) {
+            const result = JSON.parse(xhr.responseText);
             alert(result.message);
-            loadISOsForSelect();  // Refresh ISO list
+            loadISOsForSelect();
             document.getElementById('uploadIsoForm').reset();
+            progressContainer.style.display = 'none';
+            uploadBtn.disabled = false;
         } else {
-            alert(result.error || 'Error uploading ISO');
+            try {
+                const result = JSON.parse(xhr.responseText);
+                alert(result.error || 'Error uploading ISO');
+            } catch {
+                alert('Error uploading ISO');
+            }
+            progressContainer.style.display = 'none';
+            uploadBtn.disabled = false;
         }
-    } catch (error) {
-        console.error('Error uploading ISO:', error);
+    });
+    
+    xhr.addEventListener('error', () => {
         alert('Error uploading ISO');
-    }
+        progressContainer.style.display = 'none';
+        uploadBtn.disabled = false;
+    });
+    
+    xhr.open('POST', `${API_BASE}/upload-iso`);
+    xhr.send(formData);
 });
 
 // Load VMs on page load

static/index.html

@@ -77,7 +77,13 @@
                         <label for="isoFile" class="form-label">Select ISO File</label>
                         <input type="file" class="form-control" id="isoFile" accept=".iso" required>
                     </div>
-                    <button type="submit" class="btn btn-secondary">Upload ISO</button>
+                    <div class="mb-3" id="progressContainer" style="display: none;">
+                        <label for="uploadProgress" class="form-label">Progress</label>
+                        <div class="progress">
+                            <div class="progress-bar" id="uploadProgress" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
+                        </div>
+                    </div>
+                    <button type="submit" class="btn btn-secondary" id="uploadBtn">Upload ISO</button>
                 </form>
                 
                 <h2 class="mt-4">Manage ISOs</h2>