adjusted drop files & removed unused

domUtils.js

@@ -35,20 +35,17 @@ export function updateFileActionButtons() {
   const copyBtn = document.getElementById("copySelectedBtn");
   const moveBtn = document.getElementById("moveSelectedBtn");
   const deleteBtn = document.getElementById("deleteSelectedBtn");
-  const folderDropdown = document.getElementById("copyMoveFolderSelect");
   
   // Hide the buttons and dropdown if no files exist.
   if (fileCheckboxes.length === 0) {
     copyBtn.style.display = "none";
     moveBtn.style.display = "none";
     deleteBtn.style.display = "none";
-    folderDropdown.style.display = "none";
   } else {
     // Otherwise, show the buttons and dropdown.
     copyBtn.style.display = "inline-block";
     moveBtn.style.display = "inline-block";
     deleteBtn.style.display = "inline-block";
-    folderDropdown.style.display = "none";
     
     // Enable the buttons if at least one file is selected; otherwise disable.
     if (selectedCheckboxes.length > 0) {

folderManager.js

@@ -241,7 +241,6 @@ document.getElementById("submitRenameFolder").addEventListener("click", function
         showToast("Folder renamed successfully!");
         window.currentFolder = newFolderName;
         loadFolderList(newFolderName);
-        loadCopyMoveFolderList();
       } else {
         showToast("Error: " + (data.error || "Could not rename folder"));
       }
@@ -288,7 +287,6 @@ document.getElementById("confirmDeleteFolder").addEventListener("click", functio
           window.currentFolder = "root";
         }
         loadFolderList("root");
-        loadCopyMoveFolderList();
       } else {
         showToast("Error: " + (data.error || "Could not delete folder"));
       }
@@ -336,7 +334,6 @@ document.getElementById("submitCreateFolder").addEventListener("click", function
         showToast("Folder created successfully!");
         window.currentFolder = fullFolderName;
         loadFolderList(fullFolderName);
-        loadCopyMoveFolderList();
       } else {
         showToast("Error: " + (data.error || "Could not create folder"));
       }
@@ -348,34 +345,4 @@ document.getElementById("submitCreateFolder").addEventListener("click", function
       console.error("Error creating folder:", error);
       document.getElementById("createFolderModal").style.display = "none";
     });
-});
-
-// For copy/move folder dropdown.
-export async function loadCopyMoveFolderList() {
-  try {
-    const response = await fetch('getFolderList.php');
-    const folders = await response.json();
-    if (!Array.isArray(folders)) {
-      console.error("Folder list response is not an array:", folders);
-      return;
-    }
-    const folderSelect = document.getElementById('copyMoveFolderSelect').style.display = "none";
-    folderSelect.innerHTML = '';
-
-    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');
-        option.value = folder;
-        option.textContent = formatFolderName(folder);
-        folderSelect.appendChild(option);
-      });
-    }
-  } catch (error) {
-    console.error('Error loading folder list:', error);
-  }
-}
+});

index.html

@@ -53,16 +53,21 @@
 
     <!-- Main Operations: Upload and Folder Management -->
     <div id="mainOperations" style="display: none;">
-      <div class="row" id="uploadFolderRow">
+
+      <div class="row align-items-stretch" id="uploadFolderRow">
         <!-- Upload Card: 60% width -->
         <div class="col-md-7 d-flex">
           <div class="card flex-fill">
             <div class="card-header">Upload Files</div>
-            <div class="card-body">
-              <form id="uploadFileForm" method="post" enctype="multipart/form-data">
-                <div class="form-group">
-                  <div id="uploadDropArea"
-                    style="border:2px dashed #ccc; padding:20px; text-align:center; cursor:pointer;">
+            <!-- Make card-body a flex container in column direction -->
+            <div class="card-body d-flex flex-column">
+              <form id="uploadFileForm" method="post" enctype="multipart/form-data" class="d-flex flex-column"
+                style="height: 100%;">
+                <!-- Make the form-group container flex-grow so it fills available space -->
+                <div class="form-group flex-grow-1" style="margin-bottom: 1rem;">
+                  <!-- Set drop area to grow to fill its parent -->
+                  <div id="uploadDropArea" style="border:2px dashed #ccc; padding:20px; cursor:pointer; height: 100%;
+                         display: flex; flex-direction: column; justify-content: center; align-items: center;">
                     <span>Drop files here or click 'Choose files'</span>
                     <br>
                     <input type="file" id="file" name="file[]" class="form-control-file" multiple required
@@ -135,12 +140,17 @@
               border-radius:4px; 
               padding:10px;
             ">
-                <ul style="margin: 0; padding-left:20px;">
-                  <li>To view files in a folder, click on the folder name in the tree.</li>
-                  <li>To create a subfolder, select a folder from the tree above and click "Create Folder".</li>
-                  <li>To rename or delete a folder, first select it from the tree, then click "Rename Folder" or "Delete
-                    Folder" respectively.</li>
-                </ul>
+                <details style="margin-top:5px; font-size:12px; color:#555;">
+                  <summary style="cursor:pointer; list-style: none;">Folder Navigation & Management Help Info <i
+                      class="material-icons" style="vertical-align: middle;">info</i></summary>
+                  <ul style="margin: 0; padding-left:20px;">
+                    <li>To view files in a folder, click on the folder name in the tree.</li>
+                    <li>Above [-] expands and [+] collapses a folder in the tree.</li>
+                    <li>To create a subfolder, select a folder from the tree above and click "Create Folder".</li>
+                    <li>To rename or delete a folder, first select it from the tree, then click "Rename Folder" or
+                      "Delete Folder" respectively.</li>
+                  </ul>
+                </details>
               </div>
             </div>
           </div>
@@ -189,7 +199,6 @@
               </div>
             </div>
           </div>
-          <select id="copyMoveFolderSelect" style="display: none;"></select>
         </div>
         <div id="fileList"></div>
       </div>
@@ -235,7 +244,7 @@
         </div>
       </div>
     </div>
-    
+
     <!-- JavaScript Files -->
     <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
     <script type="module" src="main.js"></script>

main.js

@@ -16,8 +16,7 @@ import {
   renameFile
 } from './fileManager.js';
 import { 
-  loadFolderTree, 
-  loadCopyMoveFolderList, 
+  loadFolderTree,  
   loadFolderList
 } from './folderManager.js';
 import { initUpload } from './upload.js';

styles.css

@@ -246,21 +246,6 @@ header {
   opacity: 0.9;
 }
 
-/* File list action buttons (for Delete, Copy, Move) */
-.file-list-actions button {
-  background-color: #2196F3;
-  color: white;
-  border: none;
-  padding: 8px 16px;
-  border-radius: 4px;
-  cursor: pointer;
-  white-space: nowrap;
-}
-
-.file-list-actions button:hover {
-  background-color: #1976D2;
-}
-
 #deleteSelectedBtn {
   background-color: #f44336;
   /* Material red */