auth fix, file search & drag drop

auth.js

@@ -21,9 +21,8 @@ export function initAuth() {
       .then(data => {
         console.log("Login response:", data);
         if (data.success) {
-          console.log("✅ Login successful.");
+          console.log("✅ Login successful. Reloading page.");
-          updateUIOnLogin(data.isAdmin);
+          window.location.reload();
-          checkAuthentication(); // Double-check session persistence.
         } else {
           alert("Login failed: " + (data.error || "Unknown error"));
         }

fileManager.js

@@ -85,90 +85,161 @@ export function loadFileList(folderParam) {
     });
 }
 
-// Render the file table with pagination controls.
 export function renderFileTable(folder) {
   const fileListContainer = document.getElementById("fileList");
   const folderPath = (folder === "root")
     ? "uploads/"
     : "uploads/" + encodeURIComponent(folder) + "/";
 
-  // Pagination variables:
+  // Get current search term from the search input, if it exists.
+  let searchInputElement = document.getElementById("searchInput");
+  const searchHadFocus = searchInputElement && (document.activeElement === searchInputElement);
+  let searchTerm = searchInputElement ? searchInputElement.value : "";
+
+  // Filter fileData using the search term (case-insensitive).
+  const filteredFiles = fileData.filter(file =>
+    file.name.toLowerCase().includes(searchTerm.toLowerCase())
+  );
+
+  // Pagination variables.
   const itemsPerPage = window.itemsPerPage || 10;
   const currentPage = window.currentPage || 1;
-  const totalFiles = fileData.length;
+  const totalFiles = filteredFiles.length;
   const totalPages = Math.ceil(totalFiles / itemsPerPage);
 
-  // Build table header.
+  // 1. Top controls: Responsive row with search box on the left and Prev/Next on the right.
-  let tableHTML = `<table class="table">
+  const topControlsHTML = `
-    <thead>
+<div class="row align-items-center mb-3">
-      <tr>
+  <!-- Search box: occupies 8 columns on medium+ screens -->
-        <th><input type="checkbox" id="selectAll" onclick="toggleAllCheckboxes(this)"></th>
+  <div class="col-12 col-md-5">
-        <th data-column="name" style="cursor:pointer; text-decoration: underline; white-space: nowrap;">
+    <div class="input-group" style="max-width: 500px;">
-          File Name ${sortOrder.column === "name" ? (sortOrder.ascending ? "▲" : "▼") : ""}
+      <div class="input-group-prepend">
-        </th>
+        <span class="input-group-text" id="searchIcon">
-        <th data-column="modified" class="hide-small" style="cursor:pointer; text-decoration: underline; white-space: nowrap;">
+          <i class="material-icons">search</i>
-          Date Modified ${sortOrder.column === "modified" ? (sortOrder.ascending ? "▲" : "▼") : ""}
+        </span>
-        </th>
+      </div>
-        <th data-column="uploaded" class="hide-small" style="cursor:pointer; text-decoration: underline; white-space: nowrap;">
+      <input
-          Upload Date ${sortOrder.column === "uploaded" ? (sortOrder.ascending ? "▲" : "▼") : ""}
+        type="text"
-        </th>
+        id="searchInput"
-        <th data-column="size" class="hide-small" style="cursor:pointer; text-decoration: underline; white-space: nowrap;">
+        class="form-control"
-          File Size ${sortOrder.column === "size" ? (sortOrder.ascending ? "▲" : "▼") : ""}
+        placeholder="Search files..."
-        </th>
+        value="${searchTerm}"
-        <th data-column="uploader" class="hide-small" style="cursor:pointer; text-decoration: underline; white-space: nowrap;">
+        aria-describedby="searchIcon"
-          Uploader ${sortOrder.column === "uploader" ? (sortOrder.ascending ? "▲" : "▼") : ""}
+      >
-        </th>
+    </div>
-        <th>Actions</th>
+  </div>
-      </tr>
+  <!-- Prev/Next buttons: occupies 4 columns on medium+ screens, left-aligned -->
-    </thead>`;
+  <div class="col-12 col-md-4 text-left mt-2 mt-md-0">
+    <button class="custom-prev-next-btn" ${currentPage === 1 ? "disabled" : ""} onclick="changePage(${currentPage - 1})">
+      Prev
+    </button>
+    <span style="margin: 0 8px;">Page ${currentPage} of ${totalPages || 1}</span>
+    <button class="custom-prev-next-btn" ${currentPage === totalPages || totalFiles === 0 ? "disabled" : ""} onclick="changePage(${currentPage + 1})">
+      Next
+    </button>
+  </div>
+</div>
+  `;
+
+  // 2. Build the File Table with Bootstrap styling.
+  let tableHTML = `
+    <table class="table">
+      <thead>
+        <tr>
+          <th style="width: 40px;">
+            <input type="checkbox" id="selectAll" onclick="toggleAllCheckboxes(this)">
+          </th>
+          <th data-column="name" style="cursor:pointer; white-space: nowrap;">
+            File Name ${sortOrder.column === "name" ? (sortOrder.ascending ? "▲" : "▼") : ""}
+          </th>
+          <th data-column="modified" class="hide-small" style="cursor:pointer; white-space: nowrap;">
+            Date Modified ${sortOrder.column === "modified" ? (sortOrder.ascending ? "▲" : "▼") : ""}
+          </th>
+          <th data-column="uploaded" class="hide-small" style="cursor:pointer; white-space: nowrap;">
+            Upload Date ${sortOrder.column === "uploaded" ? (sortOrder.ascending ? "▲" : "▼") : ""}
+          </th>
+          <th data-column="size" class="hide-small" style="cursor:pointer; white-space: nowrap;">
+            File Size ${sortOrder.column === "size" ? (sortOrder.ascending ? "▲" : "▼") : ""}
+          </th>
+          <th data-column="uploader" class="hide-small" style="cursor:pointer; white-space: nowrap;">
+            Uploader ${sortOrder.column === "uploader" ? (sortOrder.ascending ? "▲" : "▼") : ""}
+          </th>
+          <th>Actions</th>
+        </tr>
+      </thead>
+  `;
 
   // Calculate slice for current page.
   const startIndex = (currentPage - 1) * itemsPerPage;
   const endIndex = Math.min(startIndex + itemsPerPage, totalFiles);
   let tableBody = `<tbody>`;
 
-  fileData.slice(startIndex, endIndex).forEach(file => {
+  if (totalFiles > 0) {
-    const isEditable = canEditFile(file.name);
+    filteredFiles.slice(startIndex, endIndex).forEach(file => {
-    const safeFileName = escapeHTML(file.name);
+      const isEditable = canEditFile(file.name);
-    const safeModified = escapeHTML(file.modified);
+      const safeFileName = escapeHTML(file.name);
-    const safeUploaded = escapeHTML(file.uploaded);
+      const safeModified = escapeHTML(file.modified);
-    const safeSize = escapeHTML(file.size);
+      const safeUploaded = escapeHTML(file.uploaded);
-    const safeUploader = escapeHTML(file.uploader || "Unknown");
+      const safeSize = escapeHTML(file.size);
-
+      const safeUploader = escapeHTML(file.uploader || "Unknown");
-    tableBody += `<tr>
-      <td><input type="checkbox" class="file-checkbox" value="${safeFileName}" onclick="updateFileActionButtons()"></td>
-      <td>${safeFileName}</td>
-      <td class="hide-small" style="white-space: nowrap;">${safeModified}</td>
-      <td class="hide-small" style="white-space: nowrap;">${safeUploaded}</td>
-      <td class="hide-small" style="white-space: nowrap;">${safeSize}</td>
-      <td class="hide-small" style="white-space: nowrap;">${safeUploader}</td>
-      <td>
-        <div style="display: inline-flex; align-items: center; gap: 5px; flex-wrap: nowrap;">
-          <a class="btn btn-sm btn-success" href="${folderPath + encodeURIComponent(file.name)}" download>Download</a>
-          ${isEditable ? `<button class="btn btn-sm btn-primary ml-2" onclick='editFile(${JSON.stringify(file.name)}, ${JSON.stringify(folder)})'>Edit</button>` : ""}
-          <button class="btn btn-sm btn-warning ml-2" onclick='renameFile(${JSON.stringify(file.name)}, ${JSON.stringify(folder)})'>Rename</button>
-        </div>
-      </td>
-    </tr>`;
-  });
 
+      tableBody += `
+        <tr onclick="toggleRowSelection(event, '${safeFileName}')" style="cursor:pointer;">
+          <td>
+            <input type="checkbox" class="file-checkbox" value="${safeFileName}" onclick="event.stopPropagation(); updateRowHighlight(this);">
+          </td>
+          <td>${safeFileName}</td>
+          <td class="hide-small" style="white-space: nowrap;">${safeModified}</td>
+          <td class="hide-small" style="white-space: nowrap;">${safeUploaded}</td>
+          <td class="hide-small" style="white-space: nowrap;">${safeSize}</td>
+          <td class="hide-small" style="white-space: nowrap;">${safeUploader}</td>
+          <td>
+            <div style="display: inline-flex; align-items: center; gap: 5px;">
+              <a class="btn btn-sm btn-success" href="${folderPath + encodeURIComponent(file.name)}" download>Download</a>
+              ${isEditable ? `
+                <button class="btn btn-sm btn-primary ml-2" onclick='editFile(${JSON.stringify(file.name)}, ${JSON.stringify(folder)})'>
+                  Edit
+                </button>
+              ` : ""}
+              <button class="btn btn-sm btn-warning ml-2" onclick='renameFile(${JSON.stringify(file.name)}, ${JSON.stringify(folder)})'>
+                Rename
+              </button>
+            </div>
+          </td>
+        </tr>
+      `;
+    });
+  } else {
+    tableBody += `<tr><td colspan="7">No files found.</td></tr>`;
+  }
   tableBody += `</tbody></table>`;
 
-  // Build pagination controls.
+  // 3. Bottom controls: "Show [dropdown] items per page" with consistent 16px font.
-  let paginationHTML = `<div class="pagination-controls" style="margin-top:10px; display:flex; align-items:center; justify-content:space-between;">`;
+  const bottomControlsHTML = `
-  paginationHTML += `<div>`;
+    <div class="d-flex align-items-center mt-3" style="font-size:16px; line-height:1.5;">
-  paginationHTML += `<button ${currentPage === 1 ? "disabled" : ""} onclick="changePage(${currentPage - 1})">Prev</button> `;
+      <label class="mr-2 mb-0" style="font-size:16px; line-height:1.5;">Show</label>
-  paginationHTML += `<span>Page ${currentPage} of ${totalPages}</span> `;
+      <select class="form-control" style="width:auto; font-size:16px; height:auto;" onchange="changeItemsPerPage(this.value)">
-  paginationHTML += `<button ${currentPage === totalPages ? "disabled" : ""} onclick="changePage(${currentPage + 1})">Next</button>`;
+        ${[10, 20, 50, 100].map(num => `<option value="${num}" ${num === itemsPerPage ? "selected" : ""}>${num}</option>`).join("")}
-  paginationHTML += `</div>`;
+      </select>
-  paginationHTML += `<div>Show <select onchange="changeItemsPerPage(this.value)">`;
+      <span class="ml-2 mb-0" style="font-size:16px; line-height:1.5;">items per page</span>
-  [10, 20, 50, 100].forEach(num => {
+    </div>
-    paginationHTML += `<option value="${num}" ${num === itemsPerPage ? "selected" : ""}>${num}</option>`;
+  `;
-  });
-  paginationHTML += `</select> items per page</div>`;
-  paginationHTML += `</div>`;
 
