From 61d4d8947f73e1321a6b4057bf16952648179207 Mon Sep 17 00:00:00 2001
From: Saifullah-dev <saifullah.contact@gmail.com>
Date: Thu, 17 Oct 2024 23:04:18 +0500
Subject: [PATCH 1/5] Add useKeyPress hook for key press detection and
 shortcuts utils

---
 frontend/src/FileManager/FileManager.jsx | 14 +++++++++++
 frontend/src/hooks/useKeyPress.js        | 32 ++++++++++++++++++++++++
 frontend/src/utils/shortcuts.js          | 21 ++++++++++++++++
 3 files changed, 67 insertions(+)
 create mode 100644 frontend/src/hooks/useKeyPress.js
 create mode 100644 frontend/src/utils/shortcuts.js

diff --git a/frontend/src/FileManager/FileManager.jsx b/frontend/src/FileManager/FileManager.jsx
index 7d265df..22037a8 100644
--- a/frontend/src/FileManager/FileManager.jsx
+++ b/frontend/src/FileManager/FileManager.jsx
@@ -14,6 +14,8 @@ import { useColumnResize } from "../hooks/useColumnResize";
 import PropTypes from "prop-types";
 import { dateStringValidator, urlValidator } from "../validators/propValidators";
 import "./FileManager.scss";
