Test 2

app.py

@@ -285,20 +285,20 @@ async def rename_directory(paths: dict[str, str], verbose: Optional[bool] = Quer
     failed_paths = {}
 
     for old_name, new_name in paths.items():
-        old_directory = secure_path(old_name)
-        new_directory = secure_path(new_name)
+        old_path = secure_path(old_name)
+        new_path = secure_path(new_name)
 
-        if not old_directory.exists() or not old_directory.is_dir():
+        if not old_path.exists() or not old_path.exists():
             #raise HTTPException(status_code=404, detail="Directory not found")
             failed_paths[old_name] = new_name
             continue
 
-        if new_directory.exists():
+        if new_path.exists():
             failed_paths[old_name] = new_name
             continue
 
         try:
-            old_directory.rename(new_directory)
+            old_path.rename(new_path)
         except Exception as e:
             #raise HTTPException(status_code=500, detail=str(e))
             failed_paths[old_name] = new_name
@@ -434,4 +434,4 @@ def custom_http_exception_handler(request: Request, exc: HTTPException):
     return JSONResponse(
         status_code=exc.status_code,
         content={"message": exc.detail}  # Change "detail" to "message"
-    )
+    )

client/src/components/home/ContextMenu.tsx

@@ -2,11 +2,9 @@ import React, { useRef, useEffect, useState } from "react";
 import ConfirmationModal from "./ConfirmationModal";
 import Notification from "./Notification";
 
