feat: file upload component added

yatharthagoenka · May 3, 2023 · 1a06b97 · 1a06b97
1 parent 6b941ae
commit 1a06b97
Show file tree

Hide file tree

Showing 6 changed files with 70 additions and 40 deletions.
diff --git a/server/.dockerignore b/server/.dockerignore
@@ -0,0 +1,3 @@
+node_modules
+dist
+logs
diff --git a/server/Dockerfile b/server/Dockerfile
@@ -1,5 +1,12 @@
 FROM node:18
 
+COPY requirements.txt .
+
+USER root
+RUN apt-get update && \
+    apt-get install -y python3-dev python3-pip && \
+    pip3 install --user --no-cache-dir -r requirements.txt
+
 WORKDIR /app
 
 ADD package.json /app/package.json
@@ -14,4 +21,3 @@ EXPOSE 3001
 EXPOSE 3002
 
 CMD ["npm", "run", "start"]
-
diff --git a/server/requirements.txt b/server/requirements.txt
@@ -0,0 +1 @@
+cryptography==3.4.7
diff --git a/server/src/files/files.controller.ts b/server/src/files/files.controller.ts
@@ -24,8 +24,8 @@ export class FilesController {
     @UseGuards(AuthGuard("jwt"))
     @UseInterceptors(FileInterceptor('file'))
     async uploadFile(@Res() res, @UploadedFile() file: Express.Multer.File, @Query('userID', new ValidateObjectId()) userID) {
-      const filepath = await this.filesService.createFile(userID, file);
-      return res.status(HttpStatus.OK).json({res: filepath});
+      const savedFile = await this.filesService.createFile(userID, file);
+      return res.status(HttpStatus.OK).json(savedFile);
     }
 
     @Get('/download')

diff --git a/server/src/files/files.service.ts b/server/src/files/files.service.ts
@@ -81,7 +81,7 @@ export class FilesService {
         return await this.userService.getUserFiles(userId.toString());
     }
 
-    async createFile(userID: ObjectId, file: Express.Multer.File) : Promise<string> {
+    async createFile(userID: ObjectId, file: Express.Multer.File) : Promise<IUserFileRecord> {
         const user = await this.userService.findById(userID.toString());
         let savedFile;
         let resultCreateFile;
@@ -132,7 +132,7 @@ export class FilesService {
             const createdFile = new this.fileModel(createFileDTO);
             resultCreateFile = await createdFile.save();
             // save to usersModel
-            const userFileRecord : IUserFileRecord = {
+            var userFileRecord : IUserFileRecord = {
                 originalname: savedFile.originalname,
                 fileID: resultCreateFile._id,
                 role: [IRole.OWNER, IRole.EDITOR, IRole.VIEWER]
@@ -145,7 +145,7 @@ export class FilesService {
             this.loggerService.error(`Unable to add file : ${savedFile.uuid} to db. Deleted from server. `);
             return error;
         }
-        return resultCreateFile;
+        return userFileRecord;
     }
 
     async downloadFile(fileID: ObjectId): Promise<string> {

diff --git a/webv2/src/views/dashboard/Files.js b/webv2/src/views/dashboard/Files.js
@@ -3,43 +3,14 @@ import PageContainer from 'src/components/container/PageContainer';
 import DashboardCard from '../../components/shared/DashboardCard';
 import AppService from '../../services/app.service'
 import AuthService from '../../services/auth.service'
-import {Typography,Table,TableBody,TableCell,TableHead,TableRow,Chip,Button} from '@mui/material';
-
-// const files = [
-//     {
-//         id: "1",
-//         name: "Sample file 1",
-//         uuid: "efalnjkfn3423nlkdvkldsv909",
-//         role: "OWNER",
-//         pbg: "error.main",
-//     },
-//     {
-//         id: "2",
-//         name: "Sample file 2",
-//         uuid: "efauiumfehd423nlkdvklds64",
-//         role: "EDITOR",
-//         pbg: "info.main",
-//     },
-//     {
-//         id: "3",
-//         name: "Sample file 3",
-//         uuid: "bfabyhmyumu3nlkdvkldsv909",
-//         role: "EDITOR",
-//         pbg: "info.main",
-//     },
-//     {
-//         id: "4",
-//         name: "Sample file 4",
-//         uuid: "tgretjkf4ewtertkdvkldsv23",
-//         role: "VIEWER",
-//         pbg: "success.main",
-//     },
-// ];
+import {Typography,Table,TableBody,TableCell,TableHead,TableRow,Chip,Button, Grid} from '@mui/material';
+import CloudUploadIcon from '@mui/icons-material/CloudUpload';
 
 const Files = () => {
     const [files , setFiles] = useState([])
     const [user , setUser] = useState()
-    let currentUser = '';
+    const [selectedFile, setSelectedFile] = useState(null);
+    let currentUser;
 
     useEffect(() => {
         currentUser = AuthService.getCurrentUser();
@@ -72,11 +43,60 @@ const Files = () => {
         );
     }
 
+    const handleFileSelect = (e) => {
+        setSelectedFile(e.target.files[0]);
+    };
+
+    const handleUpload = (e) => {
+        console.log(user._id)
+        const data = new FormData()
+        data.append('file', selectedFile)
+        AppService.uploadFile(data, user._id, JSON.parse(localStorage.getItem("user")).token).then(
+            response => {
+                const updatedFiles = [...files, response.data];
+                setFiles(updatedFiles);
+                setSelectedFile(null);
+            },
+            error => {
+                console.log(error)
+            }
+        );
+    };
+
     return (
         <PageContainer title="Files" description="Access user uploaded files">
 
         <DashboardCard title="My Files">
-            <Typography>All of the uploaded files appear here</Typography>
+            <Grid container justifyContent="space-between">
+                <Grid>
+                    <Typography>All of the uploaded files appear here</Typography>
+                </Grid>
+                <Grid>
+                    <input
+                        id="select-file"
+                        type="file"
+                        onChange={handleFileSelect}
+                        style={{ display: 'none' }}
+                    />
+                    <label htmlFor="select-file">
+                    <Button
+                        variant="text"
+                        component="span"
+                    >
+                        {selectedFile ? selectedFile.name : 'Select File'}
+                    </Button>
+                    </label>
+                    <Button
+                        variant="contained"
+                        component="span"
+                        startIcon={<CloudUploadIcon />}
+                        disabled={!Boolean(selectedFile)}
+                        onClick={handleUpload}
+                    >
+                        Upload
+                    </Button>
+                </Grid>
+            </Grid>
             <Table
             aria-label="simple table"
             sx={{