-  fileListContainer.innerHTML = tableHTML + tableBody + paginationHTML;
+  // Combine top controls, table, and bottom controls.
+  fileListContainer.innerHTML = topControlsHTML + tableHTML + tableBody + bottomControlsHTML;
+
+  // Re-focus the search input if it was previously focused.
+  const newSearchInput = document.getElementById("searchInput");
+  if (searchHadFocus && newSearchInput) {
+    newSearchInput.focus();
+    newSearchInput.setSelectionRange(newSearchInput.value.length, newSearchInput.value.length);
+  }
+
+  // Attach event listener for search input.
+  newSearchInput.addEventListener("input", function () {
+    window.currentPage = 1;
+    renderFileTable(folder);
+  });
 
   // Attach sorting event listeners on header cells.
   const headerCells = document.querySelectorAll("table.table thead th[data-column]");
@@ -179,52 +250,45 @@ export function renderFileTable(folder) {
     });
   });
 
-  // After rendering the table, reattach the file checkbox event listener.
+  // Reattach event listeners for file checkboxes.
   document.querySelectorAll('#fileList .file-checkbox').forEach(checkbox => {
-    checkbox.addEventListener('change', updateFileActionButtons);
+    checkbox.addEventListener('change', function (e) {
+      updateRowHighlight(e.target);
+      updateFileActionButtons();
+    });
   });
 
