fix upload file remove issue and improve duplicate file name validation

Author: Saifullah-dev

frontend/src/App.jsx

@@ -5,8 +5,8 @@ import { renameAPI } from "./api/renameAPI";
 import { deleteAPI } from "./api/deleteAPI";
 import { copyItemAPI, moveItemAPI } from "./api/fileTransferAPI";
 import { getAllFilesAPI } from "./api/getAllFilesAPI";
-import "./App.scss";
 import { downloadFile } from "./api/downloadFileAPI";
+import "./App.scss";
 
 function App() {
   const fileUploadConfig = {
@@ -107,8 +107,8 @@ function App() {
     console.log(`Opening file: ${file.name}`);
   };
 
-  const handleError = (error) => {
-    console.error(error.message);
+  const handleError = (error, file) => {
+    console.error(error);
   };
 
   const handleDownload = async (file) => {

frontend/src/FileManager/Actions/UploadFile/UploadFile.action.jsx

@@ -6,6 +6,7 @@ import ReactLoading from "react-loading";
 import { useFileNavigation } from "../../../contexts/FileNavigationContext";
 import { getFileExtension } from "../../../utils/getFileExtension";
 import { getDataSize } from "../../../utils/getDataSize";
+import { useFiles } from "../../../contexts/FilesContext";
 import "./UploadFile.action.scss";
 
 const UploadFileAction = ({
@@ -19,13 +20,14 @@ const UploadFileAction = ({
   const [isDragging, setIsDragging] = useState(false);
   const [isUploading, setIsUploading] = useState({});
   const { currentFolder, currentPathFiles } = useFileNavigation();
+  const { onError } = useFiles();
 
   const checkFileError = (file) => {
     const extError = !acceptedFileTypes.includes(getFileExtension(file.name));
     if (extError) return "File type is not allowed.";
 
     const fileExists = currentPathFiles.some(
-      (item) => item.name === file.name && !item.isDirectory
+      (item) => item.name.toLowerCase() === file.name.toLowerCase() && !item.isDirectory
     );
     if (fileExists) return "File already exists.";
 
@@ -35,13 +37,15 @@ const UploadFileAction = ({
 
   const setSelectedFiles = (selectedFiles) => {
     selectedFiles = selectedFiles.filter(
-      (item) => !files.some((fileData) => fileData.file.name === item.name)
+      (item) =>
+        !files.some((fileData) => fileData.file.name.toLowerCase() === item.name.toLowerCase())
     );
 
     if (selectedFiles.length > 0) {
       const newFiles = selectedFiles.map((file) => {
         const appendData = onFileUploading(file, currentFolder);
         const error = checkFileError(file);
+        error && onError({ type: "upload", message: error }, file);
         return {
           file: file,
           appendData: appendData,
@@ -65,12 +69,18 @@ const UploadFileAction = ({
     setSelectedFiles(choosenFiles);
   };
 
-  // Issue: If a file is removed from the array and there are more files after it,
-  // e.g. files = [file1, file2, file3] & file2 was removed because it was unsupported,
-  // and file3 was successfully uploaded.
-  // Removing file2 resests the states incl. upload progress as it is now shifted to index 1.
   const handleFileRemove = (index) => {
-    setFiles((prev) => prev.filter((_, i) => i !== index));
+    setFiles((prev) =>
+      prev.map((file, i) => {
+        if (index === i) {
+          return {
+            ...file,
+            removed: true,
+          };
+        }
+        return file;
+      })
+    );
   };
 
   return (
@@ -120,6 +130,7 @@ const UploadFileAction = ({
                 index={index}
                 key={index}
                 fileData={fileData}
+                setFiles={setFiles}
                 fileUploadConfig={fileUploadConfig}
                 setIsUploading={setIsUploading}
                 onFileUploaded={onFileUploaded}

frontend/src/FileManager/Actions/UploadFile/UploadItem.jsx

@@ -7,10 +7,12 @@ import { useEffect, useRef, useState } from "react";
 import { getDataSize } from "../../../utils/getDataSize";
 import { FaRegCheckCircle } from "react-icons/fa";
 import { IoMdRefresh } from "react-icons/io";
+import { useFiles } from "../../../contexts/FilesContext";
 
 const UploadItem = ({
   index,
   fileData,
+  setFiles,
   setIsUploading,
   fileUploadConfig,
   onFileUploaded,
@@ -19,8 +21,39 @@ const UploadItem = ({
   const [uploadProgress, setUploadProgress] = useState(0);
   const [isUploaded, setIsUploaded] = useState(false);
   const [isCanceled, setIsCanceled] = useState(false);
+  const [uploadFailed, setUploadFailed] = useState(false);
   const fileIcons = useFileIcons(33);
   const xhrRef = useRef();
+  const { onError } = useFiles();
+
+  const handleUploadError = (xhr) => {
+    setUploadProgress(0);
+    const error = {
+      type: "upload",
+      message: "Upload failed.",
+      response: {
+        status: xhr.status,
+        statusText: xhr.statusText,
+        data: xhr.response,
+      },
+    };
+
+    setFiles((prev) =>
+      prev.map((file, i) => {
+        if (index === i) {
+          return {
+            ...file,
+            error: error.message,
+          };
+        }
+        return file;
+      })
+    );
+
+    setUploadFailed(true);
+
+    onError(error, fileData.file);
+  };
 
   const fileUpload = (fileData) => {
     if (!!fileData.error) return;
@@ -51,10 +84,14 @@ const UploadItem = ({
           resolve(xhr.response);
         } else {
           reject(xhr.statusText);
+          handleUploadError(xhr);
         }
       };
 
-      xhr.onerror = () => reject(xhr.statusText);
+      xhr.onerror = () => {
+        reject(xhr.statusText);
+        handleUploadError(xhr);
+      };
 
       xhr.open("POST", fileUploadConfig?.url, true);
       const headers = fileUploadConfig?.headers;
@@ -94,11 +131,29 @@ const UploadItem = ({
 
   const handleRetry = () => {
     if (fileData?.file) {
-      fileUpload(fileData);
+      setFiles((prev) =>
+        prev.map((file, i) => {
+          if (index === i) {
+            return {
+              ...file,
+              error: false,
+            };
+          }
+          return file;
+        })
+      );
+      fileUpload({ ...fileData, error: false });
       setIsCanceled(false);
+      setUploadFailed(false);
     }
   };
 
+  // File was removed by the user beacuse it was unsupported or exceeds file size limit.
+  if (!!fileData.removed) {
+    return null;
+  }
+  //
+
   return (
     <li>
       <div className="file-icon">
@@ -114,7 +169,7 @@ const UploadItem = ({
           </div>
           {isUploaded ? (
             <FaRegCheckCircle color="#5c5bb1" title="Uploaded" />
-          ) : isCanceled ? (
+          ) : isCanceled || uploadFailed ? (
             <IoMdRefresh className="retry-upload" title="Retry" onClick={handleRetry} />
           ) : (
             <div

frontend/src/FileManager/FileManager.jsx

@@ -43,7 +43,7 @@ const FileManager = ({
   return (
     <main className="file-explorer" onContextMenu={(e) => e.preventDefault()}>
       <Loader isLoading={isLoading} />
-      <FilesProvider filesData={files}>
+      <FilesProvider filesData={files} onError={onError}>
         <FileNavigationProvider>
           <SelectionProvider>
             <ClipBoardProvider>

frontend/src/contexts/FilesContext.jsx

@@ -2,7 +2,7 @@ import { createContext, useContext, useEffect, useState } from "react";
 
 const FilesContext = createContext();
 
-export const FilesProvider = ({ children, filesData }) => {
+export const FilesProvider = ({ children, filesData, onError }) => {
   const [files, setFiles] = useState([]);
 
   useEffect(() => {
@@ -16,7 +16,7 @@ export const FilesProvider = ({ children, filesData }) => {
   };
 
   return (
-    <FilesContext.Provider value={{ files, setFiles, getChildren }}>
+    <FilesContext.Provider value={{ files, setFiles, getChildren, onError }}>
       {children}
     </FilesContext.Provider>
   );