Select+delete multiple files at once

src/network/html/FilesPage.html

@@ -297,6 +297,28 @@
       font-size: 0.9em;
       color: #7f8c8d;
     }
+    #delete-progress-container {
+      margin-top: 15px;
+    }
+    #delete-progress-bar {
+      width: 100%;
+      height: 20px;
+      background-color: #e0e0e0;
+      border-radius: 10px;
+      overflow: hidden;
+    }
+    #delete-progress-fill {
+      height: 100%;
+      background-color: #e74c3c;
+      width: 0%;
+      transition: width 0.3s;
+    }
+    #delete-progress-text {
+      text-align: center;
+      margin-top: 5px;
+      font-size: 0.9em;
+      color: #7f8c8d;
+    }
     .folder-form {
       margin-top: 10px;
     }
@@ -435,6 +457,28 @@
       font-weight: 600;
       color: #2c3e50;
       word-break: break-all;
+      padding: 10px;
+      background-color: #f8f9fa;
+      border-radius: 4px;
+      margin: 10px 0;
+      border: 1px solid #e0e0e0;
+    }
+    .delete-items-list {
+      max-height: 200px;
+      overflow-y: auto;
+      padding: 10px;
+      background-color: #f8f9fa;
+      border-radius: 4px;
+      margin: 10px 0;
+      border: 1px solid #e0e0e0;
+    }
+    .delete-items-list-item {
+      padding: 8px 5px;
+      border-bottom: 1px solid #e0e0e0;
+      color: #2c3e50;
+    }
+    .delete-items-list-item:last-child {
+      border-bottom: none;
     }
     .delete-btn-confirm {
       background-color: #e74c3c;
@@ -463,6 +507,37 @@
     .delete-btn-cancel:hover {
       background-color: #7f8c8d;
     }
+    /* Checkbox styles */
+    .checkbox-col {
+      width: 40px;
+      text-align: center;
+    }
+    .file-checkbox {
+      width: 18px;
+      height: 18px;
+      cursor: pointer;
+    }
+    .select-all-checkbox {
+      width: 18px;
+      height: 18px;
+      cursor: pointer;
+    }
+    .delete-selected-btn {
+      background-color: #e74c3c;
+      color: white;
+      padding: 10px 20px;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 1em;
+    }
+    .delete-selected-btn:hover {
+      background-color: #c0392b;
+    }
+    .delete-selected-btn:disabled {
+      background-color: #95a5a6;
+      cursor: not-allowed;
+    }
     .loader-container {
       display: flex;
       justify-content: center;
@@ -560,6 +635,14 @@
       .actions-col {
         width: 40px;
       }
+      .checkbox-col {
+        width: 30px;
+      }
+      .file-checkbox,
+      .select-all-checkbox {
+        width: 16px;
+        height: 16px;
+      }
       .delete-btn {
         font-size: 1em;
         padding: 2px 4px;
@@ -586,6 +669,7 @@
   <div class="action-buttons">
     <button class="action-btn upload-action-btn" onclick="openUploadModal()">📤 Upload</button>
     <button class="action-btn folder-action-btn" onclick="openFolderModal()">📁 New Folder</button>
+    <button class="delete-selected-btn" id="deleteSelectedBtn" onclick="deleteSelectedFiles()" disabled>🗑️ Delete Selected</button>
   </div>
 </div>
 
@@ -652,11 +736,12 @@
 <div class="modal-overlay" id="deleteModal">
   <div class="modal">
     <button class="modal-close" onclick="closeDeleteModal()">&times;</button>
-    <h3>🗑️ Delete Item</h3>
+    <h3 id="deleteModalTitle">🗑️ Delete Item</h3>
     <div class="folder-form">
       <p class="delete-warning">⚠️ This action cannot be undone!</p>
-      <p class="file-info">Are you sure you want to delete:</p>
+      <p class="file-info" id="deleteModalQuestion">Are you sure you want to delete:</p>
-      <p class="delete-item-name" id="deleteItemName"></p>
+      <p class="delete-item-name" id="deleteItemName" style="display: none;"></p>
+      <div class="delete-items-list" id="deleteItemsList" style="display: none;"></div>
       <input type="hidden" id="deleteItemPath">
       <input type="hidden" id="deleteItemType">
       <button class="delete-btn-confirm" onclick="confirmDelete()">Delete</button>
@@ -739,7 +824,7 @@
       fileTable.innerHTML = '<div class="no-files">This folder is empty</div>';
     } else {
       let fileTableContent = '<table class="file-table">';
-      fileTableContent += '<tr><th>Name</th><th>Type</th><th>Size</th><th class="actions-col">Actions</th></tr>';
+      fileTableContent += '<tr><th class="checkbox-col"><input type="checkbox" class="select-all-checkbox" onchange="toggleSelectAll(this)"></th><th>Name</th><th>Type</th><th>Size</th><th class="actions-col">Actions</th></tr>';
 
       const sortedFiles = files.sort((a, b) => {
         // Directories first, then epub files, then other files, alphabetically within each group
@@ -757,6 +842,7 @@
           folderPath += file.name;
 
           fileTableContent += '<tr class="folder-row">';
+          fileTableContent += `<td class="checkbox-col"><input type="checkbox" class="file-checkbox" data-path="${folderPath.replaceAll('"', '&quot;')}" data-name="${escapeHtml(file.name)}" data-type="folder" onchange="updateDeleteButton()"></td>`;
           fileTableContent += `<td><span class="file-icon">📁</span><a href="/files?path=${encodeURIComponent(folderPath)}" class="folder-link">${escapeHtml(file.name)}</a><span class="folder-badge">FOLDER</span></td>`;
           fileTableContent += '<td>Folder</td>';
           fileTableContent += '<td>-</td>';
@@ -768,6 +854,7 @@
           filePath += file.name;
 
           fileTableContent += `<tr class="${file.isEpub ? 'epub-file' : ''}">`;
+          fileTableContent += `<td class="checkbox-col"><input type="checkbox" class="file-checkbox" data-path="${filePath.replaceAll('"', '&quot;')}" data-name="${escapeHtml(file.name)}" data-type="file" onchange="updateDeleteButton()"></td>`;
           fileTableContent += `<td><span class="file-icon">${file.isEpub ? '📗' : '📄'}</span>${escapeHtml(file.name)}`;
           if (file.isEpub) fileTableContent += '<span class="epub-badge">EPUB</span>';
           fileTableContent += '</td>';
@@ -817,6 +904,71 @@
 
 let failedUploadsGlobal = [];
 
+/**
+ * Generic function to process items sequentially with progress updates
+ * @param {Array} items - Array of items to process
+ * @param {Function} processItem - Function to process each item, returns a Promise
+ * @param {Function} updateProgress - Function to update progress UI
+ * @param {Function} onComplete - Function called when all items are processed
+ * @param {String} itemType - Type of items being processed (for display purposes)
+ */
+async function processItemsSequentially(items, processItem, updateProgress, onComplete, itemType = 'item') {
+  let currentIndex = 0;
+  const failedItems = [];
+
+  async function processNext() {
+    if (currentIndex >= items.length) {
+      // All items processed
+      onComplete(failedItems);
+      return;
+    }
+
+    const item = items[currentIndex];
+    updateProgress(item, currentIndex, items.length, 'in-progress');
+
+    try {
+      await processItem(item, currentIndex);
+      // Success - move to next
+      currentIndex++;
+      processNext();
+    } catch (error) {
+      // Failure - track it and continue
+      failedItems.push({ item, error: error.message || 'Unknown error' });
+      currentIndex++;
+      processNext();
+    }
+  }
+
+  processNext();
+}
+
+// Checkbox management functions
+function toggleSelectAll(checkbox) {
+  const allCheckboxes = document.querySelectorAll('.file-checkbox');
+  allCheckboxes.forEach(cb => {
+    cb.checked = checkbox.checked;
+  });
+  updateDeleteButton();
+}
+
+function updateDeleteButton() {
+  const checkedBoxes = document.querySelectorAll('.file-checkbox:checked');
+  const deleteBtn = document.getElementById('deleteSelectedBtn');
+  if (deleteBtn) {
+    deleteBtn.disabled = checkedBoxes.length === 0;
+  }
+  
+  // Update select-all checkbox state
+  const allCheckboxes = document.querySelectorAll('.file-checkbox');
+  const selectAllCheckbox = document.querySelector('.select-all-checkbox');
+  if (selectAllCheckbox && allCheckboxes.length > 0) {
+    const allChecked = Array.from(allCheckboxes).every(cb => cb.checked);
+    const someChecked = Array.from(allCheckboxes).some(cb => cb.checked);
+    selectAllCheckbox.checked = allChecked;
+    selectAllCheckbox.indeterminate = someChecked && !allChecked;
+  }
+}
+
 function uploadFile() {
   const fileInput = document.getElementById('fileInput');
   const files = Array.from(fileInput.files);
@@ -837,6 +989,42 @@ function uploadFile() {
   let currentIndex = 0;
   const failedFiles = [];
 
+  function uploadSingleFile(file, index) {
+    return new Promise((resolve, reject) => {
+      const formData = new FormData();
+      formData.append('file', file);
+
+      const xhr = new XMLHttpRequest();
+      xhr.open('POST', '/upload?path=' + encodeURIComponent(currentPath), true);
+
+      progressFill.style.width = '0%';
+      progressFill.style.backgroundColor = '#4caf50';
+      progressText.textContent = `Uploading ${file.name} (${index + 1}/${files.length})`;
+
+      xhr.upload.onprogress = function (e) {
+        if (e.lengthComputable) {
+          const percent = Math.round((e.loaded / e.total) * 100);
+          progressFill.style.width = percent + '%';
+          progressText.textContent = `Uploading ${file.name} (${index + 1}/${files.length}) — ${percent}%`;
+        }
+      };
+
+      xhr.onload = function () {
+        if (xhr.status === 200) {
+          resolve();
+        } else {
+          reject(new Error(xhr.responseText || 'Upload failed'));
+        }
+      };
+
+      xhr.onerror = function () {
+        reject(new Error('Network error'));
+      };
+
+      xhr.send(formData);
+    });
+  }
+
   function uploadNextFile() {
     if (currentIndex >= files.length) {
       // All files processed - show summary
@@ -845,67 +1033,36 @@ function uploadFile() {
         progressText.textContent = 'All uploads complete!';
         setTimeout(() => {
           closeUploadModal();
-          hydrate(); // Refresh file list instead of reloading
+          hydrate();
         }, 1000);
       } else {
         progressFill.style.backgroundColor = '#e74c3c';
         const failedList = failedFiles.map(f => f.name).join(', ');
         progressText.textContent = `${files.length - failedFiles.length}/${files.length} uploaded. Failed: ${failedList}`;
         
-        // Store failed files globally and show banner
         failedUploadsGlobal = failedFiles;
         
         setTimeout(() => {
           closeUploadModal();
           showFailedUploadsBanner();
-          hydrate(); // Refresh file list to show successfully uploaded files
+          hydrate();
         }, 2000);
       }
       return;
     }
 
     const file = files[currentIndex];
-    const formData = new FormData();
-    formData.append('file', file);
     
-    const xhr = new XMLHttpRequest();
+    uploadSingleFile(file, currentIndex)
-    // Include path as query parameter since multipart form data doesn't make
+      .then(() => {
-    // form fields available until after file upload completes
-    xhr.open('POST', '/upload?path=' + encodeURIComponent(currentPath), true);
-
-    progressFill.style.width = '0%';
-    progressFill.style.backgroundColor = '#4caf50';
-    progressText.textContent = `Uploading ${file.name} (${currentIndex + 1}/${files.length})`;
-
-    xhr.upload.onprogress = function (e) {
-      if (e.lengthComputable) {
-        const percent = Math.round((e.loaded / e.total) * 100);
-        progressFill.style.width = percent + '%';
-        progressText.textContent =
-          `Uploading ${file.name} (${currentIndex + 1}/${files.length}) — ${percent}%`;
-      }
-    };
-
-    xhr.onload = function () {
-      if (xhr.status === 200) {
-        currentIndex++;
-        uploadNextFile(); // upload next file
-      } else {
-        // Track failure and continue with next file
-        failedFiles.push({ name: file.name, error: xhr.responseText, file: file });
         currentIndex++;
         uploadNextFile();
-      }
+      })
-    };
+      .catch((error) => {
-
+        failedFiles.push({ name: file.name, error: error.message, file: file });
-    xhr.onerror = function () {
+        currentIndex++;
-      // Track network error and continue with next file
+        uploadNextFile();
-      failedFiles.push({ name: file.name, error: 'network error', file: file });
+      });
-      currentIndex++;
-      uploadNextFile();
-    };
-
-    xhr.send(formData);
   }
 
   uploadNextFile();
@@ -988,6 +1145,24 @@ function retryAllFailedUploads() {
   validateFile();
 }
 
+function deleteSelectedFiles() {
+  const checkedBoxes = document.querySelectorAll('.file-checkbox:checked');
+  
+  if (checkedBoxes.length === 0) {
+    alert('Please select at least one item to delete!');
+    return;
+  }
+
+  const items = Array.from(checkedBoxes).map(checkbox => ({
+    path: checkbox.dataset.path,
+    name: checkbox.dataset.name,
+    type: checkbox.dataset.type
+  }));
+
+  // Open the delete modal with all selected items
+  openDeleteModalMultiple(items);
+}
+
   function createFolder() {
     const folderName = document.getElementById('folderName').value.trim();
 
@@ -1026,43 +1201,166 @@ function retryAllFailedUploads() {
   }
 
   // Delete functions
+  let itemsToDelete = [];
+
   function openDeleteModal(name, path, isFolder) {
+    // Single item deletion
+    itemsToDelete = [{ name, path, type: isFolder ? 'folder' : 'file' }];
+    
+    document.getElementById('deleteModalTitle').textContent = '🗑️ Delete Item';
+    document.getElementById('deleteModalQuestion').textContent = 'Are you sure you want to delete:';
     document.getElementById('deleteItemName').textContent = (isFolder ? '📁 ' : '📄 ') + name;
+    document.getElementById('deleteItemName').style.display = 'block';
+    document.getElementById('deleteItemsList').style.display = 'none';
     document.getElementById('deleteItemPath').value = path;
     document.getElementById('deleteItemType').value = isFolder ? 'folder' : 'file';
     document.getElementById('deleteModal').classList.add('open');
   }
 
+  function openDeleteModalMultiple(items) {
+    // Multiple items deletion
+    itemsToDelete = items;
+    
+    document.getElementById('deleteModalTitle').textContent = `🗑️ Delete ${items.length} Items`;
+    document.getElementById('deleteModalQuestion').textContent = `Are you sure you want to delete these ${items.length} items:`;
+    document.getElementById('deleteItemName').style.display = 'none';
+    
+    const listContainer = document.getElementById('deleteItemsList');
+    listContainer.innerHTML = items.map(item => 
+      `<div class="delete-items-list-item">${item.type === 'folder' ? '📁' : '📄'} ${escapeHtml(item.name)}</div>`
+    ).join('');
+    listContainer.style.display = 'block';
+    
+    document.getElementById('deleteModal').classList.add('open');
+  }
+
   function closeDeleteModal() {
     document.getElementById('deleteModal').classList.remove('open');
   }
 
   function confirmDelete() {
-    const path = document.getElementById('deleteItemPath').value;
+    if (itemsToDelete.length === 1) {
-    const itemType = document.getElementById('deleteItemType').value;
+      // Single item - simple delete
+      const item = itemsToDelete[0];
+      const formData = new FormData();
+      formData.append('path', item.path);
+      formData.append('type', item.type);
 
-    const formData = new FormData();
+      const xhr = new XMLHttpRequest();
-    formData.append('path', path);
+      xhr.open('POST', '/delete', true);
-    formData.append('type', itemType);
 
-    const xhr = new XMLHttpRequest();
+      xhr.onload = function() {
-    xhr.open('POST', '/delete', true);
+        if (xhr.status === 200) {
+          closeDeleteModal();
+          hydrate();
+        } else {
+          alert('Failed to delete: ' + xhr.responseText);
+          closeDeleteModal();
+        }
+      };
 
-    xhr.onload = function() {
+      xhr.onerror = function() {
-      if (xhr.status === 200) {
+        alert('Failed to delete - network error');
-        window.location.reload();
-      } else {
-        alert('Failed to delete: ' + xhr.responseText);
         closeDeleteModal();
-      }
+      };
-    };
 
-    xhr.onerror = function() {
+      xhr.send(formData);
-      alert('Failed to delete - network error');
+    } else {
+      // Multiple items - show progress
       closeDeleteModal();
-    };
+      performMultipleDeletes(itemsToDelete);
+    }
+  }
 
-    xhr.send(formData);
+  function performMultipleDeletes(items) {
+    // Create progress overlay
+    const progressOverlay = document.createElement('div');
+    progressOverlay.className = 'modal-overlay open';
+    progressOverlay.innerHTML = `
+      <div class="modal">
+        <h3>🗑️ Deleting items...</h3>
+        <div id="delete-progress-container">
+          <div id="delete-progress-bar"><div id="delete-progress-fill"></div></div>
+          <div id="delete-progress-text"></div>
+        </div>
+      </div>
+    `;
+    document.body.appendChild(progressOverlay);
+
+    const progressFill = document.getElementById('delete-progress-fill');
+    const progressText = document.getElementById('delete-progress-text');
+
+    let currentIndex = 0;
+    const failedDeletes = [];
+
+    function deleteSingleItem(item, index) {
+      return new Promise((resolve, reject) => {
+        const formData = new FormData();
+        formData.append('path', item.path);
+        formData.append('type', item.type);
+
+        const xhr = new XMLHttpRequest();
+        xhr.open('POST', '/delete', true);
+
+        progressText.textContent = `Deleting ${item.name} (${index + 1}/${items.length})`;
+
+        xhr.onload = function () {
+          if (xhr.status === 200) {
+            const percent = Math.round(((index + 1) / items.length) * 100);
+            progressFill.style.width = percent + '%';
+            resolve();
+          } else {
+            reject(new Error(xhr.responseText || 'Delete failed'));
+          }
+        };
+
+        xhr.onerror = function () {
+          reject(new Error('Network error'));
+        };
+
+        xhr.send(formData);
+      });
+    }
+
+    function deleteNextItem() {
+      if (currentIndex >= items.length) {
+        // All items processed
+        if (failedDeletes.length === 0) {
+          progressFill.style.backgroundColor = '#4caf50';
+          progressText.textContent = 'All items deleted successfully!';
+          setTimeout(() => {
+            document.body.removeChild(progressOverlay);
+            hydrate();
+          }, 1000);
+        } else {
+          progressFill.style.backgroundColor = '#e74c3c';
+          const failedList = failedDeletes.map(f => f.name).join(', ');
+          progressText.textContent = `${items.length - failedDeletes.length}/${items.length} deleted. Failed: ${failedList}`;
+          
+          setTimeout(() => {
+            document.body.removeChild(progressOverlay);
+            alert(`Failed to delete: ${failedList}\n\nPlease try again or check server logs.`);
+            hydrate();
+          }, 3000);
+        }
+        return;
+      }
+
+      const item = items[currentIndex];
+      
+      deleteSingleItem(item, currentIndex)
+        .then(() => {
+          currentIndex++;
+          deleteNextItem();
+        })
+        .catch((error) => {
+          failedDeletes.push({ name: item.name, error: error.message });
+          currentIndex++;
+          deleteNextItem();
+        });
+    }
+
+    deleteNextItem();
   }
 
   hydrate();