File uploading

frontend_reactjs/src/components/FolderViewer.tsx

@@ -1,9 +1,10 @@
 import { useDocuments, useFolders } from '../hooks/swrHooks'
 import { IDocument, IDocumentFolder } from '../interfaces/documents'
-import { Box, Breadcrumbs, Button, Card, CardActionArea, CircularProgress, LinearProgress, Link } from '@mui/material'
+import { Box, Breadcrumbs, Button, Card, CardActionArea, CircularProgress, Input, InputLabel, LinearProgress, Link } from '@mui/material'
 import { Folder, InsertDriveFile, Upload, UploadFile } from '@mui/icons-material'
-import { useState } from 'react'
+import { useRef, useState } from 'react'
 import DocumentService from '../services/DocumentService'
+import { mutate } from 'swr'
 
 interface FolderProps {
     folder: IDocumentFolder;
@@ -78,6 +79,12 @@ export default function FolderViewer() {
 
     const { documents, isLoading: documentsLoading } = useDocuments(currentFolder?.id)
 
+    const [uploadProgress, setUploadProgress] = useState(0)
+
+    const [isUploading, setIsUploading] = useState(false)
+
+    const fileInputRef = useRef<HTMLInputElement>(null)
+
     const handleFolderClick = (folder: IDocumentFolder) => {
         setCurrentFolder(folder)
         setBreadcrumbs((prev) => [...prev, folder])
@@ -104,10 +111,31 @@ export default function FolderViewer() {
         setCurrentFolder(newBreadcrumbs[newBreadcrumbs.length - 1])
     }
 
-    // const handleFileUpload = (event) => {
-    //     const file = event.target.files[0]
-        
-    // }
+    const handleFileUpload = async (event: any) => {
+        setIsUploading(true)
+        const file = event.target.files?.[0]
+
+        if (file && currentFolder && currentFolder.id) {
+            const formData = new FormData()
+            formData.append('files', file)
+
+            try {
+                const response = await DocumentService.uploadFiles(currentFolder.id, formData, setUploadProgress);
+                setIsUploading(false);
+                mutate(`/info/documents/${currentFolder.id}`);
+            } catch (error) {
+                console.error(error);
+                setIsUploading(false);
+            }
+        }
+    }
+
+    const handleUploadClick = () => {
+        if (fileInputRef.current) {
+            fileInputRef.current.click();
+        }
+    }
+
 
     if (foldersLoading || documentsLoading) {
         return (
@@ -149,16 +177,24 @@ export default function FolderViewer() {
             <Box>
                 {currentFolder &&
                     <Button
+                        LinkComponent="label"
+                        role={undefined}
                         variant="outlined"
-                        startIcon={<UploadFile />}
-                        onClick={() => {
-                            console.log(currentFolder.id)
-                        }}
+                        tabIndex={-1}
+                        startIcon={
+                            isUploading ? <CircularProgress sx={{ maxHeight: "20px", maxWidth: "20px" }} variant="determinate" value={uploadProgress} /> : <UploadFile />
+                        }
+                        onClick={handleUploadClick}
                     >
+                        <input
+                            type='file'
+                            ref={fileInputRef}
+                            style={{ display: 'none' }}
+                            onChange={handleFileUpload}
+                        />
                         Загрузить
                     </Button>
                 }
-
             </Box>
 
             <Box