search and drop fixes

fileManager.js

@@ -123,22 +123,29 @@ export function loadFileList(folderParam) {
     });
 }
 
+// Debounce helper (if not defined already)
+function debounce(func, wait) {
+  let timeout;
+  return function(...args) {
+    clearTimeout(timeout);
+    timeout = setTimeout(() => func.apply(this, args), wait);
+  };
+}
+
 export function renderFileTable(folder) {
   const fileListContainer = document.getElementById("fileList");
   const folderPath = (folder === "root")
     ? "uploads/"
     : "uploads/" + folder.split("/").map(encodeURIComponent).join("/") + "/";
   
-  // Attempt to get the search input element.
+  // Use the global search term if available.
-  const searchInputElement = document.getElementById("searchInput");
+  const searchTerm = window.currentSearchTerm || "";
-  const searchHadFocus = searchInputElement && (document.activeElement === searchInputElement);
-  const searchTerm = searchInputElement ? searchInputElement.value : "";
   
   const filteredFiles = fileData.filter(file =>
     file.name.toLowerCase().includes(searchTerm.toLowerCase())
   );
   
-  // Read persistent items per page from localStorage, default to 10.
+  // Get persistent items per page from localStorage.
   const itemsPerPageSetting = parseInt(localStorage.getItem('itemsPerPage') || '10', 10);
   const currentPage = window.currentPage || 1;
   const totalFiles = filteredFiles.length;
@@ -195,7 +202,6 @@ export function renderFileTable(folder) {
       const safeSize = escapeHTML(file.size);
       const safeUploader = escapeHTML(file.uploader || "Unknown");
   
-      // Check if file is an image.
       const isImage = /\.(jpg|jpeg|png|gif|bmp|webp)$/i.test(file.name);
   
       const previewButton = isImage
@@ -244,14 +250,25 @@ export function renderFileTable(folder) {
   
   fileListContainer.innerHTML = topControlsHTML + tableHTML + tableBody + bottomControlsHTML;
   
-  // Only add event listeners if searchInputElement exists.
+  // Re-attach event listener for the new search input element.
-  if (searchInputElement) {
+  const newSearchInput = document.getElementById("searchInput");
-    searchInputElement.addEventListener("input", function () {
+  if (newSearchInput) {
+    newSearchInput.addEventListener("input", debounce(function () {
+      window.currentSearchTerm = newSearchInput.value;
       window.currentPage = 1;
       renderFileTable(folder);
-    });
+      // After re-rendering, restore focus and caret position.
+      setTimeout(() => {
+        const freshInput = document.getElementById("searchInput");
+        if (freshInput) {
+          freshInput.focus();
+          freshInput.setSelectionRange(freshInput.value.length, freshInput.value.length);
+        }
+      }, 0);
+    }, 300));
   }
   
+  // Add event listeners for header sorting.
   document.querySelectorAll("table.table thead th[data-column]").forEach(cell => {
     cell.addEventListener("click", function () {
       const column = this.getAttribute("data-column");
@@ -259,6 +276,7 @@ export function renderFileTable(folder) {
     });
   });
   
+  // Add event listeners for checkboxes.
   document.querySelectorAll('#fileList .file-checkbox').forEach(checkbox => {
     checkbox.addEventListener('change', function (e) {
       updateRowHighlight(e.target);

upload.js

@@ -45,6 +45,29 @@ function getFilesFromDataTransferItems(items) {
   return Promise.all(promises).then(results => results.flat());
 }
 
+// Helper: Set default drop area content.
+// Moved to module scope so it is available globally in this module.
+function setDropAreaDefault() {
+  const dropArea = document.getElementById("uploadDropArea");
+  if (dropArea) {
+    dropArea.innerHTML = `
+          <div id="uploadInstruction" class="upload-instruction">
+            Drop files/folders here or click 'Choose files'
+          </div>
+          <div id="uploadFileRow" class="upload-file-row">
+            <button id="customChooseBtn" type="button">
+              Choose files
+            </button>
+          </div>
+          <div id="fileInfoWrapper" class="file-info-wrapper">
+            <div id="fileInfoContainer" class="file-info-container">
+              <span id="fileInfoDefault">No files selected</span>
+            </div>
+          </div>
+        `;
+  }
+}
+
 function adjustFolderHelpExpansion() {
   const uploadCard = document.getElementById("uploadCard");
   const folderHelpDetails = document.querySelector(".folder-help-details");
@@ -247,8 +270,8 @@ function processFiles(filesInput) {
     }
     const listWrapper = document.createElement("div");
     listWrapper.classList.add("upload-progress-wrapper");
-    // Set a maximum height (adjust as needed) and enable vertical scrolling.
+    // Set a maximum height and enable vertical scrolling.
-    listWrapper.style.maxHeight = "300px"; // for example, 300px
+    listWrapper.style.maxHeight = "300px";
     listWrapper.style.overflowY = "auto";
     listWrapper.appendChild(list);
     progressContainer.appendChild(listWrapper);
@@ -433,30 +456,11 @@ function initUpload() {
     fileInput.setAttribute("directory", "");
   }
 
-  // Helper: Set default drop area content.
+  // Set default drop area content.
-  function setDropAreaDefault() {
+  setDropAreaDefault();
-    if (dropArea) {
-      dropArea.innerHTML = `
-          <div id="uploadInstruction" class="upload-instruction">
-            Drop files/folders here or click 'Choose files'
-          </div>
-          <div id="uploadFileRow" class="upload-file-row">
-            <button id="customChooseBtn" type="button">
-              Choose files
-            </button>
-          </div>
-          <div id="fileInfoWrapper" class="file-info-wrapper">
-            <div id="fileInfoContainer" class="file-info-container">
-              <span id="fileInfoDefault">No files selected</span>
-            </div>
-          </div>
-        `;
-    }
-  }
 
   if (dropArea) {
     dropArea.classList.add("upload-drop-area");
-    setDropAreaDefault();
     dropArea.addEventListener("dragover", function (e) {
       e.preventDefault();
       // Use a darker color if dark mode is active.