feat: modify fileProcessors file to be able extract docx, excel,nifti, and snirf files

Author: elainefan331

package.json

@@ -32,10 +32,12 @@
     "buffer": "6.0.3",
     "dayjs": "^1.11.10",
     "jquery": "^3.7.1",
+    "jsfive": "^0.4.0",
     "json-stringify-safe": "^5.0.1",
     "jszip": "^3.10.1",
     "jwt-decode": "^3.1.2",
     "lzma": "^2.3.2",
+    "mammoth": "^1.11.0",
     "numjs": "^0.16.1",
     "pako": "1.0.11",
     "path-browserify": "^1.0.1",
@@ -54,7 +56,8 @@
     "three": "0.145.0",
     "typescript": "^5.1.6",
     "uplot": "1.6.17",
-    "web-vitals": "^2.1.0"
+    "web-vitals": "^2.1.0",
+    "xlsx": "^0.18.5"
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",

src/components/User/Dashboard/DatasetOrganizer/DropZone.tsx

@@ -1,7 +1,7 @@
 // src/components/DatasetOrganizer/DropZone.tsx
 import { processFile, processFolder, processZip } from "./utils/fileProcessors";
 import { CloudUpload, Add } from "@mui/icons-material";
-import { Box, Typography, Paper, Button } from "@mui/material";
+import { Box, Typography, Paper, Button, TextField } from "@mui/material";
 import { Colors } from "design/theme";
 import React, { useState, useRef } from "react";
 import { FileItem } from "redux/projects/types/projects.interface";
@@ -25,6 +25,7 @@ const DropZone: React.FC<DropZoneProps> = ({
 }) => {
   const [isDragging, setIsDragging] = useState(false);
   const fileInputRef = useRef<HTMLInputElement>(null);
+  const [basePath, setBasePath] = useState<string>("");
 
   const handleDragOver = (e: React.DragEvent) => {
     e.preventDefault();
@@ -68,7 +69,7 @@ const DropZone: React.FC<DropZoneProps> = ({
         const zipFiles = await processZip(file);
         setFiles((prev) => [...prev, ...zipFiles]);
       } else {
-        const fileItem = await processFile(file);
+        const fileItem = await processFile(file, basePath);
         setFiles((prev) => [...prev, fileItem]);
       }
     }
@@ -82,10 +83,13 @@ const DropZone: React.FC<DropZoneProps> = ({
         const zipFiles = await processZip(file);
         setFiles((prev) => [...prev, ...zipFiles]);
       } else {
-        const fileItem = await processFile(file);
+        const fileItem = await processFile(file, basePath);
         setFiles((prev) => [...prev, fileItem]);
       }
     }
+
+    // Reset input
+    e.target.value = "";
   };
 
   return (
@@ -139,6 +143,7 @@ const DropZone: React.FC<DropZoneProps> = ({
         <Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
           Supports NIfTI, SNIRF, HDF5, NeuroJSON, folders, and ZIP archives
         </Typography>
+
         {files.length === 0 && (
           <>
             <Typography
@@ -168,6 +173,16 @@ const DropZone: React.FC<DropZoneProps> = ({
           accept=".nii,.nii.gz,.snirf,.h5,.hdf5,.jnii,.jmsh,.json,.txt,.md,.zip,.docx,.pdf,.xlsx,.xls"
         />
       </Paper>
+      <TextField
+        label="Base Directory Path (optional)"
+        placeholder="example: /Users/username/Desktop/Downloads"
+        value={basePath}
+        onChange={(e) => setBasePath(e.target.value)}
+        fullWidth
+        size="small"
+        sx={{ mb: 2 }}
+        helperText="Enter the folder path where these files are located"
+      />
     </Box>
   );
 };

src/components/User/Dashboard/DatasetOrganizer/index.tsx

@@ -180,7 +180,12 @@ const DatasetOrganizer: React.FC = () => {
 
   if (!currentProject) {
     return (
-      <Box p={4}>
+      <Box
+        sx={{
+          p: 4,
+          background: "linear-gradient(180deg,#f6f7fb 0%, #aeb6e8 100%)",
+        }}
+      >
         <Alert severity="error">Project not found</Alert>
         <Button onClick={() => navigate("/dashboard")} sx={{ mt: 2 }}>
           Back to Dashboard
@@ -195,7 +200,7 @@ const DatasetOrganizer: React.FC = () => {
         display: "flex",
         flexDirection: "column",
         height: "100vh",
-        background: Colors.white,
+        background: "linear-gradient(180deg,#f6f7fb 0%, #aeb6e8 100%)",
       }}
     >
       {/* Header */}