+import { useKeyPress } from "../hooks/useKeyPress";
+import { shortcuts } from "../utils/shortcuts";
 
 const FileManager = ({
   files,
@@ -42,6 +44,10 @@ const FileManager = ({
   const { containerRef, colSizes, isDragging, handleMouseMove, handleMouseUp, handleMouseDown } =
     useColumnResize(20, 80);
 
+  useKeyPress(shortcuts.uploadFiles, (e) => {
+    console.log("File Upload!");
+  });
+
   return (
     <main
       className="file-explorer"
@@ -148,3 +154,11 @@ FileManager.propTypes = {
 };
 
 export default FileManager;
+
+// Only add event linstener to the FileManager and not the whole document.
+// Create a file in utils that contains all the shortcuts arrays of File Operations.
+// Create a Hook that accepts an array of keys: string as an argument and returns a callback function that triggers on there combination press.
+// The keys should be in English like ['Control', 'Shift, 'A'] for Ctrl + Shift + A etc.
+// How the provided callback will be used ?
+// For all the file managers actions like: create folder, upload file, cut, copy, paste, delete, rename, downlaod
+// there should be a generic way of triggering those actions just like the old days.
diff --git a/frontend/src/hooks/useKeyPress.js b/frontend/src/hooks/useKeyPress.js
new file mode 100644
index 0000000..6a299ad
--- /dev/null
+++ b/frontend/src/hooks/useKeyPress.js
@@ -0,0 +1,32 @@
+import { useEffect, useRef } from "react";
+
+export const useKeyPress = (keys, callback) => {
+  const lastKeyPressed = useRef(new Set([]));
+
+  const handleKeyDown = (e) => {
+    if (e.repeat) return; // To prevent this function from triggering on key hold e.g. Ctrl hold
+
+    const keysSet = new Set(keys);
+    lastKeyPressed.current.add(e.key);
+
+    if (keysSet.isSubsetOf(lastKeyPressed.current)) {
+      e.preventDefault();
+      callback(e);
+      return;
+    }
+  };
+
+  const handleKeyUp = (e) => {
+    lastKeyPressed.current.delete(e.key);
+  };
+
+  useEffect(() => {
+    window.addEventListener("keydown", handleKeyDown);
+    window.addEventListener("keyup", handleKeyUp);
+
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+      window.removeEventListener("keyup", handleKeyUp);
+    };
+  }, [keys, callback]);
+};
diff --git a/frontend/src/utils/shortcuts.js b/frontend/src/utils/shortcuts.js
new file mode 100644
index 0000000..c7f7b9b
--- /dev/null
+++ b/frontend/src/utils/shortcuts.js
@@ -0,0 +1,21 @@
+export const shortcuts = {
+  createFolder: ["Control", "Shift", "N"],
+  uploadFiles: ["Control", "U"],
+  cut: ["Control", "X"],
+  copy: ["Control", "C"],
+  paste: ["Control", "V"],
+  rename: ["F2"],
+  download: ["Control", "D"],
+  delete: ["Delete"],
+  selectAll: ["Control", "A"],
+  selectIndividuals: ["Control", "Click"],
+  selectRange: ["Shift", "Click"],
+  selectArrows: ["Shift", "Arrows"],
+  navigation: ["Arrows"],
+  jumpToFirst: ["Home"],
+  jumpToLast: ["End"],
+  listLayout: ["Control", "Shift", "1"],
+  gridLayout: ["Control", "Shift", "2"],
+  refresh: ["F5"],
+  clearSelection: ["Escape"],
+};

From 23048440453180c1b4725b334a19b67873f27dd3 Mon Sep 17 00:00:00 2001
From: Saifullah-dev <saifullah.contact@gmail.com>
Date: Sat, 19 Oct 2024 01:47:10 +0500
Subject: [PATCH 2/5] Implemented most of the file manager shortcuts with
 improved key press detection

---
 frontend/src/FileManager/Actions/Actions.jsx  |  5 +
 .../CreateFolder/CreateFolder.action.jsx      |  2 +-
 .../Actions/Rename/Rename.action.jsx          |  2 +-
 .../Actions/UploadFile/UploadFile.action.jsx  | 13 ++-
 .../src/FileManager/FileList/FileItem.jsx     |  9 +-
 .../src/FileManager/FileList/FileList.jsx     | 60 +++++-------
 frontend/src/FileManager/FileManager.jsx      | 23 +----
 frontend/src/FileManager/Toolbar/Toolbar.jsx  | 37 ++------
 frontend/src/components/Button/Button.jsx     |  3 +-
 frontend/src/components/Modal/Modal.jsx       | 13 ++-
 frontend/src/contexts/ClipboardContext.jsx    | 26 ++++-
 frontend/src/contexts/SelectionContext.jsx    |  8 +-
 frontend/src/hooks/useKeyPress.js             | 26 +++--
 frontend/src/hooks/useShortcutHandler.js      | 94 +++++++++++++++++++
 frontend/src/utils/shortcuts.js               | 14 +--
 15 files changed, 217 insertions(+), 118 deletions(-)
 create mode 100644 frontend/src/hooks/useShortcutHandler.js

diff --git a/frontend/src/FileManager/Actions/Actions.jsx b/frontend/src/FileManager/Actions/Actions.jsx
index 161f8e2..2009d95 100644
--- a/frontend/src/FileManager/Actions/Actions.jsx
+++ b/frontend/src/FileManager/Actions/Actions.jsx
@@ -4,12 +4,14 @@ import DeleteAction from "./Delete/Delete.action";
 import UploadFileAction from "./UploadFile/UploadFile.action";
 import PreviewFileAction from "./PreviewFile/PreviewFile.action";
 import { useSelection } from "../../contexts/SelectionContext";
+import { useShortcutHandler } from "../../hooks/useShortcutHandler";
 
 const Actions = ({
   fileUploadConfig,
   onFileUploading,
   onFileUploaded,
   onDelete,
+  onRefresh,
   maxFileSize,
   filePreviewPath,
   acceptedFileTypes,
@@ -18,6 +20,9 @@ const Actions = ({
   const [activeAction, setActiveAction] = useState(null);
   const { selectedFiles } = useSelection();
 
+  // Triggers all the keyboard shortcuts based actions
+  useShortcutHandler(triggerAction, onRefresh);
+
   const actionTypes = {
     uploadFile: {
       title: "Upload",
diff --git a/frontend/src/FileManager/Actions/CreateFolder/CreateFolder.action.jsx b/frontend/src/FileManager/Actions/CreateFolder/CreateFolder.action.jsx
index 690fe35..e2b9e21 100644
--- a/frontend/src/FileManager/Actions/CreateFolder/CreateFolder.action.jsx
+++ b/frontend/src/FileManager/Actions/CreateFolder/CreateFolder.action.jsx
@@ -30,9 +30,9 @@ const CreateFolderAction = ({ filesViewRef, file, onCreateFolder, triggerAction
 
   // Validate folder name and call "onCreateFolder" function
   const handleValidateFolderName = (e) => {
+    e.stopPropagation();
     if (e.key === "Enter") {
       e.preventDefault();
-      e.stopPropagation();
       handleFolderCreating();
       return;
     }
diff --git a/frontend/src/FileManager/Actions/Rename/Rename.action.jsx b/frontend/src/FileManager/Actions/Rename/Rename.action.jsx
index c52a94a..3f9ff2a 100644
--- a/frontend/src/FileManager/Actions/Rename/Rename.action.jsx
+++ b/frontend/src/FileManager/Actions/Rename/Rename.action.jsx
@@ -30,9 +30,9 @@ const RenameAction = ({ filesViewRef, file, onRename, triggerAction }) => {
   });
 
   const handleValidateFolderRename = (e) => {
+    e.stopPropagation();
     if (e.key === "Enter") {
       e.preventDefault();
-      e.stopPropagation();
       outsideClick.setIsClicked(true);
       return;
     }
diff --git a/frontend/src/FileManager/Actions/UploadFile/UploadFile.action.jsx b/frontend/src/FileManager/Actions/UploadFile/UploadFile.action.jsx
index c9810cb..23f5e0d 100644
--- a/frontend/src/FileManager/Actions/UploadFile/UploadFile.action.jsx
+++ b/frontend/src/FileManager/Actions/UploadFile/UploadFile.action.jsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useRef, useState } from "react";
 import Button from "../../../components/Button/Button";
 import { AiOutlineCloudUpload } from "react-icons/ai";
 import UploadItem from "./UploadItem";
@@ -21,6 +21,14 @@ const UploadFileAction = ({
   const [isUploading, setIsUploading] = useState({});
   const { currentFolder, currentPathFiles } = useFileNavigation();
   const { onError } = useFiles();
+  const fileInputRef = useRef(null);
+
+  // To open choose file if the "Choose File" button is focused and Enter key is pressed
+  const handleChooseFileKeyDown = (e) => {
+    if (e.key === "Enter") {
+      fileInputRef.current.click();
+    }
+  };
 
   const checkFileError = (file) => {
     const extError = !acceptedFileTypes.includes(getFileExtension(file.name));
@@ -104,9 +112,10 @@ const UploadFileAction = ({
           </div>
         </div>
         <div className="btn-choose-file">
-          <Button padding="0">
+          <Button padding="0" onKeyDown={handleChooseFileKeyDown}>
             <label htmlFor="chooseFile">Choose File</label>
             <input
+              ref={fileInputRef}
               type="file"
               id="chooseFile"
               className="choose-file-input"
diff --git a/frontend/src/FileManager/FileList/FileItem.jsx b/frontend/src/FileManager/FileList/FileItem.jsx
index c81c95b..c1579a2 100644
--- a/frontend/src/FileManager/FileList/FileItem.jsx
+++ b/frontend/src/FileManager/FileList/FileItem.jsx
@@ -20,7 +20,6 @@ const FileItem = ({
   onFileOpen,
   filesViewRef,
   selectedFileIndexes,
-  setSelectedFileIndexes,
   triggerAction,
   handleContextMenu,
   setLastSelectedFile,
@@ -44,7 +43,6 @@ const FileItem = ({
     onFileOpen(file);
     if (file.isDirectory) {
       setCurrentPath(file.path);
-      setSelectedFileIndexes([]);
       setSelectedFiles([]);
     } else {
       enableFilePreview && triggerAction.show("previewFile");
@@ -56,7 +54,6 @@ const FileItem = ({
     if (file.isEditing) return;
 
     setSelectedFiles([file]);
-    setSelectedFileIndexes([index]);
     const currentTime = new Date().getTime();
     if (currentTime - lastClickTime < 300) {
       handleFileAccess();
@@ -66,10 +63,9 @@ const FileItem = ({
   };
 
   const handleOnKeyDown = (e) => {
-    e.stopPropagation();
     if (e.key === "Enter") {
+      e.stopPropagation();
       setSelectedFiles([file]);
-      setSelectedFileIndexes([index]);
       handleFileAccess();
     }
   };
@@ -82,7 +78,6 @@ const FileItem = ({
 
     if (!fileSelected) {
       setSelectedFiles([file]);
-      setSelectedFileIndexes([index]);
     }
 
     setLastSelectedFile(file);
@@ -101,10 +96,8 @@ const FileItem = ({
   const handleCheckboxChange = (e) => {
     if (e.target.checked) {
       setSelectedFiles((prev) => [...prev, file]);
-      setSelectedFileIndexes((prev) => [...prev, index]);
     } else {
       setSelectedFiles((prev) => prev.filter((f) => f.name !== file.name && f.path !== file.path));
-      setSelectedFileIndexes((prev) => prev.filter((i) => i !== index));
     }
 
     setFileSelected(e.target.checked);
diff --git a/frontend/src/FileManager/FileList/FileList.jsx b/frontend/src/FileManager/FileList/FileList.jsx
index 979f7eb..e4d71e4 100644
--- a/frontend/src/FileManager/FileList/FileList.jsx
+++ b/frontend/src/FileManager/FileList/FileList.jsx
@@ -15,15 +15,7 @@ import { FaRegFile, FaRegPaste } from "react-icons/fa6";
 import { BiRename } from "react-icons/bi";
 import { useClipBoard } from "../../contexts/ClipboardContext";
 
-const FileList = ({
-  onCreateFolder,
-  onPaste,
-  onRename,
-  onDownload,
-  onFileOpen,
-  enableFilePreview,
-  triggerAction,
-}) => {
+const FileList = ({ onCreateFolder, onRename, onFileOpen, enableFilePreview, triggerAction }) => {
   const [selectedFileIndexes, setSelectedFileIndexes] = useState([]);
   const [visible, setVisible] = useState(false);
   const [isSelectionCtx, setIsSelectionCtx] = useState(false);
@@ -33,8 +25,8 @@ const FileList = ({
   const { currentPath, setCurrentPath, currentPathFiles, setCurrentPathFiles } =
     useFileNavigation();
   const filesViewRef = useRef(null);
-  const { selectedFiles, setSelectedFiles } = useSelection();
-  const { clipBoard, setClipBoard } = useClipBoard();
+  const { selectedFiles, setSelectedFiles, handleDownload } = useSelection();
+  const { clipBoard, handleCutCopy, handlePasting } = useClipBoard();
   const { activeLayout } = useLayout();
   const contextMenuRef = useDetectOutsideClick(() => setVisible(false));
 
@@ -65,12 +57,12 @@ const FileList = ({
     {
       title: "Cut",
       icon: <BsScissors size={19} />,
-      onClick: () => handleCutCopy(true),
+      onClick: () => handleMoveOrCopyItems(true),
     },
     {
       title: "Copy",
       icon: <BsCopy strokeWidth={0.1} size={17} />,
-      onClick: () => handleCutCopy(false),
+      onClick: () => handleMoveOrCopyItems(false),
     },
     {
       title: "Paste",
@@ -88,7 +80,7 @@ const FileList = ({
     {
       title: "Download",
       icon: <MdOutlineFileDownload size={18} />,
-      onClick: handleDownload,
+      onClick: handleDownloadItems,
       hidden: lastSelectedFile?.isDirectory,
     },
     {
@@ -109,24 +101,13 @@ const FileList = ({
     setVisible(false);
   }
 
-  function handleCutCopy(isMoving) {
-    setClipBoard({
-      files: selectedFiles,
-      isMoving: isMoving,
-    });
+  function handleMoveOrCopyItems(isMoving) {
+    handleCutCopy(isMoving);
     setVisible(false);
   }
 
   function handleFilePasting() {
-    if (clipBoard) {
-      const copiedFiles = clipBoard.files;
-      const operationType = clipBoard.isMoving ? "move" : "copy";
-
-      onPaste(copiedFiles, lastSelectedFile, operationType);
-
-      clipBoard.isMoving && setClipBoard(null);
-      setSelectedFiles([]);
-    }
+    handlePasting(lastSelectedFile);
     setVisible(false);
   }
 
@@ -135,8 +116,8 @@ const FileList = ({
     triggerAction.show("rename");
   }
 
-  function handleDownload() {
-    onDownload(selectedFiles);
+  function handleDownloadItems() {
+    handleDownload();
     setVisible(false);
   }
 
@@ -162,8 +143,8 @@ const FileList = ({
 
   const handleItemRenaming = () => {
     setCurrentPathFiles((prev) => {
-      if (prev[selectedFileIndexes[0]]) {
-        prev[selectedFileIndexes[0]].isEditing = true;
+      if (prev[selectedFileIndexes.at(-1)]) {
+        prev[selectedFileIndexes.at(-1)].isEditing = true;
       }
       return prev;
     });
@@ -198,10 +179,16 @@ const FileList = ({
   }, [currentPath]);
 
   useEffect(() => {
-    if (selectedFiles.length === 0) {
+    if (selectedFiles.length > 0) {
+      setSelectedFileIndexes(() => {
+        return selectedFiles.map((selectedFile) => {
+          return currentPathFiles.findIndex((f) => f.path === selectedFile.path);
+        });
+      });
+    } else {
       setSelectedFileIndexes([]);
     }
-  }, [selectedFiles]);
+  }, [selectedFiles, currentPathFiles]);
 
   return (
     <div
@@ -210,7 +197,7 @@ const FileList = ({
       onContextMenu={(e) => handleContextMenu(e, false)}
       onClick={() => {
         setSelectedFileIndexes([]);
-        setSelectedFiles([]);
+        setSelectedFiles((prev) => (prev.length > 0 ? [] : prev));
       }}
     >
       {activeLayout === "list" && (
@@ -228,14 +215,11 @@ const FileList = ({
               index={index}
               file={file}
               onCreateFolder={onCreateFolder}
-              onPaste={onPaste}
               onRename={onRename}
-              onDownload={onDownload}
               onFileOpen={onFileOpen}
               enableFilePreview={enableFilePreview}
               filesViewRef={filesViewRef}
               selectedFileIndexes={selectedFileIndexes}
-              setSelectedFileIndexes={setSelectedFileIndexes}
               triggerAction={triggerAction}
               handleContextMenu={handleContextMenu}
               setVisible={setVisible}
diff --git a/frontend/src/FileManager/FileManager.jsx b/frontend/src/FileManager/FileManager.jsx
index 22037a8..ab3c60a 100644
--- a/frontend/src/FileManager/FileManager.jsx
+++ b/frontend/src/FileManager/FileManager.jsx
@@ -14,8 +14,6 @@ import { useColumnResize } from "../hooks/useColumnResize";
 import PropTypes from "prop-types";
 import { dateStringValidator, urlValidator } from "../validators/propValidators";
 import "./FileManager.scss";
-import { useKeyPress } from "../hooks/useKeyPress";
-import { shortcuts } from "../utils/shortcuts";
 
 const FileManager = ({
   files,
@@ -44,10 +42,6 @@ const FileManager = ({
   const { containerRef, colSizes, isDragging, handleMouseMove, handleMouseUp, handleMouseDown } =
     useColumnResize(20, 80);
 
-  useKeyPress(shortcuts.uploadFiles, (e) => {
-    console.log("File Upload!");
-  });
-
   return (
     <main
       className="file-explorer"
@@ -57,14 +51,12 @@ const FileManager = ({
       <Loader isLoading={isLoading} />
       <FilesProvider filesData={files} onError={onError}>
         <FileNavigationProvider>
-          <SelectionProvider>
-            <ClipBoardProvider>
+          <SelectionProvider onDownload={onDownload}>
+            <ClipBoardProvider onPaste={onPaste}>
               <LayoutProvider layout={layout}>
                 <Toolbar
                   allowCreateFolder
                   allowUploadFile
-                  onPaste={onPaste}
-                  onDownload={onDownload}
                   onLayoutChange={onLayoutChange}
                   onRefresh={onRefresh}
                   triggerAction={triggerAction}
@@ -87,9 +79,7 @@ const FileManager = ({
                     <BreadCrumb />
                     <FileList
                       onCreateFolder={onCreateFolder}
-                      onPaste={onPaste}
                       onRename={onRename}
-                      onDownload={onDownload}
                       onFileOpen={onFileOpen}
                       enableFilePreview={enableFilePreview}
                       triggerAction={triggerAction}
@@ -102,6 +92,7 @@ const FileManager = ({
                   onFileUploading={onFileUploading}
                   onFileUploaded={onFileUploaded}
                   onDelete={onDelete}
+                  onRefresh={onRefresh}
                   maxFileSize={maxFileSize}
                   filePreviewPath={filePreviewPath}
                   acceptedFileTypes={acceptedFileTypes}
@@ -154,11 +145,3 @@ FileManager.propTypes = {
 };
 
 export default FileManager;
-
-// Only add event linstener to the FileManager and not the whole document.
-// Create a file in utils that contains all the shortcuts arrays of File Operations.
-// Create a Hook that accepts an array of keys: string as an argument and returns a callback function that triggers on there combination press.
-// The keys should be in English like ['Control', 'Shift, 'A'] for Ctrl + Shift + A etc.
-// How the provided callback will be used ?
-// For all the file managers actions like: create folder, upload file, cut, copy, paste, delete, rename, downlaod
-// there should be a generic way of triggering those actions just like the old days.
diff --git a/frontend/src/FileManager/Toolbar/Toolbar.jsx b/frontend/src/FileManager/Toolbar/Toolbar.jsx
index bc73766..14e0457 100644
--- a/frontend/src/FileManager/Toolbar/Toolbar.jsx
+++ b/frontend/src/FileManager/Toolbar/Toolbar.jsx
@@ -19,16 +19,14 @@ import "./Toolbar.scss";
 const Toolbar = ({
   allowCreateFolder = true,
   allowUploadFile = true,
-  onPaste,
-  onDownload,
   onLayoutChange,
   onRefresh,
   triggerAction,
 }) => {
   const [showToggleViewMenu, setShowToggleViewMenu] = useState(false);
   const { currentFolder } = useFileNavigation();
-  const { selectedFiles, setSelectedFiles } = useSelection();
-  const { clipBoard, setClipBoard } = useClipBoard();
+  const { selectedFiles, setSelectedFiles, handleDownload } = useSelection();
+  const { clipBoard, setClipBoard, handleCutCopy, handlePasting } = useClipBoard();
   const { activeLayout } = useLayout();
 
   // Toolbar Items
@@ -49,7 +47,7 @@ const Toolbar = ({
       icon: <FaRegPaste size={18} />,
       text: "Paste",
       permission: !!clipBoard,
-      onClick: handlePasting,
+      onClick: handleFilePasting,
     },
   ];
 
@@ -69,29 +67,12 @@ const Toolbar = ({
     },
   ];
 
-  // Handle Cut / Copy
-  const handleCutCopy = (isMoving) => {
-    setClipBoard({
-      files: selectedFiles,
-      isMoving: isMoving,
-    });
-  };
-  //
-
-  // Handle Pasting
-  // Todo: Show error if destination folder already has file(s) with the same name
-  function handlePasting() {
-    const copiedFiles = clipBoard.files;
-    const operationType = clipBoard.isMoving ? "move" : "copy";
-
-    onPaste(copiedFiles, currentFolder, operationType);
-
-    clipBoard.isMoving && setClipBoard(null);
-    setSelectedFiles([]);
+  function handleFilePasting() {
+    handlePasting(currentFolder);
   }
 
-  const handleDownload = () => {
-    onDownload(selectedFiles);
+  const handleDownloadItems = () => {
+    handleDownload();
     setSelectedFiles([]);
   };
 
@@ -112,7 +93,7 @@ const Toolbar = ({
             {clipBoard?.files?.length > 0 && (
               <button
                 className="item-action file-action"
-                onClick={handlePasting}
+                onClick={handleFilePasting}
                 // disabled={!clipBoard}
               >
                 <FaRegPaste size={18} />
@@ -129,7 +110,7 @@ const Toolbar = ({
               </button>
             )}
             {!selectedFiles.isDirectory && (
-              <button className="item-action file-action" onClick={handleDownload}>
+              <button className="item-action file-action" onClick={handleDownloadItems}>
                 <MdOutlineFileDownload size={19} />
                 <span>Download</span>
               </button>
diff --git a/frontend/src/components/Button/Button.jsx b/frontend/src/components/Button/Button.jsx
index 91bddf7..d3c6ec6 100644
--- a/frontend/src/components/Button/Button.jsx
+++ b/frontend/src/components/Button/Button.jsx
@@ -1,9 +1,10 @@
 import "./Button.scss";
 
-const Button = ({ onClick, type = "primary", padding = "0.4rem 0.8rem", children }) => {
+const Button = ({ onClick, onKeyDown, type = "primary", padding = "0.4rem 0.8rem", children }) => {
   return (
     <button
       onClick={onClick}
+      onKeyDown={onKeyDown}
       className={`fm-button fm-button-${type}`}
       style={{ padding: padding }}
     >
diff --git a/frontend/src/components/Modal/Modal.jsx b/frontend/src/components/Modal/Modal.jsx
index be75a92..1cd1a1f 100644
--- a/frontend/src/components/Modal/Modal.jsx
+++ b/frontend/src/components/Modal/Modal.jsx
@@ -13,6 +13,12 @@ const Modal = ({
 }) => {
   const modalRef = useRef(null);
 
+  const handleKeyDown = (e) => {
+    if (e.key === "Escape") {
+      setShow(false);
+    }
+  };
+
   useEffect(() => {
     if (show) {
       modalRef.current.showModal();
@@ -22,7 +28,12 @@ const Modal = ({
   }, [show]);
 
   return (
-    <dialog ref={modalRef} className={`fm-modal dialog`} style={{ width: dialogWidth }}>
+    <dialog
+      ref={modalRef}
+      className={`fm-modal dialog`}
+      style={{ width: dialogWidth }}
+      onKeyDown={handleKeyDown}
+    >
       <div className="fm-modal-header">
         <span className="fm-modal-heading">{heading}</span>
         {closeButton && (
diff --git a/frontend/src/contexts/ClipboardContext.jsx b/frontend/src/contexts/ClipboardContext.jsx
index d02ac5e..47605e3 100644
--- a/frontend/src/contexts/ClipboardContext.jsx
+++ b/frontend/src/contexts/ClipboardContext.jsx
@@ -1,12 +1,34 @@
 import { createContext, useContext, useState } from "react";
+import { useSelection } from "./SelectionContext";
 
 const ClipBoardContext = createContext();
 
-export const ClipBoardProvider = ({ children }) => {
+export const ClipBoardProvider = ({ children, onPaste }) => {
   const [clipBoard, setClipBoard] = useState(null);
+  const { selectedFiles, setSelectedFiles } = useSelection();
+
+  const handleCutCopy = (isMoving) => {
+    setClipBoard({
+      files: selectedFiles,
+      isMoving: isMoving,
+    });
+  };
+
+  // Todo: Show error if destination folder already has file(s) with the same name
+  const handlePasting = (destinationFolder) => {
+    if (destinationFolder && !destinationFolder.isDirectory) return;
+
+    const copiedFiles = clipBoard.files;
+    const operationType = clipBoard.isMoving ? "move" : "copy";
+
+    onPaste(copiedFiles, destinationFolder, operationType);
+
+    clipBoard.isMoving && setClipBoard(null);
+    setSelectedFiles([]);
+  };
 
   return (
-    <ClipBoardContext.Provider value={{ clipBoard, setClipBoard }}>
+    <ClipBoardContext.Provider value={{ clipBoard, setClipBoard, handleCutCopy, handlePasting }}>
       {children}
     </ClipBoardContext.Provider>
   );
diff --git a/frontend/src/contexts/SelectionContext.jsx b/frontend/src/contexts/SelectionContext.jsx
index c5a81d0..2b64e36 100644
--- a/frontend/src/contexts/SelectionContext.jsx
+++ b/frontend/src/contexts/SelectionContext.jsx
@@ -2,11 +2,15 @@ import { createContext, useContext, useState } from "react";
 
 const SelectionContext = createContext();
 
-export const SelectionProvider = ({ children }) => {
+export const SelectionProvider = ({ children, onDownload }) => {
   const [selectedFiles, setSelectedFiles] = useState([]);
 
+  const handleDownload = () => {
+    onDownload(selectedFiles);
+  };
+
   return (
-    <SelectionContext.Provider value={{ selectedFiles, setSelectedFiles }}>
+    <SelectionContext.Provider value={{ selectedFiles, setSelectedFiles, handleDownload }}>
       {children}
     </SelectionContext.Provider>
   );
diff --git a/frontend/src/hooks/useKeyPress.js b/frontend/src/hooks/useKeyPress.js
index 6a299ad..0f3f84f 100644
--- a/frontend/src/hooks/useKeyPress.js
+++ b/frontend/src/hooks/useKeyPress.js
@@ -1,15 +1,21 @@
-import { useEffect, useRef } from "react";
+import { useEffect, useMemo, useRef } from "react";
 
-export const useKeyPress = (keys, callback) => {
+const normalizeKey = (key) => {
+  return key.toLowerCase();
+};
+
+export const useKeyPress = (keys, callback, disable = false) => {
   const lastKeyPressed = useRef(new Set([]));
+  const keysSet = useMemo(() => {
+    return new Set(keys.map((key) => normalizeKey(key)));
+  }, [keys]);
 
   const handleKeyDown = (e) => {
     if (e.repeat) return; // To prevent this function from triggering on key hold e.g. Ctrl hold
 
-    const keysSet = new Set(keys);
-    lastKeyPressed.current.add(e.key);
+    lastKeyPressed.current.add(normalizeKey(e.key));
 
-    if (keysSet.isSubsetOf(lastKeyPressed.current)) {
+    if (keysSet.isSubsetOf(lastKeyPressed.current) && !disable) {
       e.preventDefault();
       callback(e);
       return;
@@ -17,16 +23,22 @@ export const useKeyPress = (keys, callback) => {
   };
 
   const handleKeyUp = (e) => {
-    lastKeyPressed.current.delete(e.key);
+    lastKeyPressed.current.delete(normalizeKey(e.key));
+  };
+
+  const handleBlur = () => {
+    lastKeyPressed.current.clear();
   };
 
   useEffect(() => {
     window.addEventListener("keydown", handleKeyDown);
     window.addEventListener("keyup", handleKeyUp);
+    window.addEventListener("blur", handleBlur);
 
     return () => {
       window.removeEventListener("keydown", handleKeyDown);
       window.removeEventListener("keyup", handleKeyUp);
+      window.removeEventListener("blur", handleBlur);
     };
-  }, [keys, callback]);
+  }, [keysSet, callback, disable]);
 };
diff --git a/frontend/src/hooks/useShortcutHandler.js b/frontend/src/hooks/useShortcutHandler.js
new file mode 100644
index 0000000..2dc455b
--- /dev/null
+++ b/frontend/src/hooks/useShortcutHandler.js
@@ -0,0 +1,94 @@
+import { useKeyPress } from "./useKeyPress";
+import { shortcuts } from "../utils/shortcuts";
+import { useClipBoard } from "../contexts/ClipboardContext";
+import { useFileNavigation } from "../contexts/FileNavigationContext";
+import { useSelection } from "../contexts/SelectionContext";
+import { useLayout } from "../contexts/LayoutContext";
+
+export const useShortcutHandler = (triggerAction, onRefresh) => {
+  const { setClipBoard, handleCutCopy, handlePasting } = useClipBoard();
+  const { currentFolder, currentPathFiles } = useFileNavigation();
+  const { setSelectedFiles, handleDownload } = useSelection();
+  const { setActiveLayout } = useLayout();
+
+  const triggerCreateFolder = () => {
+    triggerAction.show("createFolder");
+  };
+
+  const triggerUploadFiles = () => {
+    triggerAction.show("uploadFile");
+  };
+
+  const triggerCutItems = () => {
+    handleCutCopy(true);
+  };
+
+  const triggerCopyItems = () => {
+    handleCutCopy(false);
+  };
+
+  const triggerPasteItems = () => {
+    handlePasting(currentFolder);
+  };
+
+  const triggerRename = () => {
+    triggerAction.show("rename");
+  };
+
+  const triggerDownload = () => {
+    handleDownload();
+  };
+
+  const triggerDelete = () => {
+    triggerAction.show("delete");
+  };
+
+  const triggerSelectFirst = () => {
+    if (currentPathFiles.length > 0) {
+      setSelectedFiles([currentPathFiles[0]]);
+    }
+  };
+
+  const triggerSelectLast = () => {
+    if (currentPathFiles.length > 0) {
+      setSelectedFiles([currentPathFiles.at(-1)]);
+    }
+  };
+
+  const triggerSelectAll = () => {
+    setSelectedFiles(currentPathFiles);
+  };
+
+  const triggerClearSelection = () => {
+    setSelectedFiles((prev) => (prev.length > 0 ? [] : prev));
+  };
+
+  const triggerRefresh = () => {
+    onRefresh();
+    setClipBoard(null);
+  };
+
+  const triggerGridLayout = () => {
+    setActiveLayout("grid");
+  };
+  const triggerListLayout = () => {
+    setActiveLayout("list");
+  };
+
+  // Keypress detection will be disbaled when some Action is in active state.
+  useKeyPress(shortcuts.createFolder, triggerCreateFolder, triggerAction.isActive);
+  useKeyPress(shortcuts.uploadFiles, triggerUploadFiles, triggerAction.isActive);
+  useKeyPress(shortcuts.cut, triggerCutItems, triggerAction.isActive);
+  useKeyPress(shortcuts.copy, triggerCopyItems, triggerAction.isActive);
+  useKeyPress(shortcuts.paste, triggerPasteItems, triggerAction.isActive);
+  useKeyPress(shortcuts.rename, triggerRename, triggerAction.isActive);
+  useKeyPress(shortcuts.download, triggerDownload, triggerAction.isActive);
+  useKeyPress(shortcuts.delete, triggerDelete, triggerAction.isActive);
+  useKeyPress(shortcuts.jumpToFirst, triggerSelectFirst, triggerAction.isActive);
+  useKeyPress(shortcuts.jumpToLast, triggerSelectLast, triggerAction.isActive);
+  useKeyPress(shortcuts.selectAll, triggerSelectAll, triggerAction.isActive);
+  useKeyPress(shortcuts.clearSelection, triggerClearSelection, triggerAction.isActive);
+  useKeyPress(shortcuts.refresh, triggerRefresh, triggerAction.isActive);
+  useKeyPress(shortcuts.gridLayout, triggerGridLayout, triggerAction.isActive);
+  useKeyPress(shortcuts.listLayout, triggerListLayout, triggerAction.isActive);
+};
diff --git a/frontend/src/utils/shortcuts.js b/frontend/src/utils/shortcuts.js
index c7f7b9b..eb67ba9 100644
--- a/frontend/src/utils/shortcuts.js
+++ b/frontend/src/utils/shortcuts.js
@@ -1,5 +1,5 @@
 export const shortcuts = {
-  createFolder: ["Control", "Shift", "N"],
+  createFolder: ["Alt", "Shift", "N"],
   uploadFiles: ["Control", "U"],
   cut: ["Control", "X"],
   copy: ["Control", "C"],
@@ -8,14 +8,14 @@ export const shortcuts = {
   download: ["Control", "D"],
   delete: ["Delete"],
   selectAll: ["Control", "A"],
-  selectIndividuals: ["Control", "Click"],
-  selectRange: ["Shift", "Click"],
-  selectArrows: ["Shift", "Arrows"],
-  navigation: ["Arrows"],
+  selectIndividuals: ["Control", "Click"], // (pending)
+  selectRange: ["Shift", "Click"], // (pending)
+  selectArrows: ["Shift", "Arrows"], // (pending)
+  navigation: ["Arrows"], // (pending)
   jumpToFirst: ["Home"],
   jumpToLast: ["End"],
-  listLayout: ["Control", "Shift", "1"],
-  gridLayout: ["Control", "Shift", "2"],
+  listLayout: ["Control", "Shift", "!"], // Act as Ctrl + Shift + 1 but could cause problems for QWERTZ or DVORAK etc. keyborad layouts.
+  gridLayout: ["Control", "Shift", "@"], // Act as Ctrl + Shift + 2 but could cause problems for QWERTZ or DVORAK etc. keyborad layouts.
   refresh: ["F5"],
   clearSelection: ["Escape"],
 };

From e824d33ab8e67cca54234fa149ce2cc4af5cabce Mon Sep 17 00:00:00 2001
From: Saifullah-dev <saifullah.contact@gmail.com>
Date: Thu, 17 Oct 2024 23:04:18 +0500
Subject: [PATCH 3/5] Add useKeyPress hook for key press detection and
 shortcuts utils

---
 frontend/src/FileManager/FileManager.jsx | 14 +++++++++++
 frontend/src/hooks/useKeyPress.js        | 32 ++++++++++++++++++++++++
 frontend/src/utils/shortcuts.js          | 21 ++++++++++++++++
 3 files changed, 67 insertions(+)
 create mode 100644 frontend/src/hooks/useKeyPress.js
 create mode 100644 frontend/src/utils/shortcuts.js

diff --git a/frontend/src/FileManager/FileManager.jsx b/frontend/src/FileManager/FileManager.jsx
index 7d265df..22037a8 100644
--- a/frontend/src/FileManager/FileManager.jsx
+++ b/frontend/src/FileManager/FileManager.jsx
@@ -14,6 +14,8 @@ import { useColumnResize } from "../hooks/useColumnResize";
 import PropTypes from "prop-types";
 import { dateStringValidator, urlValidator } from "../validators/propValidators";
 import "./FileManager.scss";
+import { useKeyPress } from "../hooks/useKeyPress";
+import { shortcuts } from "../utils/shortcuts";
 
 const FileManager = ({
   files,
@@ -42,6 +44,10 @@ const FileManager = ({
   const { containerRef, colSizes, isDragging, handleMouseMove, handleMouseUp, handleMouseDown } =
     useColumnResize(20, 80);
 
+  useKeyPress(shortcuts.uploadFiles, (e) => {
+    console.log("File Upload!");
+  });
+
   return (
     <main
       className="file-explorer"
@@ -148,3 +154,11 @@ FileManager.propTypes = {
 };
 
 export default FileManager;
+
+// Only add event linstener to the FileManager and not the whole document.
+// Create a file in utils that contains all the shortcuts arrays of File Operations.
+// Create a Hook that accepts an array of keys: string as an argument and returns a callback function that triggers on there combination press.
+// The keys should be in English like ['Control', 'Shift, 'A'] for Ctrl + Shift + A etc.
+// How the provided callback will be used ?
+// For all the file managers actions like: create folder, upload file, cut, copy, paste, delete, rename, downlaod
+// there should be a generic way of triggering those actions just like the old days.
diff --git a/frontend/src/hooks/useKeyPress.js b/frontend/src/hooks/useKeyPress.js
new file mode 100644
index 0000000..6a299ad
--- /dev/null
+++ b/frontend/src/hooks/useKeyPress.js
@@ -0,0 +1,32 @@
+import { useEffect, useRef } from "react";
+
+export const useKeyPress = (keys, callback) => {
+  const lastKeyPressed = useRef(new Set([]));
+
+  const handleKeyDown = (e) => {
+    if (e.repeat) return; // To prevent this function from triggering on key hold e.g. Ctrl hold
+
+    const keysSet = new Set(keys);
+    lastKeyPressed.current.add(e.key);
+
+    if (keysSet.isSubsetOf(lastKeyPressed.current)) {
+      e.preventDefault();
+      callback(e);
+      return;
+    }
+  };
+
+  const handleKeyUp = (e) => {
+    lastKeyPressed.current.delete(e.key);
+  };
+
+  useEffect(() => {
+    window.addEventListener("keydown", handleKeyDown);
+    window.addEventListener("keyup", handleKeyUp);
+
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+      window.removeEventListener("keyup", handleKeyUp);
+    };
+  }, [keys, callback]);
+};
diff --git a/frontend/src/utils/shortcuts.js b/frontend/src/utils/shortcuts.js
new file mode 100644
index 0000000..c7f7b9b
--- /dev/null
+++ b/frontend/src/utils/shortcuts.js
@@ -0,0 +1,21 @@
+export const shortcuts = {
+  createFolder: ["Control", "Shift", "N"],
+  uploadFiles: ["Control", "U"],
+  cut: ["Control", "X"],
+  copy: ["Control", "C"],
+  paste: ["Control", "V"],
+  rename: ["F2"],
+  download: ["Control", "D"],
+  delete: ["Delete"],
+  selectAll: ["Control", "A"],
+  selectIndividuals: ["Control", "Click"],
+  selectRange: ["Shift", "Click"],
+  selectArrows: ["Shift", "Arrows"],
+  navigation: ["Arrows"],
+  jumpToFirst: ["Home"],
+  jumpToLast: ["End"],
+  listLayout: ["Control", "Shift", "1"],
+  gridLayout: ["Control", "Shift", "2"],
+  refresh: ["F5"],
+  clearSelection: ["Escape"],
+};

From 6809e0d2f3169d9352a3281943a9c56f2334499b Mon Sep 17 00:00:00 2001
From: Saifullah-dev <saifullah.contact@gmail.com>
Date: Sat, 19 Oct 2024 01:47:10 +0500
Subject: [PATCH 4/5] Implemented most of the file manager shortcuts with
 improved key press detection

---
 frontend/src/FileManager/Actions/Actions.jsx  |  5 +
 .../CreateFolder/CreateFolder.action.jsx      |  2 +-
 .../Actions/Rename/Rename.action.jsx          |  2 +-
 .../Actions/UploadFile/UploadFile.action.jsx  | 13 ++-
 .../src/FileManager/FileList/FileItem.jsx     |  9 +-
 .../src/FileManager/FileList/FileList.jsx     | 60 +++++-------
 frontend/src/FileManager/FileManager.jsx      | 23 +----
 frontend/src/FileManager/Toolbar/Toolbar.jsx  | 37 ++------
 frontend/src/components/Button/Button.jsx     |  3 +-
 frontend/src/components/Modal/Modal.jsx       | 13 ++-
 frontend/src/contexts/ClipboardContext.jsx    | 26 ++++-
 frontend/src/contexts/SelectionContext.jsx    |  8 +-
 frontend/src/hooks/useKeyPress.js             | 26 +++--
 frontend/src/hooks/useShortcutHandler.js      | 94 +++++++++++++++++++
 frontend/src/utils/shortcuts.js               | 14 +--
 15 files changed, 217 insertions(+), 118 deletions(-)
 create mode 100644 frontend/src/hooks/useShortcutHandler.js

diff --git a/frontend/src/FileManager/Actions/Actions.jsx b/frontend/src/FileManager/Actions/Actions.jsx
index 161f8e2..2009d95 100644
--- a/frontend/src/FileManager/Actions/Actions.jsx
+++ b/frontend/src/FileManager/Actions/Actions.jsx
@@ -4,12 +4,14 @@ import DeleteAction from "./Delete/Delete.action";
 import UploadFileAction from "./UploadFile/UploadFile.action";
 import PreviewFileAction from "./PreviewFile/PreviewFile.action";
 import { useSelection } from "../../contexts/SelectionContext";
+import { useShortcutHandler } from "../../hooks/useShortcutHandler";
 
 const Actions = ({
   fileUploadConfig,
   onFileUploading,
   onFileUploaded,
   onDelete,
+  onRefresh,
   maxFileSize,
   filePreviewPath,
   acceptedFileTypes,
@@ -18,6 +20,9 @@ const Actions = ({
   const [activeAction, setActiveAction] = useState(null);
   const { selectedFiles } = useSelection();
 
+  // Triggers all the keyboard shortcuts based actions
+  useShortcutHandler(triggerAction, onRefresh);
+
   const actionTypes = {
     uploadFile: {
       title: "Upload",
diff --git a/frontend/src/FileManager/Actions/CreateFolder/CreateFolder.action.jsx b/frontend/src/FileManager/Actions/CreateFolder/CreateFolder.action.jsx
index 690fe35..e2b9e21 100644
--- a/frontend/src/FileManager/Actions/CreateFolder/CreateFolder.action.jsx
+++ b/frontend/src/FileManager/Actions/CreateFolder/CreateFolder.action.jsx
@@ -30,9 +30,9 @@ const CreateFolderAction = ({ filesViewRef, file, onCreateFolder, triggerAction
 
   // Validate folder name and call "onCreateFolder" function
   const handleValidateFolderName = (e) => {
+    e.stopPropagation();
     if (e.key === "Enter") {
       e.preventDefault();
-      e.stopPropagation();
       handleFolderCreating();
       return;
     }
diff --git a/frontend/src/FileManager/Actions/Rename/Rename.action.jsx b/frontend/src/FileManager/Actions/Rename/Rename.action.jsx
index c52a94a..3f9ff2a 100644
--- a/frontend/src/FileManager/Actions/Rename/Rename.action.jsx
+++ b/frontend/src/FileManager/Actions/Rename/Rename.action.jsx
@@ -30,9 +30,9 @@ const RenameAction = ({ filesViewRef, file, onRename, triggerAction }) => {
   });
 
   const handleValidateFolderRename = (e) => {
+    e.stopPropagation();
     if (e.key === "Enter") {
       e.preventDefault();
-      e.stopPropagation();
       outsideClick.setIsClicked(true);
       return;
     }
diff --git a/frontend/src/FileManager/Actions/UploadFile/UploadFile.action.jsx b/frontend/src/FileManager/Actions/UploadFile/UploadFile.action.jsx
index c9810cb..23f5e0d 100644
--- a/frontend/src/FileManager/Actions/UploadFile/UploadFile.action.jsx
+++ b/frontend/src/FileManager/Actions/UploadFile/UploadFile.action.jsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useRef, useState } from "react";
 import Button from "../../../components/Button/Button";
 import { AiOutlineCloudUpload } from "react-icons/ai";
 import UploadItem from "./UploadItem";
@@ -21,6 +21,14 @@ const UploadFileAction = ({
   const [isUploading, setIsUploading] = useState({});
   const { currentFolder, currentPathFiles } = useFileNavigation();
   const { onError } = useFiles();
+  const fileInputRef = useRef(null);
+
+  // To open choose file if the "Choose File" button is focused and Enter key is pressed
+  const handleChooseFileKeyDown = (e) => {
+    if (e.key === "Enter") {
+      fileInputRef.current.click();
+    }
+  };
 
   const checkFileError = (file) => {
     const extError = !acceptedFileTypes.includes(getFileExtension(file.name));
@@ -104,9 +112,10 @@ const UploadFileAction = ({
           </div>
         </div>
         <div className="btn-choose-file">
-          <Button padding="0">
+          <Button padding="0" onKeyDown={handleChooseFileKeyDown}>
             <label htmlFor="chooseFile">Choose File</label>
             <input
+              ref={fileInputRef}
               type="file"
               id="chooseFile"
               className="choose-file-input"
diff --git a/frontend/src/FileManager/FileList/FileItem.jsx b/frontend/src/FileManager/FileList/FileItem.jsx
index c81c95b..c1579a2 100644
--- a/frontend/src/FileManager/FileList/FileItem.jsx
+++ b/frontend/src/FileManager/FileList/FileItem.jsx
@@ -20,7 +20,6 @@ const FileItem = ({
   onFileOpen,
   filesViewRef,
   selectedFileIndexes,
-  setSelectedFileIndexes,
   triggerAction,
   handleContextMenu,
   setLastSelectedFile,
@@ -44,7 +43,6 @@ const FileItem = ({
     onFileOpen(file);
     if (file.isDirectory) {
       setCurrentPath(file.path);
-      setSelectedFileIndexes([]);
       setSelectedFiles([]);
     } else {
       enableFilePreview && triggerAction.show("previewFile");
@@ -56,7 +54,6 @@ const FileItem = ({
     if (file.isEditing) return;
 
     setSelectedFiles([file]);
-    setSelectedFileIndexes([index]);
     const currentTime = new Date().getTime();
     if (currentTime - lastClickTime < 300) {
       handleFileAccess();
@@ -66,10 +63,9 @@ const FileItem = ({
   };
 
   const handleOnKeyDown = (e) => {
-    e.stopPropagation();
     if (e.key === "Enter") {
+      e.stopPropagation();
       setSelectedFiles([file]);
-      setSelectedFileIndexes([index]);
       handleFileAccess();
     }
   };
@@ -82,7 +78,6 @@ const FileItem = ({
 
     if (!fileSelected) {
       setSelectedFiles([file]);
-      setSelectedFileIndexes([index]);
     }
 
     setLastSelectedFile(file);
@@ -101,10 +96,8 @@ const FileItem = ({
   const handleCheckboxChange = (e) => {
     if (e.target.checked) {
       setSelectedFiles((prev) => [...prev, file]);
-      setSelectedFileIndexes((prev) => [...prev, index]);
     } else {
       setSelectedFiles((prev) => prev.filter((f) => f.name !== file.name && f.path !== file.path));
-      setSelectedFileIndexes((prev) => prev.filter((i) => i !== index));
     }
 
     setFileSelected(e.target.checked);
diff --git a/frontend/src/FileManager/FileList/FileList.jsx b/frontend/src/FileManager/FileList/FileList.jsx
index 979f7eb..e4d71e4 100644
--- a/frontend/src/FileManager/FileList/FileList.jsx
+++ b/frontend/src/FileManager/FileList/FileList.jsx
@@ -15,15 +15,7 @@ import { FaRegFile, FaRegPaste } from "react-icons/fa6";
 import { BiRename } from "react-icons/bi";
 import { useClipBoard } from "../../contexts/ClipboardContext";
 
-const FileList = ({
-  onCreateFolder,
-  onPaste,
-  onRename,
-  onDownload,
-  onFileOpen,
-  enableFilePreview,
-  triggerAction,
-}) => {
+const FileList = ({ onCreateFolder, onRename, onFileOpen, enableFilePreview, triggerAction }) => {
   const [selectedFileIndexes, setSelectedFileIndexes] = useState([]);
   const [visible, setVisible] = useState(false);
   const [isSelectionCtx, setIsSelectionCtx] = useState(false);
@@ -33,8 +25,8 @@ const FileList = ({
   const { currentPath, setCurrentPath, currentPathFiles, setCurrentPathFiles } =
     useFileNavigation();
   const filesViewRef = useRef(null);
-  const { selectedFiles, setSelectedFiles } = useSelection();
-  const { clipBoard, setClipBoard } = useClipBoard();
+  const { selectedFiles, setSelectedFiles, handleDownload } = useSelection();
+  const { clipBoard, handleCutCopy, handlePasting } = useClipBoard();
   const { activeLayout } = useLayout();
   const contextMenuRef = useDetectOutsideClick(() => setVisible(false));
 
@@ -65,12 +57,12 @@ const FileList = ({
     {
       title: "Cut",
       icon: <BsScissors size={19} />,
-      onClick: () => handleCutCopy(true),
+      onClick: () => handleMoveOrCopyItems(true),
     },
     {
       title: "Copy",
       icon: <BsCopy strokeWidth={0.1} size={17} />,
-      onClick: () => handleCutCopy(false),
+      onClick: () => handleMoveOrCopyItems(false),
     },
     {
       title: "Paste",
@@ -88,7 +80,7 @@ const FileList = ({
     {
       title: "Download",
       icon: <MdOutlineFileDownload size={18} />,
-      onClick: handleDownload,
+      onClick: handleDownloadItems,
       hidden: lastSelectedFile?.isDirectory,
     },
     {
@@ -109,24 +101,13 @@ const FileList = ({
     setVisible(false);
   }
 
-  function handleCutCopy(isMoving) {
-    setClipBoard({
-      files: selectedFiles,
-      isMoving: isMoving,
-    });
+  function handleMoveOrCopyItems(isMoving) {
+    handleCutCopy(isMoving);
     setVisible(false);
   }
 
   function handleFilePasting() {
-    if (clipBoard) {
-      const copiedFiles = clipBoard.files;
-      const operationType = clipBoard.isMoving ? "move" : "copy";
-
-      onPaste(copiedFiles, lastSelectedFile, operationType);
-
-      clipBoard.isMoving && setClipBoard(null);
-      setSelectedFiles([]);
-    }
+    handlePasting(lastSelectedFile);
     setVisible(false);
   }
 
@@ -135,8 +116,8 @@ const FileList = ({
     triggerAction.show("rename");
   }
 
-  function handleDownload() {
-    onDownload(selectedFiles);
+  function handleDownloadItems() {
+    handleDownload();
     setVisible(false);
   }
 
@@ -162,8 +143,8 @@ const FileList = ({
 
   const handleItemRenaming = () => {
     setCurrentPathFiles((prev) => {
-      if (prev[selectedFileIndexes[0]]) {
-        prev[selectedFileIndexes[0]].isEditing = true;
+      if (prev[selectedFileIndexes.at(-1)]) {
+        prev[selectedFileIndexes.at(-1)].isEditing = true;
       }
       return prev;
     });
@@ -198,10 +179,16 @@ const FileList = ({
   }, [currentPath]);
 
   useEffect(() => {
-    if (selectedFiles.length === 0) {
+    if (selectedFiles.length > 0) {
+      setSelectedFileIndexes(() => {
+        return selectedFiles.map((selectedFile) => {
+          return currentPathFiles.findIndex((f) => f.path === selectedFile.path);
+        });
+      });
+    } else {
       setSelectedFileIndexes([]);
     }
-  }, [selectedFiles]);
+  }, [selectedFiles, currentPathFiles]);
 
   return (
     <div
@@ -210,7 +197,7 @@ const FileList = ({
       onContextMenu={(e) => handleContextMenu(e, false)}
       onClick={() => {
         setSelectedFileIndexes([]);
-        setSelectedFiles([]);
+        setSelectedFiles((prev) => (prev.length > 0 ? [] : prev));
       }}
     >
       {activeLayout === "list" && (
@@ -228,14 +215,11 @@ const FileList = ({
               index={index}
               file={file}
               onCreateFolder={onCreateFolder}
-              onPaste={onPaste}
               onRename={onRename}
-              onDownload={onDownload}
               onFileOpen={onFileOpen}
               enableFilePreview={enableFilePreview}
               filesViewRef={filesViewRef}
               selectedFileIndexes={selectedFileIndexes}
-              setSelectedFileIndexes={setSelectedFileIndexes}
               triggerAction={triggerAction}
               handleContextMenu={handleContextMenu}
               setVisible={setVisible}
diff --git a/frontend/src/FileManager/FileManager.jsx b/frontend/src/FileManager/FileManager.jsx
index 22037a8..ab3c60a 100644
--- a/frontend/src/FileManager/FileManager.jsx
+++ b/frontend/src/FileManager/FileManager.jsx
@@ -14,8 +14,6 @@ import { useColumnResize } from "../hooks/useColumnResize";
 import PropTypes from "prop-types";
 import { dateStringValidator, urlValidator } from "../validators/propValidators";
 import "./FileManager.scss";
-import { useKeyPress } from "../hooks/useKeyPress";
-import { shortcuts } from "../utils/shortcuts";
 
 const FileManager = ({
   files,
@@ -44,10 +42,6 @@ const FileManager = ({
   const { containerRef, colSizes, isDragging, handleMouseMove, handleMouseUp, handleMouseDown } =
     useColumnResize(20, 80);
 
-  useKeyPress(shortcuts.uploadFiles, (e) => {
-    console.log("File Upload!");
-  });
-
   return (
     <main
       className="file-explorer"
@@ -57,14 +51,12 @@ const FileManager = ({
       <Loader isLoading={isLoading} />
       <FilesProvider filesData={files} onError={onError}>
         <FileNavigationProvider>
-          <SelectionProvider>
-            <ClipBoardProvider>
+          <SelectionProvider onDownload={onDownload}>
+            <ClipBoardProvider onPaste={onPaste}>
               <LayoutProvider layout={layout}>
                 <Toolbar
                   allowCreateFolder
                   allowUploadFile
-                  onPaste={onPaste}
-                  onDownload={onDownload}
                   onLayoutChange={onLayoutChange}
                   onRefresh={onRefresh}
                   triggerAction={triggerAction}
@@ -87,9 +79,7 @@ const FileManager = ({
                     <BreadCrumb />
                     <FileList
                       onCreateFolder={onCreateFolder}
-                      onPaste={onPaste}
                       onRename={onRename}
-                      onDownload={onDownload}
                       onFileOpen={onFileOpen}
                       enableFilePreview={enableFilePreview}
                       triggerAction={triggerAction}
@@ -102,6 +92,7 @@ const FileManager = ({
                   onFileUploading={onFileUploading}
                   onFileUploaded={onFileUploaded}
                   onDelete={onDelete}
+                  onRefresh={onRefresh}
                   maxFileSize={maxFileSize}
                   filePreviewPath={filePreviewPath}
                   acceptedFileTypes={acceptedFileTypes}
@@ -154,11 +145,3 @@ FileManager.propTypes = {
 };
 
 export default FileManager;
-
-// Only add event linstener to the FileManager and not the whole document.
-// Create a file in utils that contains all the shortcuts arrays of File Operations.
-// Create a Hook that accepts an array of keys: string as an argument and returns a callback function that triggers on there combination press.
-// The keys should be in English like ['Control', 'Shift, 'A'] for Ctrl + Shift + A etc.
-// How the provided callback will be used ?
-// For all the file managers actions like: create folder, upload file, cut, copy, paste, delete, rename, downlaod
-// there should be a generic way of triggering those actions just like the old days.
diff --git a/frontend/src/FileManager/Toolbar/Toolbar.jsx b/frontend/src/FileManager/Toolbar/Toolbar.jsx
index bc73766..14e0457 100644
--- a/frontend/src/FileManager/Toolbar/Toolbar.jsx
+++ b/frontend/src/FileManager/Toolbar/Toolbar.jsx
@@ -19,16 +19,14 @@ import "./Toolbar.scss";
 const Toolbar = ({
   allowCreateFolder = true,
   allowUploadFile = true,
-  onPaste,
-  onDownload,
   onLayoutChange,
   onRefresh,
   triggerAction,
 }) => {
   const [showToggleViewMenu, setShowToggleViewMenu] = useState(false);
   const { currentFolder } = useFileNavigation();
-  const { selectedFiles, setSelectedFiles } = useSelection();
-  const { clipBoard, setClipBoard } = useClipBoard();
+  const { selectedFiles, setSelectedFiles, handleDownload } = useSelection();
+  const { clipBoard, setClipBoard, handleCutCopy, handlePasting } = useClipBoard();
   const { activeLayout } = useLayout();
 
   // Toolbar Items
@@ -49,7 +47,7 @@ const Toolbar = ({
       icon: <FaRegPaste size={18} />,
       text: "Paste",
       permission: !!clipBoard,
-      onClick: handlePasting,
+      onClick: handleFilePasting,
     },
   ];
 
@@ -69,29 +67,12 @@ const Toolbar = ({
     },
   ];
 
-  // Handle Cut / Copy
-  const handleCutCopy = (isMoving) => {
-    setClipBoard({
-      files: selectedFiles,
-      isMoving: isMoving,
-    });
-  };
-  //
-
-  // Handle Pasting
-  // Todo: Show error if destination folder already has file(s) with the same name
-  function handlePasting() {
-    const copiedFiles = clipBoard.files;
-    const operationType = clipBoard.isMoving ? "move" : "copy";
-
-    onPaste(copiedFiles, currentFolder, operationType);
-
-    clipBoard.isMoving && setClipBoard(null);
-    setSelectedFiles([]);
+  function handleFilePasting() {
+    handlePasting(currentFolder);
   }
 
-  const handleDownload = () => {
-    onDownload(selectedFiles);
+  const handleDownloadItems = () => {
+    handleDownload();
     setSelectedFiles([]);
   };
 
@@ -112,7 +93,7 @@ const Toolbar = ({
             {clipBoard?.files?.length > 0 && (
               <button
                 className="item-action file-action"
-                onClick={handlePasting}
+                onClick={handleFilePasting}
                 // disabled={!clipBoard}
               >
                 <FaRegPaste size={18} />
@@ -129,7 +110,7 @@ const Toolbar = ({
               </button>
             )}
             {!selectedFiles.isDirectory && (
-              <button className="item-action file-action" onClick={handleDownload}>
+              <button className="item-action file-action" onClick={handleDownloadItems}>
                 <MdOutlineFileDownload size={19} />
                 <span>Download</span>
               </button>
diff --git a/frontend/src/components/Button/Button.jsx b/frontend/src/components/Button/Button.jsx
index 91bddf7..d3c6ec6 100644
--- a/frontend/src/components/Button/Button.jsx
+++ b/frontend/src/components/Button/Button.jsx
@@ -1,9 +1,10 @@
 import "./Button.scss";
 
-const Button = ({ onClick, type = "primary", padding = "0.4rem 0.8rem", children }) => {
+const Button = ({ onClick, onKeyDown, type = "primary", padding = "0.4rem 0.8rem", children }) => {
   return (
     <button
       onClick={onClick}
+      onKeyDown={onKeyDown}
       className={`fm-button fm-button-${type}`}
       style={{ padding: padding }}
     >
diff --git a/frontend/src/components/Modal/Modal.jsx b/frontend/src/components/Modal/Modal.jsx
index be75a92..1cd1a1f 100644
--- a/frontend/src/components/Modal/Modal.jsx
+++ b/frontend/src/components/Modal/Modal.jsx
@@ -13,6 +13,12 @@ const Modal = ({
 }) => {
   const modalRef = useRef(null);
 
+  const handleKeyDown = (e) => {
+    if (e.key === "Escape") {
+      setShow(false);
+    }
+  };
+
   useEffect(() => {
     if (show) {
       modalRef.current.showModal();
@@ -22,7 +28,12 @@ const Modal = ({
   }, [show]);
 
   return (
-    <dialog ref={modalRef} className={`fm-modal dialog`} style={{ width: dialogWidth }}>
+    <dialog
+      ref={modalRef}
+      className={`fm-modal dialog`}
+      style={{ width: dialogWidth }}
+      onKeyDown={handleKeyDown}
+    >
       <div className="fm-modal-header">
         <span className="fm-modal-heading">{heading}</span>
         {closeButton && (
diff --git a/frontend/src/contexts/ClipboardContext.jsx b/frontend/src/contexts/ClipboardContext.jsx
index d02ac5e..47605e3 100644
--- a/frontend/src/contexts/ClipboardContext.jsx
+++ b/frontend/src/contexts/ClipboardContext.jsx
@@ -1,12 +1,34 @@
 import { createContext, useContext, useState } from "react";
+import { useSelection } from "./SelectionContext";
 
 const ClipBoardContext = createContext();
 
-export const ClipBoardProvider = ({ children }) => {
+export const ClipBoardProvider = ({ children, onPaste }) => {
   const [clipBoard, setClipBoard] = useState(null);
+  const { selectedFiles, setSelectedFiles } = useSelection();
+
+  const handleCutCopy = (isMoving) => {
+    setClipBoard({
+      files: selectedFiles,
+      isMoving: isMoving,
+    });
+  };
+
+  // Todo: Show error if destination folder already has file(s) with the same name
+  const handlePasting = (destinationFolder) => {
+    if (destinationFolder && !destinationFolder.isDirectory) return;
+
+    const copiedFiles = clipBoard.files;
+    const operationType = clipBoard.isMoving ? "move" : "copy";
+
+    onPaste(copiedFiles, destinationFolder, operationType);
+
+    clipBoard.isMoving && setClipBoard(null);
+    setSelectedFiles([]);
+  };
 
   return (
-    <ClipBoardContext.Provider value={{ clipBoard, setClipBoard }}>
+    <ClipBoardContext.Provider value={{ clipBoard, setClipBoard, handleCutCopy, handlePasting }}>
       {children}
     </ClipBoardContext.Provider>
   );
diff --git a/frontend/src/contexts/SelectionContext.jsx b/frontend/src/contexts/SelectionContext.jsx
index c5a81d0..2b64e36 100644
--- a/frontend/src/contexts/SelectionContext.jsx
+++ b/frontend/src/contexts/SelectionContext.jsx
@@ -2,11 +2,15 @@ import { createContext, useContext, useState } from "react";
 
 const SelectionContext = createContext();
 
-export const SelectionProvider = ({ children }) => {
+export const SelectionProvider = ({ children, onDownload }) => {
   const [selectedFiles, setSelectedFiles] = useState([]);
 
+  const handleDownload = () => {
+    onDownload(selectedFiles);
+  };
+
   return (
-    <SelectionContext.Provider value={{ selectedFiles, setSelectedFiles }}>
+    <SelectionContext.Provider value={{ selectedFiles, setSelectedFiles, handleDownload }}>
       {children}
     </SelectionContext.Provider>
   );
diff --git a/frontend/src/hooks/useKeyPress.js b/frontend/src/hooks/useKeyPress.js
index 6a299ad..0f3f84f 100644
--- a/frontend/src/hooks/useKeyPress.js
+++ b/frontend/src/hooks/useKeyPress.js
@@ -1,15 +1,21 @@
-import { useEffect, useRef } from "react";
+import { useEffect, useMemo, useRef } from "react";
 
-export const useKeyPress = (keys, callback) => {
+const normalizeKey = (key) => {
+  return key.toLowerCase();
+};
+
+export const useKeyPress = (keys, callback, disable = false) => {
   const lastKeyPressed = useRef(new Set([]));
+  const keysSet = useMemo(() => {
+    return new Set(keys.map((key) => normalizeKey(key)));
+  }, [keys]);
 
   const handleKeyDown = (e) => {
     if (e.repeat) return; // To prevent this function from triggering on key hold e.g. Ctrl hold
 
-    const keysSet = new Set(keys);
-    lastKeyPressed.current.add(e.key);
+    lastKeyPressed.current.add(normalizeKey(e.key));
 
-    if (keysSet.isSubsetOf(lastKeyPressed.current)) {
+    if (keysSet.isSubsetOf(lastKeyPressed.current) && !disable) {
       e.preventDefault();
       callback(e);
       return;
@@ -17,16 +23,22 @@ export const useKeyPress = (keys, callback) => {
   };
 
   const handleKeyUp = (e) => {
-    lastKeyPressed.current.delete(e.key);
+    lastKeyPressed.current.delete(normalizeKey(e.key));
+  };
+
+  const handleBlur = () => {
+    lastKeyPressed.current.clear();
   };
 
   useEffect(() => {
     window.addEventListener("keydown", handleKeyDown);
     window.addEventListener("keyup", handleKeyUp);
+    window.addEventListener("blur", handleBlur);
 
     return () => {
       window.removeEventListener("keydown", handleKeyDown);
       window.removeEventListener("keyup", handleKeyUp);
+      window.removeEventListener("blur", handleBlur);
     };
-  }, [keys, callback]);
+  }, [keysSet, callback, disable]);
 };
diff --git a/frontend/src/hooks/useShortcutHandler.js b/frontend/src/hooks/useShortcutHandler.js
new file mode 100644
index 0000000..2dc455b
--- /dev/null
+++ b/frontend/src/hooks/useShortcutHandler.js
@@ -0,0 +1,94 @@
+import { useKeyPress } from "./useKeyPress";
+import { shortcuts } from "../utils/shortcuts";
+import { useClipBoard } from "../contexts/ClipboardContext";
+import { useFileNavigation } from "../contexts/FileNavigationContext";
+import { useSelection } from "../contexts/SelectionContext";
+import { useLayout } from "../contexts/LayoutContext";
+
+export const useShortcutHandler = (triggerAction, onRefresh) => {
+  const { setClipBoard, handleCutCopy, handlePasting } = useClipBoard();
+  const { currentFolder, currentPathFiles } = useFileNavigation();
+  const { setSelectedFiles, handleDownload } = useSelection();
+  const { setActiveLayout } = useLayout();
+
+  const triggerCreateFolder = () => {
+    triggerAction.show("createFolder");
+  };
+
+  const triggerUploadFiles = () => {
+    triggerAction.show("uploadFile");
+  };
+
+  const triggerCutItems = () => {
+    handleCutCopy(true);
+  };
+
+  const triggerCopyItems = () => {
+    handleCutCopy(false);
+  };
+
+  const triggerPasteItems = () => {
+    handlePasting(currentFolder);
+  };
+
+  const triggerRename = () => {
+    triggerAction.show("rename");
+  };
+
+  const triggerDownload = () => {
+    handleDownload();
+  };
+
+  const triggerDelete = () => {
+    triggerAction.show("delete");
+  };
+
+  const triggerSelectFirst = () => {
+    if (currentPathFiles.length > 0) {
+      setSelectedFiles([currentPathFiles[0]]);
+    }
+  };
+
+  const triggerSelectLast = () => {
+    if (currentPathFiles.length > 0) {
+      setSelectedFiles([currentPathFiles.at(-1)]);
+    }
+  };
+
+  const triggerSelectAll = () => {
+    setSelectedFiles(currentPathFiles);
+  };
+
+  const triggerClearSelection = () => {
+    setSelectedFiles((prev) => (prev.length > 0 ? [] : prev));
+  };
+
+  const triggerRefresh = () => {
+    onRefresh();
+    setClipBoard(null);
+  };
+
+  const triggerGridLayout = () => {
+    setActiveLayout("grid");
+  };
+  const triggerListLayout = () => {
+    setActiveLayout("list");
+  };
+
+  // Keypress detection will be disbaled when some Action is in active state.
+  useKeyPress(shortcuts.createFolder, triggerCreateFolder, triggerAction.isActive);
+  useKeyPress(shortcuts.uploadFiles, triggerUploadFiles, triggerAction.isActive);
+  useKeyPress(shortcuts.cut, triggerCutItems, triggerAction.isActive);
+  useKeyPress(shortcuts.copy, triggerCopyItems, triggerAction.isActive);
+  useKeyPress(shortcuts.paste, triggerPasteItems, triggerAction.isActive);
+  useKeyPress(shortcuts.rename, triggerRename, triggerAction.isActive);
+  useKeyPress(shortcuts.download, triggerDownload, triggerAction.isActive);
+  useKeyPress(shortcuts.delete, triggerDelete, triggerAction.isActive);
+  useKeyPress(shortcuts.jumpToFirst, triggerSelectFirst, triggerAction.isActive);
+  useKeyPress(shortcuts.jumpToLast, triggerSelectLast, triggerAction.isActive);
+  useKeyPress(shortcuts.selectAll, triggerSelectAll, triggerAction.isActive);
+  useKeyPress(shortcuts.clearSelection, triggerClearSelection, triggerAction.isActive);
+  useKeyPress(shortcuts.refresh, triggerRefresh, triggerAction.isActive);
+  useKeyPress(shortcuts.gridLayout, triggerGridLayout, triggerAction.isActive);
+  useKeyPress(shortcuts.listLayout, triggerListLayout, triggerAction.isActive);
+};
diff --git a/frontend/src/utils/shortcuts.js b/frontend/src/utils/shortcuts.js
index c7f7b9b..eb67ba9 100644
--- a/frontend/src/utils/shortcuts.js
+++ b/frontend/src/utils/shortcuts.js
@@ -1,5 +1,5 @@
 export const shortcuts = {
-  createFolder: ["Control", "Shift", "N"],
+  createFolder: ["Alt", "Shift", "N"],
   uploadFiles: ["Control", "U"],
   cut: ["Control", "X"],
   copy: ["Control", "C"],
@@ -8,14 +8,14 @@ export const shortcuts = {
   download: ["Control", "D"],
   delete: ["Delete"],
   selectAll: ["Control", "A"],
-  selectIndividuals: ["Control", "Click"],
-  selectRange: ["Shift", "Click"],
-  selectArrows: ["Shift", "Arrows"],
-  navigation: ["Arrows"],
+  selectIndividuals: ["Control", "Click"], // (pending)
+  selectRange: ["Shift", "Click"], // (pending)
+  selectArrows: ["Shift", "Arrows"], // (pending)
+  navigation: ["Arrows"], // (pending)
   jumpToFirst: ["Home"],
   jumpToLast: ["End"],
-  listLayout: ["Control", "Shift", "1"],
-  gridLayout: ["Control", "Shift", "2"],
+  listLayout: ["Control", "Shift", "!"], // Act as Ctrl + Shift + 1 but could cause problems for QWERTZ or DVORAK etc. keyborad layouts.
+  gridLayout: ["Control", "Shift", "@"], // Act as Ctrl + Shift + 2 but could cause problems for QWERTZ or DVORAK etc. keyborad layouts.
   refresh: ["F5"],
   clearSelection: ["Escape"],
 };

From 62bfba11cd2f639b62a17c9ac71e4109463f2284 Mon Sep 17 00:00:00 2001
From: Saifullah-dev <saifullah.contact@gmail.com>
Date: Wed, 23 Oct 2024 20:34:45 +0500
Subject: [PATCH 5/5] feat(Keyboard Shortcuts): Add keyboard shortcuts for file
 operations

---
 README.md                                     | 21 +++++++++++++++++++
 backend/Readme.md                             | 10 ++++-----
 .../app/controllers/deleteItem.controller.js  |  2 +-
 .../controllers/downloadFile.controller.js    |  3 ++-
 frontend/README.md                            | 21 +++++++++++++++++++
 5 files changed, 50 insertions(+), 7 deletions(-)

diff --git a/README.md b/README.md
index 036f739..d56ea60 100644
--- a/README.md
+++ b/README.md
@@ -17,6 +17,7 @@ An open-source React.js package for easy integration of a file manager into appl
 - **Navigation**: Use the breadcrumb trail and sidebar navigation pane for quick directory traversal.
 - **Toolbar & Context Menu**: Access all common actions (upload, download, delete, copy, move, rename, etc.) via the toolbar or right-click for the same options in the context menu.
 - **Multi-Selection**: Select multiple files and folders at once to perform bulk actions like delete, copy, move, or download.
+- **Keyboard Shortcuts**: Quickly perform file operations like copy, paste, delete, and more using intuitive keyboard shortcuts.
 
 ![React File Manager](https://github.com/user-attachments/assets/e68f750b-86bf-450d-b27e-fd3dedebf1bd)
 
@@ -110,6 +111,26 @@ type File = {
 | `onRename`          | (file: [File](#-file-structure), newName: string) => void                                                                      | A callback function triggered when a file or folder is renamed.                                                                                                                                                                                                                                                                                                                         |
 | `width`             | string \| number                                                                                                               | The width of the component `default: 100%`. Can be a string (e.g., `'100%'`, `'10rem'`) or a number (in pixels).                                                                                                                                                                                                                                                                        |
 
+## ⌨️ Keyboard Shortcuts
+
+| **Action**                     | **Shortcut**       |
+| ------------------------------ | ------------------ |
+| New Folder                     | `Alt + Shift + N`  |
+| Upload Files                   | `CTRL + U`         |
+| Cut                            | `CTRL + X`         |
+| Copy                           | `CTRL + C`         |
+| Paste                          | `CTRL + V`         |
+| Rename                         | `F2`               |
+| Download                       | `CTRL + D`         |
+| Delete                         | `DEL`              |
+| Select All Files               | `CTRL + A`         |
+| Jump to First File in the List | `Home`             |
+| Jump to Last File in the List  | `End`              |
+| Switch to List Layout          | `CTRL + Shift + 1` |
+| Switch to Grid Layout          | `CTRL + Shift + 2` |
+| Refresh File List              | `F5`               |
+| Clear Selection                | `Esc`              |
+
 ## 🤝 Contributing
 
 Contributions are welcome! To contribute:
diff --git a/backend/Readme.md b/backend/Readme.md
index ab67d7f..61da1bc 100644
--- a/backend/Readme.md
+++ b/backend/Readme.md
@@ -65,12 +65,12 @@ The backend supports the following file system operations:
 
 - **📁 Create a Folder**: `/folder`
 - **⬆️ Upload a File**: `/upload`
-- **📋 Copy a File/Folder**: `/copy`
+- **📋 Copy File(s) or Folder(s)**: `/copy`
 - **📂 Get All Files/Folders**: `/`
-- **⬇️ Download a File**: `/download/:id`
-- **📤 Move a File/Folder**: `/move`
-- **✏️ Rename a File/Folder**: `/rename`
-- **🗑️ Delete a File/Folder**: `/:id`
+- **⬇️ Download File(s) or Folder(s)**: `/download`
+- **📤 Move File(s) or Folder(s)**: `/move`
+- **✏️ Rename a File or Folder**: `/rename`
+- **🗑️ Delete File(s) or Folder(s)**: `/`
 
 Refer to the [Swagger Documentation](http://localhost:3000/api-docs/) for detailed request/response formats.
 
diff --git a/backend/app/controllers/deleteItem.controller.js b/backend/app/controllers/deleteItem.controller.js
index c18db64..2728701 100644
--- a/backend/app/controllers/deleteItem.controller.js
+++ b/backend/app/controllers/deleteItem.controller.js
@@ -14,7 +14,7 @@ const deleteRecursive = async (item) => {
 };
 
 const deleteItem = async (req, res) => {
-  // #swagger.summary = 'Deletes a file/folder(s).'
+  // #swagger.summary = 'Deletes file/folder(s).'
   /*  #swagger.parameters['body'] = {
         in: 'body',
         required: true,
diff --git a/backend/app/controllers/downloadFile.controller.js b/backend/app/controllers/downloadFile.controller.js
index cf9e78d..61bbf36 100644
--- a/backend/app/controllers/downloadFile.controller.js
+++ b/backend/app/controllers/downloadFile.controller.js
@@ -5,7 +5,8 @@ const mongoose = require("mongoose");
 const archiver = require("archiver");
 
 const downloadFile = async (req, res) => {
-  // #swagger.summary = 'Downloads a file.'
+  // Todo: Update download request query swagger docs.
+  // #swagger.summary = 'Downloads file/folder(s).'
   /*  #swagger.parameters['filePath'] = {
           in: 'query',
           type: 'string',
diff --git a/frontend/README.md b/frontend/README.md
index 036f739..d56ea60 100644
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -17,6 +17,7 @@ An open-source React.js package for easy integration of a file manager into appl
 - **Navigation**: Use the breadcrumb trail and sidebar navigation pane for quick directory traversal.
 - **Toolbar & Context Menu**: Access all common actions (upload, download, delete, copy, move, rename, etc.) via the toolbar or right-click for the same options in the context menu.
 - **Multi-Selection**: Select multiple files and folders at once to perform bulk actions like delete, copy, move, or download.
+- **Keyboard Shortcuts**: Quickly perform file operations like copy, paste, delete, and more using intuitive keyboard shortcuts.
 
 ![React File Manager](https://github.com/user-attachments/assets/e68f750b-86bf-450d-b27e-fd3dedebf1bd)
 
@@ -110,6 +111,26 @@ type File = {
 | `onRename`          | (file: [File](#-file-structure), newName: string) => void                                                                      | A callback function triggered when a file or folder is renamed.                                                                                                                                                                                                                                                                                                                         |
 | `width`             | string \| number                                                                                                               | The width of the component `default: 100%`. Can be a string (e.g., `'100%'`, `'10rem'`) or a number (in pixels).                                                                                                                                                                                                                                                                        |
 
+## ⌨️ Keyboard Shortcuts
+
+| **Action**                     | **Shortcut**       |
+| ------------------------------ | ------------------ |
+| New Folder                     | `Alt + Shift + N`  |
+| Upload Files                   | `CTRL + U`         |
+| Cut                            | `CTRL + X`         |
+| Copy                           | `CTRL + C`         |
+| Paste                          | `CTRL + V`         |
+| Rename                         | `F2`               |
+| Download                       | `CTRL + D`         |
+| Delete                         | `DEL`              |
+| Select All Files               | `CTRL + A`         |
+| Jump to First File in the List | `Home`             |
+| Jump to Last File in the List  | `End`              |
+| Switch to List Layout          | `CTRL + Shift + 1` |
+| Switch to Grid Layout          | `CTRL + Shift + 2` |
+| Refresh File List              | `F5`               |
+| Clear Selection                | `Esc`              |
+
 ## 🤝 Contributing
 
 Contributions are welcome! To contribute: