Progress Modal on download buttons

2025-04-08 20:30:17 -04:00
parent 703c93db25
commit f65b151bc3
8 changed files with 152 additions and 18 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -20,6 +20,14 @@
  - Updated the t() function to be more defensive against missing keys.
  - Provided instructions and code examples to ensure the language change settings are reliably saved and applied across sessions.

+- **ZIP Download Flow**
+  - Progress Modal: In the ZIP download handler (confirmDownloadZip), added code to show a progress modal (with a spinning icon) as soon as the user confirms the download and before the request to create the ZIP begins. Once the blob is received or an error occurs, we hide the progress modal.
+  - Inline Handlers and Global Exposure: Ensured that functions like confirmDownloadZip are attached to the global window object (or called via appropriate inline handlers) so that the inline onclick events in the HTML work without reference errors.
+
+- **Single File Download Flow**
+  - Modal Popup for Single File: Replaced the direct download link for single files with a modal-driven flow. When the download button is clicked, the openDownloadModal(fileName, folder) function is called. This stores the file details and shows a modal where the user can confirm (or edit) the file name.
+  - Confirm Download Function: When the user clicks the Download button in the modal, the confirmSingleDownload() function is called. This function constructs a URL for download.php (using GET parameters for folder and file), fetches the file as a blob, and triggers a download using a temporary anchor element. A progress modal is also used here to give feedback during the download process.
+
 ---

 ## Changes 4/7/2025 v1.0.9
--- a/css/styles.css
+++ b/css/styles.css
@@ -2065,6 +2065,20 @@ body.dark-mode .admin-panel-content label {
  animation: spin 1s linear infinite;
 }

