add folders uploading

fileManager.js

@@ -93,18 +93,28 @@ window.updateRowHighlight = function (checkbox) {
 
 export function loadFileList(folderParam) {
   const folder = folderParam || "root";
-  return fetch("getFileList.php?folder=" + encodeURIComponent(folder) + "&t=" + new Date().getTime())
+  // Request a recursive listing from the server.
+  return fetch("getFileList.php?folder=" + encodeURIComponent(folder) + "&recursive=1&t=" + new Date().getTime())
     .then(response => response.json())
     .then(data => {
       const fileListContainer = document.getElementById("fileList");
       fileListContainer.innerHTML = "";
       if (data.files && data.files.length > 0) {
+        // Map each file so that we have a full name that includes subfolder information.
+        // We assume that getFileList.php returns a property 'path' that contains the full relative path (e.g. "subfolder/filename.txt")
+        data.files = data.files.map(file => {
+          // If file.path exists, use that; otherwise fallback to file.name.
+          file.fullName = (file.path || file.name).trim().toLowerCase();
+          return file;
+        });
+        // Save fileData and render file table using your full list.
         fileData = data.files;
         renderFileTable(folder);
       } else {
         fileListContainer.textContent = "No files found.";
         updateFileActionButtons();
       }
+      // Return the full file objects.
       return data.files || [];
     })
     .catch(error => {

folderManager.js

@@ -116,12 +116,12 @@ export async function loadFolderTree(selectedFolder) {
     }
 
     let html = "";
-    // Build the root row without inline styles.
+    // Build the root row.
     html += `<div id="rootRow" class="root-row">
                <span class="folder-toggle">[-]</span>
                <span class="folder-option root-folder-option" data-folder="root">(Root)</span>
              </div>`;
-    // If no folders exist (empty array), render a default tree with just (Root).
+
     if (folders.length === 0) {
       html += `<ul class="folder-tree expanded">
                  <li class="folder-item">
@@ -129,8 +129,8 @@ export async function loadFolderTree(selectedFolder) {
                  </li>
                </ul>`;
     } else {
-      const tree = buildFolderTree(folders);
+      const tree = buildFolderTree(folders); // your existing function
-      html += renderFolderTree(tree, "", "block");
+      html += renderFolderTree(tree, "", "block"); // your existing function
     }
 
     container.innerHTML = html;
@@ -164,7 +164,7 @@ export async function loadFolderTree(selectedFolder) {
       });
     });
 
-    // Attach toggle event for the root toggle.
+    // Attach toggle events (same as your original logic).
     const rootToggle = container.querySelector("#rootRow .folder-toggle");
     if (rootToggle) {
       rootToggle.addEventListener("click", function (e) {
@@ -184,7 +184,6 @@ export async function loadFolderTree(selectedFolder) {
       });
     }
 
-    // Attach toggle events for all folder toggles.
     container.querySelectorAll(".folder-toggle").forEach(toggle => {
       toggle.addEventListener("click", function (e) {
         e.stopPropagation();

getFileList.php

@@ -13,7 +13,6 @@ if (!isset($_SESSION['authenticated']) || $_SESSION['authenticated'] !== true) {
 }
 
 $folder = isset($_GET['folder']) ? trim($_GET['folder']) : 'root';
-
 // Allow only safe characters in the folder parameter (letters, numbers, underscores, dashes, spaces, and forward slashes).
 if ($folder !== 'root' && !preg_match('/^[A-Za-z0-9_\- \/]+$/', $folder)) {
     echo json_encode(["error" => "Invalid folder name."]);

styles.css

@@ -277,6 +277,16 @@ body.dark-mode header {
   color: white;
 }
 
+/* Default (light mode) */
+.material-icons.folder-icon {
+  color: black;
+}
+
+/* Dark mode */
+body.dark-mode .material-icons.folder-icon {
+  color: white;
+}
+
 /* ===========================================================
    FORMS & LOGIN
    =========================================================== */

upload.js

@@ -1,10 +1,17 @@
-// upload.js
-
 import { loadFileList, displayFilePreview, initFileActions } from './fileManager.js';
 import { showToast, escapeHTML } from './domUtils.js';
+import { loadFolderTree } from './folderManager.js';
 
 export function initUpload() {
   const fileInput = document.getElementById("file");
+
+  // Enhancement: Allow folder upload with subfolders by setting directory attributes.
+  if (fileInput) {
+    fileInput.setAttribute("webkitdirectory", "");
+    fileInput.setAttribute("mozdirectory", "");
+    fileInput.setAttribute("directory", "");
+  }
+
   const progressContainer = document.getElementById("uploadProgressContainer");
   const uploadForm = document.getElementById("uploadFileForm");
   const dropArea = document.getElementById("uploadDropArea");
@@ -31,13 +38,11 @@ export function initUpload() {
           </div>
         `;
     }
-}
+  }
 
   // Initialize drop area.
   if (dropArea) {
-    // Instead of inline styles here, ensure dropArea is styled in CSS.
+    dropArea.classList.add("upload-drop-area");
-    // But if necessary, you can add minimal inline styles that you later override:
-    dropArea.classList.add("upload-drop-area"); // Define in CSS if needed.
     setDropAreaDefault();
 
     dropArea.addEventListener("dragover", function (e) {
@@ -62,7 +67,7 @@ export function initUpload() {
     });
   }
 
-  // When files are selected, update file info container.
+  // When files are selected, update file info container and build progress list.
   if (fileInput) {
     fileInput.addEventListener("change", function () {
       const files = fileInput.files;
@@ -90,21 +95,96 @@ export function initUpload() {
         }
       }
 
-      // Build progress list using CSS classes.
+      // Convert FileList to an array and assign a unique uploadIndex to each file.
-      progressContainer.innerHTML = "";
-      if (files.length > 0) {
       const allFiles = Array.from(files);
+      allFiles.forEach((file, index) => {
+        file.uploadIndex = index;
+      });
+
+      progressContainer.innerHTML = "";
+      if (allFiles.length > 0) {
         const maxDisplay = 10;
         const list = document.createElement("ul");
         list.classList.add("upload-progress-list");
+
+        // Check if any file has a relative path (i.e. folder upload).
+        const hasRelativePaths = allFiles.some(file => file.webkitRelativePath && file.webkitRelativePath.trim() !== "");
+
+        if (hasRelativePaths) {
+          // Group files by folder.
+          const fileGroups = {};
+          allFiles.forEach(file => {
+            let folderName = "Root";
+            if (file.webkitRelativePath && file.webkitRelativePath.trim() !== "") {
+              const parts = file.webkitRelativePath.split("/");
+              if (parts.length > 1) {
+                folderName = parts.slice(0, parts.length - 1).join("/");
+              }
+            }
+            if (!fileGroups[folderName]) {
+              fileGroups[folderName] = [];
+            }
+            fileGroups[folderName].push(file);
+          });
+
+          // Create a list element for each folder group.
+          Object.keys(fileGroups).forEach(folderName => {
+            // Folder header with Material Icon.
+            const folderLi = document.createElement("li");
+            folderLi.classList.add("upload-folder-group");
+            folderLi.innerHTML = `<i class="material-icons folder-icon" style="vertical-align:middle;">folder</i> ${folderName}:`;
+            list.appendChild(folderLi);
+
+            // Nested list for files in this folder.
+            const nestedUl = document.createElement("ul");
+            nestedUl.classList.add("upload-folder-group-list");
+            fileGroups[folderName]
+              .sort((a, b) => a.uploadIndex - b.uploadIndex)
+              .forEach(file => {
+                const li = document.createElement("li");
+                li.classList.add("upload-progress-item");
+                li.style.display = "flex";
+                li.dataset.uploadIndex = file.uploadIndex;
+
+                const preview = document.createElement("div");
+                preview.className = "file-preview";
+                displayFilePreview(file, preview);
+
+                const nameDiv = document.createElement("div");
+                nameDiv.classList.add("upload-file-name");
+                // Only show the file's basename.
+                nameDiv.textContent = file.name;
+
+                const progDiv = document.createElement("div");
+                progDiv.classList.add("progress", "upload-progress-div");
+                progDiv.style.flex = "0 0 250px";
+                progDiv.style.marginLeft = "5px";
+
+                const progBar = document.createElement("div");
+                progBar.classList.add("progress-bar");
+                progBar.style.width = "0%";
+                progBar.innerText = "0%";
+
+                progDiv.appendChild(progBar);
+                li.appendChild(preview);
+                li.appendChild(nameDiv);
+                li.appendChild(progDiv);
+                li.progressBar = progBar;
+                li.startTime = Date.now();
+                nestedUl.appendChild(li);
+              });
+            list.appendChild(nestedUl);
+          });
+        } else {
+          // Normal flat list (no grouping)
           allFiles.forEach((file, index) => {
             const li = document.createElement("li");
             li.classList.add("upload-progress-item");
-          // For dynamic display, we still set display property via JS.
             li.style.display = (index < maxDisplay) ? "flex" : "none";
+            li.dataset.uploadIndex = index;
 
             const preview = document.createElement("div");
-          preview.className = "file-preview"; // Already styled in CSS.
+            preview.className = "file-preview";
             displayFilePreview(file, preview);
 
             const nameDiv = document.createElement("div");
@@ -113,7 +193,6 @@ export function initUpload() {
 
             const progDiv = document.createElement("div");
             progDiv.classList.add("progress", "upload-progress-div");
-          // If needed, dynamic style for flex sizing remains:
             progDiv.style.flex = "0 0 250px";
             progDiv.style.marginLeft = "5px";
 
@@ -134,9 +213,10 @@ export function initUpload() {
             const extra = document.createElement("li");
             extra.classList.add("upload-progress-extra");
             extra.textContent = `Uploading additional ${allFiles.length - maxDisplay} file(s)...`;
-          extra.style.display = "flex"; // If dynamic, otherwise define in CSS.
+            extra.style.display = "flex";
             list.appendChild(extra);
           }
+        }
         progressContainer.appendChild(list);
       }
     });
@@ -152,9 +232,19 @@ export function initUpload() {
         return;
       }
       const allFiles = Array.from(files);
+      // Make sure each file has an uploadIndex (if not already assigned).
+      allFiles.forEach((file, index) => {
+        if (typeof file.uploadIndex === "undefined") file.uploadIndex = index;
+      });
       const maxDisplay = 10;
       const folderToUse = window.currentFolder || "root";
-      const listItems = progressContainer.querySelectorAll("li");
+      // Build a mapping of uploadIndex => progress element.
+      const progressElements = {};
+      // Query all file list items (they have the class "upload-progress-item")
+      const listItems = progressContainer.querySelectorAll("li.upload-progress-item");
+      listItems.forEach(item => {
+        progressElements[item.dataset.uploadIndex] = item;
+      });
       let finishedCount = 0;
       let allSucceeded = true;
       const uploadResults = new Array(allFiles.length).fill(false);
@@ -163,6 +253,10 @@ export function initUpload() {
         const formData = new FormData();
         formData.append("file[]", file);
         formData.append("folder", folderToUse);
+        // If a relative path is available, send it.
+        if (file.webkitRelativePath && file.webkitRelativePath !== "") {
+          formData.append("relativePath", file.webkitRelativePath);
+        }
 
         const xhr = new XMLHttpRequest();
         let currentPercent = 0;
@@ -170,8 +264,9 @@ export function initUpload() {
         xhr.upload.addEventListener("progress", function (e) {
           if (e.lengthComputable) {
             currentPercent = Math.round((e.loaded / e.total) * 100);
-            if (index < maxDisplay && listItems[index]) {
+            const li = progressElements[file.uploadIndex];
-              const elapsed = (Date.now() - listItems[index].startTime) / 1000;
+            if (li) {
+              const elapsed = (Date.now() - li.startTime) / 1000;
               let speed = "";
               if (elapsed > 0) {
                 const spd = e.loaded / elapsed;
@@ -179,8 +274,8 @@ export function initUpload() {
                 else if (spd < 1048576) speed = (spd / 1024).toFixed(1) + " KB/s";
                 else speed = (spd / 1048576).toFixed(1) + " MB/s";
               }
-              listItems[index].progressBar.style.width = currentPercent + "%";
+              li.progressBar.style.width = currentPercent + "%";
-              listItems[index].progressBar.innerText = currentPercent + "% (" + speed + ")";
+              li.progressBar.innerText = currentPercent + "% (" + speed + ")";
             }
           }
         });
@@ -192,15 +287,16 @@ export function initUpload() {
           } catch (e) {
             jsonResponse = null;
           }
+          const li = progressElements[file.uploadIndex];
           if (xhr.status >= 200 && xhr.status < 300 && (!jsonResponse || !jsonResponse.error)) {
-            if (index < maxDisplay && listItems[index]) {
+            if (li) {
-              listItems[index].progressBar.style.width = "100%";
+              li.progressBar.style.width = "100%";
-              listItems[index].progressBar.innerText = "Done";
+              li.progressBar.innerText = "Done";
             }
-            uploadResults[index] = true;
+            uploadResults[file.uploadIndex] = true;
           } else {
-            if (index < maxDisplay && listItems[index]) {
+            if (li) {
-              listItems[index].progressBar.innerText = "Error";
+              li.progressBar.innerText = "Error";
             }
             allSucceeded = false;
           }
@@ -212,10 +308,11 @@ export function initUpload() {
         });
 
         xhr.addEventListener("error", function () {
-          if (index < maxDisplay && listItems[index]) {
+          const li = progressElements[file.uploadIndex];
-            listItems[index].progressBar.innerText = "Error";
+          if (li) {
+            li.progressBar.innerText = "Error";
           }
-          uploadResults[index] = false;
+          uploadResults[file.uploadIndex] = false;
           allSucceeded = false;
           finishedCount++;
           console.error("Error uploading file:", file.name);
@@ -225,10 +322,11 @@ export function initUpload() {
         });
 
         xhr.addEventListener("abort", function () {
-          if (index < maxDisplay && listItems[index]) {
+          const li = progressElements[file.uploadIndex];
-            listItems[index].progressBar.innerText = "Aborted";
+          if (li) {
+            li.progressBar.innerText = "Aborted";
           }
-          uploadResults[index] = false;
+          uploadResults[file.uploadIndex] = false;
           allSucceeded = false;
           finishedCount++;
           console.error("Upload aborted for file:", file.name);
@@ -247,12 +345,17 @@ export function initUpload() {
             initFileActions();
             serverFiles = (serverFiles || []).map(item => item.name.trim().toLowerCase());
             allFiles.forEach((file, index) => {
-              const fileName = file.name.trim().toLowerCase();
+              // Skip verification for folder-uploaded files.
-              if (index < maxDisplay && listItems[index]) {
+              if (file.webkitRelativePath && file.webkitRelativePath.trim() !== "") {
-                if (!uploadResults[index] || !serverFiles.includes(fileName)) {
+                return;
-                  listItems[index].progressBar.innerText = "Error";
-                  allSucceeded = false;
               }
+              const clientFileName = file.name.trim().toLowerCase();
+              if (!uploadResults[file.uploadIndex] || !serverFiles.includes(clientFileName)) {
+                const li = progressElements[file.uploadIndex];
+                if (li) {
+                  li.progressBar.innerText = "Error";
+                }
+                allSucceeded = false;
               }
             });
             setTimeout(() => {
@@ -267,6 +370,9 @@ export function initUpload() {
           .catch(error => {
             console.error("Error fetching file list:", error);
             showToast("Some files may have failed to upload. Please check the list.");
+          })
+          .finally(() => {
+            loadFolderTree(window.currentFolder);
           });
       }
     });

upload.php

@@ -49,10 +49,45 @@ foreach ($_FILES["file"]["name"] as $index => $fileName) {
         exit;
     }
     
+    // --- Minimal Folder/Subfolder Logic ---
+    // Check if a relativePath was provided (from a folder upload)
+    $relativePath = '';
+    if (isset($_POST['relativePath'])) {
+        // In case of multiple files, relativePath may be an array.
+        if (is_array($_POST['relativePath'])) {
+            $relativePath = $_POST['relativePath'][$index] ?? '';
+        } else {
+            $relativePath = $_POST['relativePath'];
+        }
+    }
+    if (!empty($relativePath)) {
+        // Extract the directory part from the relative path.
+        $subDir = dirname($relativePath);
+        if ($subDir !== '.' && $subDir !== '') {
+            // If uploading to root, don't add the "root" folder in the path.
+            if ($folder === 'root') {
+                $uploadDir = rtrim(UPLOAD_DIR, '/\\') . DIRECTORY_SEPARATOR . $subDir . DIRECTORY_SEPARATOR;
+            } else {
+                $uploadDir = rtrim(UPLOAD_DIR, '/\\') . DIRECTORY_SEPARATOR . $folder . DIRECTORY_SEPARATOR . $subDir . DIRECTORY_SEPARATOR;
+            }
+            if (!is_dir($uploadDir)) {
+                mkdir($uploadDir, 0775, true);
+            }
+            // Use the basename from the relative path.
+            $safeFileName = basename($relativePath);
+        }
+    }
+    // --- End Minimal Folder/Subfolder Logic ---
+    
     $targetPath = $uploadDir . $safeFileName;
+    
     if (move_uploaded_file($_FILES["file"]["tmp_name"][$index], $targetPath)) {
-        // Build the metadata key, including the folder if not in root.
+        // Build the metadata key.
+        if (!empty($relativePath)) {
+            $metaKey = ($folder !== 'root') ? $folder . "/" . $relativePath : $relativePath;
+        } else {
             $metaKey = ($folder !== 'root') ? $folder . "/" . $safeFileName : $safeFileName;
+        }
         if (!isset($metadata[$metaKey])) {
             $uploadedDate = date(DATE_TIME_FORMAT);
             $uploader = $_SESSION['username'] ?? "Unknown";