-
 interface ContextMenuProps {
   fileName: string;
   open: string;
-
   onDelete: string;
   rename: string;
   mime_type: string;
@@ -24,7 +22,6 @@ const ContextMenu: React.FC<ContextMenuProps> = ({
   isOpen,
   toggleMenu,
   refreshData,
-
 }) => {
   const menuRef = useRef<HTMLDivElement>(null);
   const buttonRef = useRef<HTMLButtonElement>(null);
@@ -126,7 +123,7 @@ const ContextMenu: React.FC<ContextMenuProps> = ({
   };
 
   const handleRename = async () => {
-    const newName = prompt("Enter new file name:");
+    const newName = prompt("Enter new file name:", fileName);
     if (newName) {
       try {
         const response = await fetch(`http://127.0.0.1:8000/api/file`, {
@@ -198,24 +195,26 @@ const ContextMenu: React.FC<ContextMenuProps> = ({
       <div
         ref={menuRef}
         id="dropdownDots"
-        className={`absolute right-0 mt-2 z-50 w-32 bg-white dark:bg-gray-900 shadow-lg rounded-md border border-gray-200 dark:border-gray-700 ${
+        className={`absolute right-0 mt-2 z-50 w-36 bg-white dark:bg-gray-900 shadow-lg rounded-md border border-gray-200 dark:border-gray-700 ${
           !isOpen ? "hidden" : ""
         }`}
       >
         <ul>
           <li>
-            <button
+          <button
               onClick={handleOpen}
-              className="block w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 dark:hover:text-white border-b border-gray-200 dark:border-gray-700"
+              className="flex items-center w-full text-left px-4 py-2 text-xs text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 dark:hover:text-white border-b border-gray-200 dark:border-gray-700"
             >
+              <i className="material-icons text-sm mr-2">file_open</i>
               {open}
             </button>
           </li>
           <li>
-            <button
+          <button
               onClick={handleRename}
-              className="block w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 dark:hover:text-white border-b border-gray-200 dark:border-gray-700"
+              className="flex items-center w-full text-left px-4 py-2 text-xs text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 dark:hover:text-white border-b border-gray-200 dark:border-gray-700"
             >
+              <i className="material-icons text-sm mr-2">edit</i>
               {rename}
             </button>
           </li>
@@ -225,6 +224,7 @@ const ContextMenu: React.FC<ContextMenuProps> = ({
 
               className="block w-full text-left px-4 py-2 text-md text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 dark:hover:text-white"
             >
+              <i className="material-icons text-sm mr-2">delete</i>
               {onDelete}
             </button>
           </li>

client/src/components/home/RecentFilesTable.tsx

@@ -64,7 +64,7 @@ const RecentFilesTable: React.FC<RecentFilesTableProps> = ({ files, refreshData
           {files.map((file, index) => (
             <tr
               key={index}
-              className="border-b border-gray-300 dark:border-gray-700"
+              className="border-b border-gray-300 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-700" 
             >
               <td className="p-3 dark:text-gray-300 flex items-center">
               <img src = {file.imagepath || "/images/placeholder.png"} className="p-3 bg-white rounded-md ml-2 mr-2 my-1 h-4 w-4"></img>

client/src/components/home/Sidebar.tsx

@@ -1,16 +1,19 @@
-import React, { FC } from "react";
+import React, { FC, useState } from "react";
+import UploadMenu from "./UploadMenu"; 
 
 interface Icon {
   icon: string;
   id: string;
 }
 
 interface SidebarProps {
-  openSection: string;  // The currently open section
-  setOpenSection: (section: string) => void;  // Function to change the open section
+  openSection: string;  
+  setOpenSection: (section: string) => void;  
 }
 
 const Sidebar: FC<SidebarProps> = ({ openSection, setOpenSection }) => {
+  const [isUploadMenuOpen, setIsUploadMenuOpen] = useState(false); 
+
   const icons: Icon[] = [
     { icon: "home", id: "home" },
     { icon: "folder", id: "myfiles" },
@@ -21,17 +24,30 @@ const Sidebar: FC<SidebarProps> = ({ openSection, setOpenSection }) => {
 
   const isActive = (id: string): boolean => id === openSection;
 
+  const toggleUploadMenu = () => {
+    setIsUploadMenuOpen(!isUploadMenuOpen);
+  };
+
   return (
-    <div className="h-screen w-16 bg-gray-100 dark:bg-gray-900 flex flex-col items-center py-4 space-y-4">
-      <button className="bg-blue-500 rounded-full w-12 h-12 flex items-center justify-center">
+    <div className="relative h-screen w-16 bg-gray-100 dark:bg-gray-900 flex flex-col items-center py-4 space-y-4">
+      <button
+        onClick={toggleUploadMenu}
+        className="bg-blue-500 rounded-full w-12 h-12 flex items-center justify-center"
+      >
         <i className="material-icons text-white text-2xl">add</i>
       </button>
 
+      {isUploadMenuOpen && (
+        <div className="absolute top-1 left-44">
+          <UploadMenu isOpen={isUploadMenuOpen} toggleMenu={toggleUploadMenu} />
+        </div>
+      )}
+
       <div className="flex flex-col space-y-4 items-center">
         {icons.map((icon: Icon) => (
           <i
             key={icon.id}
-            onClick={() => setOpenSection(icon.id)}  // Update the open section on click
+            onClick={() => setOpenSection(icon.id)} 
             className={`material-icons cursor-pointer ${
               isActive(icon.id)
                 ? "text-blue-500"

client/src/components/home/UploadMenu.tsx

@@ -0,0 +1,105 @@
+import React, { useRef, useEffect } from "react";
+
+interface UploadMenuProps {
+  isOpen: boolean;
+  toggleMenu: () => void;
+}
+
+const UploadMenu: React.FC<UploadMenuProps> = ({ isOpen, toggleMenu }) => {
+  const menuRef = useRef<HTMLDivElement>(null);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        menuRef.current &&
+        !menuRef.current.contains(event.target as Node) &&
+        buttonRef.current &&
+        !buttonRef.current.contains(event.target as Node)
+      ) {
+        toggleMenu();
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+    } else {
+      document.removeEventListener("mousedown", handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [isOpen, toggleMenu]);
+
+  const handleNewFolder = () => {
+    console.log("New Folder option selected");
+  };
+
+  const handleFileUpload = () => {
+    console.log("File Upload option selected");
+  };
+
+  const handleFolderUpload = () => {
+    console.log("Folder Upload option selected");
+  };
+
+  return (
+    <div
+      className="relative"
+      onContextMenu={(e) => {
+        e.preventDefault();
+        toggleMenu();
+      }}
+    >
+      <button
+        ref={buttonRef}
+        onClick={toggleMenu}
+        id="dropdownMenuIconButton"
+        className="inline-flex items-center p-2 text-md font-medium text-center text-gray-900 dark:text-white focus:ring-gray-50"
+        type="button"
+      >
+        {/* Button content (if needed) */}
+      </button>
+      <div
+        ref={menuRef}
+        id="dropdownDots"
+        className={`absolute right-0 mt-2 z-50 w-36 bg-white dark:bg-gray-900 shadow-lg rounded-md border border-gray-200 dark:border-gray-700 ${
+          !isOpen ? "hidden" : ""
+        }`}
+      >
+        <ul>
+          <li>
+            <button
+              onClick={handleNewFolder}
+              className="flex items-center w-full text-left px-4 py-2 text-xs text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 dark:hover:text-white border-b border-gray-200 dark:border-gray-700"
+            >
+              <i className="material-icons text-sm mr-2">create_new_folder</i>
+              New Folder
+            </button>
+          </li>
+          <li>
+            <button
+              onClick={handleFileUpload}
+              className="flex items-center w-full text-left px-4 py-2 text-xs text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 dark:hover:text-white border-b border-gray-200 dark:border-gray-700"
+            >
+              <i className="material-icons text-sm mr-2">upload_file</i>
+              File Upload
+            </button>
+          </li>
+          <li>
+            <button
+              onClick={handleFolderUpload}
+              className="flex items-center w-full text-left px-4 py-2 text-xs text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 dark:hover:text-white"
+            >
+              <i className="material-icons text-sm mr-2">drive_folder_upload</i>
+              Folder Upload
+            </button>
+          </li>
+        </ul>
+      </div>
+    </div>
+  );
+};
+
+export default UploadMenu;

client/src/components/home/sections/Home.tsx

@@ -20,6 +20,7 @@ interface APIResponse {
   files: File[];
 }
 
+
 const Home: FC = () => {
   const [files, setFiles] = useState<File[]>([]);
   const [loading, setLoading] = useState(true);