-  // Finally, call updateFileActionButtons so the buttons show (or are disabled) correctly.
   updateFileActionButtons();
 }
 
-// Sort files and re-render the table.
+/**
-export function sortFiles(column, folder) {
+ * Toggles row selection when the user clicks any part of the row (except buttons/links).
-  if (sortOrder.column === column) {
+ */
-    sortOrder.ascending = !sortOrder.ascending;
+window.toggleRowSelection = function (event, fileName) {
-  } else {
+  const targetTag = event.target.tagName.toLowerCase();
-    sortOrder.column = column;
+  if (targetTag === 'a' || targetTag === 'button' || targetTag === 'input') {
-    sortOrder.ascending = true;
+    return;
   }
+  const row = event.currentTarget;
+  const checkbox = row.querySelector('.file-checkbox');
+  if (!checkbox) return;
+  checkbox.checked = !checkbox.checked;
+  updateRowHighlight(checkbox);
+  updateFileActionButtons();
+};
 
-  fileData.sort((a, b) => {
+/**
-    let valA = a[column] || "";
+ * Updates row highlight based on whether the checkbox is checked.
-    let valB = b[column] || "";
+ */
-
+window.updateRowHighlight = function (checkbox) {
-    if (column === "modified" || column === "uploaded") {
+  const row = checkbox.closest('tr');
-      // Log the raw date strings.
+  if (!row) return;
-      console.log(`Sorting ${column}: raw values ->`, valA, valB);
+  if (checkbox.checked) {
-
+    row.classList.add('row-selected');
-      const parsedA = parseCustomDate(valA);
+  } else {
-      const parsedB = parseCustomDate(valB);
+    row.classList.remove('row-selected');
-
+  }
-      // Log the parsed numeric timestamps.
+};
-      console.log(`Sorting ${column}: parsed values ->`, parsedA, parsedB);
-
-      valA = parsedA;
-      valB = parsedB;
-    } else if (typeof valA === "string") {
-      valA = valA.toLowerCase();
-      valB = valB.toLowerCase();
-    }
-
-    if (valA < valB) return sortOrder.ascending ? -1 : 1;
-    if (valA > valB) return sortOrder.ascending ? 1 : -1;
-    return 0;
-  });
-
-  renderFileTable(folder);
-}
 
 // Delete selected files.
 export function handleDeleteSelected(e) {

index.html

@@ -10,6 +10,7 @@
   <!-- Google Fonts and Material Icons -->
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+  <link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
   <!-- Bootstrap CSS -->
   <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
 </head>
@@ -57,10 +58,13 @@
             <div class="card-body">
               <form id="uploadFileForm" method="post" enctype="multipart/form-data">
                 <div class="form-group">
-                  <label for="file">Choose files to upload:</label>
+                  <div id="uploadDropArea" style="border:2px dashed #ccc; padding:20px; text-align:center; cursor:pointer;">
-                  <input type="file" id="file" name="file[]" class="form-control-file" multiple required>
+                    <span>Drop files here or click 'Choose files'</span>
+                    <br>
+                    <input type="file" id="file" name="file[]" class="form-control-file" multiple required style="display:none;">
+                  </div>
                 </div>
-                <button type="submit" id="uploadBtn" class="btn btn-primary">Upload</button>
+                <button type="submit" id="uploadBtn" class="btn btn-primary d-block mx-auto">Upload</button>
                 <div id="uploadProgressContainer"></div>
               </form>
             </div>

styles.css

@@ -132,6 +132,12 @@ header {
   gap: 5px;
 }
 
+#uploadBtn {
+  font-size: 16px;
+  padding: 10px 22px;
+  align-items: center;
+}
+
 /* UPLOAD PROGRESS */
 #uploadProgressContainer ul {
   list-style: none;