+.download-spinner {
+  font-size: 48px;
+  animation: spin 2s linear infinite;
+  color: var(--download-spinner-color, #000);
+}
+
+body:not(.dark-mode) {
+  --download-spinner-color: #000;
+}
+
+body.dark-mode {
+  --download-spinner-color: #fff;
+}
+
 .rise-effect {
  transform: translateY(-20px);
  transition: transform 0.3s ease;
--- a/index.html
+++ b/index.html
@@ -342,6 +342,28 @@
    </div> <!-- end mainColumn -->
  </div> <!-- end main-wrapper -->

+  <!-- Download Progress Modal -->
+  <div id="downloadProgressModal" class="modal" style="display: none;">
+    <div class="modal-content" style="text-align: center; padding: 20px;">
+      <!-- Material icon spinner with a dedicated class -->
+      <span class="material-icons download-spinner">autorenew</span>
+      <p>Preparing your download...</p>
+    </div>
+  </div>
+
+  <!-- Single File Download Modal -->
+<div id="downloadFileModal" class="modal" style="display: none;">
+  <div class="modal-content" style="text-align: center; padding: 20px;">
+    <h4>Download File</h4>
+    <p>Confirm or change the download file name:</p>
+    <input type="text" id="downloadFileNameInput" class="form-control" placeholder="Filename" />
+    <div style="margin-top: 15px; text-align: right;">
+      <button id="cancelDownloadFile" class="btn btn-secondary" onclick="document.getElementById('downloadFileModal').style.display = 'none';">Cancel</button>
+      <button id="confirmSingleDownloadButton" class="btn btn-primary" onclick="confirmSingleDownload()">Download</button>
+    </div>
+  </div>
+</div>
+
  <!-- Change Password, Add User, Remove User, Rename File, and Custom Confirm Modals (unchanged) -->
  <div id="changePasswordModal" class="modal" style="display:none;">
    <div class="modal-content" style="max-width:400px; margin:auto;">
--- a/js/domUtils.js
+++ b/js/domUtils.js
@@ -1,5 +1,6 @@
 // domUtils.js
 import { t } from './i18n.js';
+import { openDownloadModal } from './fileActions.js';

 // Basic DOM Helpers
 export function toggleVisibility(elementId, shouldShow) {
@@ -165,11 +166,11 @@ export function buildFileTableRow(file, folderPath) {
    <td class="hide-small hide-medium nowrap">${safeUploader}</td>
    <td>
      <div class="button-wrap" style="display: flex; justify-content: left; gap: 5px;">
-        <a class="btn btn-sm btn-success download-btn" 
-           href="download.php?folder=${encodeURIComponent(file.folder || 'root')}&file=${encodeURIComponent(file.name)}" 
-           title="Download">
-          <i class="material-icons">file_download</i>
-        </a>
+        <button type="button" class="btn btn-sm btn-success download-btn" 
+          onclick="openDownloadModal('${file.name}', '${file.folder || 'root'}')" 
+          title="Download">
+        <i class="material-icons">file_download</i>
+        </button>
        ${file.editable ? `
          <button class="btn btn-sm edit-btn" 
                  onclick='editFile(${JSON.stringify(file.name)}, ${JSON.stringify(file.folder || "root")})'
--- a/js/fileActions.js
+++ b/js/fileActions.js
@@ -28,7 +28,7 @@ document.addEventListener("DOMContentLoaded", function () {
      window.filesToDelete = [];
    });
  }
-  
+
  const confirmDelete = document.getElementById("confirmDeleteFiles");
  if (confirmDelete) {
    confirmDelete.addEventListener("click", function () {
@@ -76,6 +76,81 @@ export function handleDownloadZipSelected(e) {
  }, 100);
 };

+export function openDownloadModal(fileName, folder) {
+  // Store file details globally for the download confirmation function.
+  window.singleFileToDownload = fileName;
+  window.currentFolder = folder || "root";
+  
+  // Optionally pre-fill the file name input in the modal.
+  const input = document.getElementById("downloadFileNameInput");
+  if (input) {
+    input.value = fileName; // Use file name as-is (or modify if desired)
+  }
+  
+  // Show the single file download modal (a new modal element).
+  document.getElementById("downloadFileModal").style.display = "block";
+  
+  // Optionally focus the input after a short delay.
+  setTimeout(() => {
+    if (input) input.focus();
+  }, 100);
+}
+
+export function confirmSingleDownload() {
+  // Get the file name from the modal. Users can change it if desired.
+  let fileName = document.getElementById("downloadFileNameInput").value.trim();
+  if (!fileName) {
+    showToast("Please enter a name for the file.");
+    return;
+  }
+  
+  // Hide the download modal.
+  document.getElementById("downloadFileModal").style.display = "none";
+  // Show the progress modal (same as in your ZIP download flow).
+  document.getElementById("downloadProgressModal").style.display = "block";
+  
+  // Build the URL for download.php using GET parameters.
+  const folder = window.currentFolder || "root";
+  const downloadURL = "download.php?folder=" + encodeURIComponent(folder) +
+                      "&file=" + encodeURIComponent(window.singleFileToDownload);
+  
+  fetch(downloadURL, {
+    method: "GET",
+    credentials: "include"
+  })
+    .then(response => {
+      if (!response.ok) {
+        return response.text().then(text => {
+          throw new Error("Failed to download file: " + text);
+        });
+      }
+      return response.blob();
+    })
+    .then(blob => {
+      if (!blob || blob.size === 0) {
+        throw new Error("Received empty file.");
+      }
+      const url = window.URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.style.display = "none";
+      a.href = url;
+      a.download = fileName;
+      document.body.appendChild(a);
+      a.click();
+      window.URL.revokeObjectURL(url);
+      a.remove();
+      // Hide the progress modal.
+      document.getElementById("downloadProgressModal").style.display = "none";
+      showToast("Download started.");
+    })
+    .catch(error => {
+      // Hide progress modal and show error.
+      document.getElementById("downloadProgressModal").style.display = "none";
+      console.error("Error downloading file:", error);
+      showToast("Error downloading file: " + error.message);
+    });
+}
+
 export function handleExtractZipSelected(e) {
  if (e) {
    e.preventDefault();
@@ -137,7 +212,8 @@ document.addEventListener("DOMContentLoaded", function () {
      document.getElementById("downloadZipModal").style.display = "none";
    });
  }
-  
+
+  // This part remains in your confirmDownloadZip event handler:
  const confirmDownloadZip = document.getElementById("confirmDownloadZip");
  if (confirmDownloadZip) {
    confirmDownloadZip.addEventListener("click", function () {
@@ -149,7 +225,11 @@ document.addEventListener("DOMContentLoaded", function () {
      if (!zipName.toLowerCase().endsWith(".zip")) {
        zipName += ".zip";
      }
+      // Hide the ZIP name input modal
      document.getElementById("downloadZipModal").style.display = "none";
+      // Show the progress modal here only on confirm
+      console.log("Download confirmed. Showing progress modal.");
+      document.getElementById("downloadProgressModal").style.display = "block";
      const folder = window.currentFolder || "root";
      fetch("downloadZip.php", {
        method: "POST",
@@ -181,9 +261,13 @@ document.addEventListener("DOMContentLoaded", function () {
          a.click();
          window.URL.revokeObjectURL(url);
          a.remove();
+          // Hide the progress modal after download starts
+          document.getElementById("downloadProgressModal").style.display = "none";
          showToast("Download started.");
        })
        .catch(error => {
+          // Hide the progress modal on error
+          document.getElementById("downloadProgressModal").style.display = "none";
          console.error("Error downloading zip:", error);
          showToast("Error downloading selected files as zip: " + error.message);
        });
@@ -220,12 +304,12 @@ export async function loadCopyMoveFolderListForModal(dropdownId) {
        folder.toLowerCase() !== "trash" &&
        (folder === username || folder.indexOf(username + "/") === 0)
      );
-      
+
      const rootOption = document.createElement("option");
      rootOption.value = username;
      rootOption.textContent = formatFolderName(username);
      folderSelect.appendChild(rootOption);
-      
+
      folders.forEach(folder => {
        if (folder !== username) {
          const option = document.createElement("option");
@@ -239,7 +323,7 @@ export async function loadCopyMoveFolderListForModal(dropdownId) {
    }
    return;
  }
-  
+
  try {
    const response = await fetch("getFolderList.php");
    let folders = await response.json();
@@ -247,12 +331,12 @@ export async function loadCopyMoveFolderListForModal(dropdownId) {
      folders = folders.map(item => item.folder);
    }
    folders = folders.filter(folder => folder !== "root" && folder.toLowerCase() !== "trash");
-    
+
    const rootOption = document.createElement("option");
    rootOption.value = "root";
    rootOption.textContent = "(Root)";
    folderSelect.appendChild(rootOption);
-    
+
    if (Array.isArray(folders) && folders.length > 0) {
      folders.forEach(folder => {
        const option = document.createElement("option");
--- a/js/fileListView.js
+++ b/js/fileListView.js
@@ -14,6 +14,7 @@ import {
 } from './domUtils.js';
 import { t } from './i18n.js';
 import { bindFileListContextMenu } from './fileMenu.js';
+import { openDownloadModal } from './fileActions.js';

 export let fileData = [];
 export let sortOrder = { column: "uploaded", ascending: true };
@@ -284,11 +285,11 @@ export function renderGalleryView(folder) {
          <span class="gallery-file-name" style="display: block;">${escapeHTML(file.name)}</span>
          ${tagBadgesHTML}
          <div class="button-wrap" style="display: flex; justify-content: center; gap: 5px;">
-            <a class="btn btn-sm btn-success download-btn" 
-               href="download.php?folder=${encodeURIComponent(file.folder || 'root')}&file=${encodeURIComponent(file.name)}" 
-               title="Download">
-              <i class="material-icons">file_download</i>
-            </a>
+            <button type="button" class="btn btn-sm btn-success download-btn" 
+                onclick="openDownloadModal('${file.name}', '${file.folder || 'root'}')" 
+                title="Download">
+                <i class="material-icons">file_download</i>
+            </button>
            ${file.editable ? `
              <button class="btn btn-sm edit-btn" onclick='editFile(${JSON.stringify(file.name)}, ${JSON.stringify(file.folder || "root")})' title="Edit">
                <i class="material-icons">edit</i>
--- a/js/i18n.js
+++ b/js/i18n.js
@@ -135,6 +135,8 @@ const translations = {
      "upload": "Upload",
      "copy": "Copy",
      "extract": "Extract",
+      "user": "User:",
+      "password": "Password:",
  
      // Dark Mode Toggle
      "dark_mode_toggle": "Dark Mode",
--- a/js/main.js
+++ b/js/main.js
@@ -8,7 +8,7 @@ import { initDragAndDrop, loadSidebarOrder, loadHeaderOrder } from './dragAndDro
 import { initTagSearch, openTagModal, filterFilesByTag } from './fileTags.js';
 import { displayFilePreview } from './filePreview.js';
 import { loadFileList } from './fileListView.js';
-import { initFileActions, renameFile } from './fileActions.js';
+import { initFileActions, renameFile, openDownloadModal, confirmSingleDownload } from './fileActions.js';
 import { editFile, saveFile } from './fileEditor.js';
 import { t, applyTranslations, setLocale } from './i18n.js';

@@ -64,6 +64,8 @@ window.toggleAllCheckboxes = toggleAllCheckboxes;
 window.editFile = editFile;
 window.saveFile = saveFile;
 window.renameFile = renameFile;
+window.confirmSingleDownload = confirmSingleDownload;
+window.openDownloadModal = openDownloadModal;

 // Global variable for the current folder.
 window.currentFolder = "root";