@@ -377,3 +383,22 @@ label {
 #fileListContainer {
   margin-top: 40px !important;
 }
+
+.row-selected {
+  background-color: #f2f2f2 !important;
+}
+
+.custom-prev-next-btn {
+  background-color: #e0e0e0;
+  color: #000;
+  border: none;
+  padding: 6px 12px;
+  font-size: 14px;
+  border-radius: 4px;
+  margin: 0 4px;
+  cursor: pointer;
+}
+.custom-prev-next-btn:hover:not(:disabled) {
+  background-color: #d5d5d5;
+}
+

upload.js

@@ -6,12 +6,100 @@ export function initUpload() {
   const fileInput = document.getElementById("file");
   const progressContainer = document.getElementById("uploadProgressContainer");
   const uploadForm = document.getElementById("uploadFileForm");
+  const dropArea = document.getElementById("uploadDropArea");
 
-  // Build progress list when files are selected.
+  // Helper function: set the drop area's default layout.
+  function setDropAreaDefault() {
+    if (dropArea) {
+      dropArea.innerHTML = `
+        <div id="uploadInstruction" style="margin-bottom:10px; font-size:16px;">
+          Drop files here or click 'Choose files'
+        </div>
+        <div id="uploadFileRow" style="display:flex; align-items:center; justify-content:center;">
+          <button id="customChooseBtn" type="button" style="background-color:#9E9E9E; color:#fff; border:none; border-radius:4px; padding:8px 18px; font-size:16px; cursor:pointer;">
+            Choose files
+          </button>
+          <div id="fileInfoContainer" style="margin-left:10px; font-size:16px; display:flex; align-items:center;">
+            <span id="fileInfoDefault">No files selected</span>
+          </div>
+        </div>
+      `;
+      // Wire up the custom button.
+     /* const customChooseBtn = document.getElementById("customChooseBtn");
+      if (customChooseBtn) {
+        customChooseBtn.addEventListener("click", function () {
+          fileInput.click();
+        });
+      }*/
+    }
+  }
+
+  // Initialize drop area.
+  if (dropArea) {
+    dropArea.style.border = "2px dashed #ccc";
+    dropArea.style.padding = "20px";
+    dropArea.style.textAlign = "center";
+    dropArea.style.marginBottom = "15px";
+    dropArea.style.cursor = "pointer";
+    // Set default content once.
+    setDropAreaDefault();
+
+    // Prevent default behavior for drag events.
+    dropArea.addEventListener("dragover", function (e) {
+      e.preventDefault();
+      dropArea.style.backgroundColor = "#f8f8f8";
+    });
+    dropArea.addEventListener("dragleave", function (e) {
+      e.preventDefault();
+      dropArea.style.backgroundColor = "";
+    });
+    dropArea.addEventListener("drop", function (e) {
+      e.preventDefault();
+      dropArea.style.backgroundColor = "";
+      const dt = e.dataTransfer;
+      if (dt && dt.files && dt.files.length > 0) {
+        fileInput.files = dt.files;
+        fileInput.dispatchEvent(new Event("change"));
+      }
+    });
+
+    // Clicking the drop area triggers file selection.
+    dropArea.addEventListener("click", function () {
+      fileInput.click();
+    });
+  }
+
+  // When files are selected, update only the file info container.
   if (fileInput) {
     fileInput.addEventListener("change", function () {
-      progressContainer.innerHTML = "";
       const files = fileInput.files;
+      // Update the file info container without replacing the entire drop area.
+      const fileInfoContainer = document.getElementById("fileInfoContainer");
+      if (fileInfoContainer) {
+        if (files.length > 0) {
+          if (files.length === 1) {
+            fileInfoContainer.innerHTML = `
+              <div id="filePreviewContainer" style="display:inline-block; vertical-align:middle;"></div>
+              <span id="fileNameDisplay" style="vertical-align:middle; margin-left:5px;">${files[0].name}</span>
+            `;
+          } else {
+            fileInfoContainer.innerHTML = `
+              <div id="filePreviewContainer" style="display:inline-block; vertical-align:middle;"></div>
+              <span id="fileCountDisplay" style="vertical-align:middle; margin-left:5px;">${files.length} files selected</span>
+            `;
+          }
+          const previewContainer = document.getElementById("filePreviewContainer");
+          if (previewContainer) {
+            previewContainer.innerHTML = "";
+            displayFilePreview(files[0], previewContainer);
+          }
+        } else {
+          fileInfoContainer.innerHTML = `<span id="fileInfoDefault">No files selected</span>`;
+        }
+      }
+      
+      // Build progress list as before.
+      progressContainer.innerHTML = "";
       if (files.length > 0) {
         const allFiles = Array.from(files);
         const maxDisplay = 10;
@@ -22,7 +110,6 @@ export function initUpload() {
           const li = document.createElement("li");
           li.style.paddingTop = "20px";
           li.style.marginBottom = "10px";
-          // Only display progress items for the first maxDisplay files.
           li.style.display = (index < maxDisplay) ? "flex" : "none";
           li.style.alignItems = "center";
           li.style.flexWrap = "wrap";
@@ -51,12 +138,10 @@ export function initUpload() {
           li.appendChild(preview);
           li.appendChild(nameDiv);
           li.appendChild(progDiv);
-          // Save references for later updates.
           li.progressBar = progBar;
           li.startTime = Date.now();
           list.appendChild(li);
         });
-        // If more than maxDisplay files, add a note.
         if (allFiles.length > maxDisplay) {
           const extra = document.createElement("li");
           extra.style.paddingTop = "20px";
@@ -70,7 +155,7 @@ export function initUpload() {
     });
   }
 
-  // Submit handler: upload all files and then check the server's file list.
+  // Submit handler remains unchanged.
   if (uploadForm) {
     uploadForm.addEventListener("submit", function (e) {
       e.preventDefault();
@@ -80,12 +165,11 @@ export function initUpload() {
         return;
       }
       const allFiles = Array.from(files);
-      const maxDisplay = 10; // Only show progress for first 10 items.
+      const maxDisplay = 10;
       const folderToUse = window.currentFolder || "root";
       const listItems = progressContainer.querySelectorAll("li");
       let finishedCount = 0;
       let allSucceeded = true;
-      // Array to track each file's upload result.
       const uploadResults = new Array(allFiles.length).fill(false);
 
       allFiles.forEach((file, index) => {
@@ -136,7 +220,6 @@ export function initUpload() {
           finishedCount++;
           console.log("Upload response for file", file.name, xhr.responseText);
           if (finishedCount === allFiles.length) {
-            // Immediately refresh the file list.
             refreshFileList();
           }
         });
@@ -172,14 +255,10 @@ export function initUpload() {
       });
 
       function refreshFileList() {
-        // Call loadFileList immediately (with a timestamp added inside loadFileList, if needed).
         loadFileList(folderToUse)
           .then(serverFiles => {
             initFileActions();
-            // Normalize server file names to lowercase.
             serverFiles = (serverFiles || []).map(item => item.name.trim().toLowerCase());
-            // For each file, if it was successful and is present on the server, leave its progress item;
-            // if not, mark it as "Error".
             allFiles.forEach((file, index) => {
               const fileName = file.name.trim().toLowerCase();
               if (index < maxDisplay && listItems[index]) {
@@ -189,11 +268,10 @@ export function initUpload() {
                 }
               }
             });
-            // Now, the file list is refreshed instantly.
-            // However, we want the progress list to remain visible for 10 seconds.
             setTimeout(() => {
               progressContainer.innerHTML = "";
               fileInput.value = "";
+              if (dropArea) setDropAreaDefault();
             }, 10000);
             if (!allSucceeded) {
               alert("Some files failed to upload. Please check the list.");