Multiple files upload

frontend_reactjs/src/components/FolderViewer.tsx

@@ -90,31 +90,9 @@ export default function FolderViewer() {
         setCurrentFolder(newBreadcrumbs[newBreadcrumbs.length - 1])
     }
 
-    const handleFileUpload = async (event: any) => {
-        setIsUploading(true)
-        const files = event.target.files
-        if (files && currentFolder && currentFolder.id) {
-            const formData = new FormData()
-
-            for (let file of files) {
-                formData.append('files', file)
-            }
-
-            try {
-                // const response = await DocumentService.uploadFiles(currentFolder.id, formData, setUploadProgress);
-                setIsUploading(false);
-                setFilesToUpload([])
-                mutate(`/info/documents/${currentFolder.id}`);
-            } catch (error) {
-                console.error(error);
-                setIsUploading(false);
-            }
-        }
-    }
-
     const handleUploadClick = () => {
         if (fileInputRef.current) {
-            fileInputRef.current.click();
+            fileInputRef.current.click()
         }
     }
 
@@ -125,7 +103,6 @@ export default function FolderViewer() {
 
     const handleDragLeave = (e: React.DragEvent) => {
         setDragOver(false)
-        console.log("drag leave")
     }
 
     const handleDrop = (e: React.DragEvent) => {
@@ -169,7 +146,7 @@ export default function FolderViewer() {
         <Box sx={{
             display: 'flex',
             flexDirection: 'column',
-            gap: '24px'
+            gap: '16px'
         }}>
             <FileViewer
                 open={fileViewerModal}
@@ -207,50 +184,66 @@ export default function FolderViewer() {
 
             {currentFolder &&
                 <Box sx={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
-                    <Box>
-                        <Button
-                            LinkComponent="label"
-                            role={undefined}
-                            variant="outlined"
-                            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 sx={{
+                        display: 'flex',
+                        flexDirection: 'column',
+                        gap: '16px',
+                        border: filesToUpload.length > 0 ? '1px dashed gray' : 'none',
+                        borderRadius: '8px',
+                        p: '16px'
+                    }}>
+                        <Box sx={{ display: 'flex', gap: '16px' }}>
+                            <Button
+                                LinkComponent="label"
+                                role={undefined}
+                                variant="outlined"
+                                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={handleFileInput}
+                                    onClick={(e) => {
+                                        if (e.currentTarget) {
+                                            e.currentTarget.value = ''
+                                        }
+                                    }}
+                                />
+                                Добавить
+                            </Button>
 
-                    {filesToUpload.length > 0 &&
-                        <Box sx={{ display: 'flex', flexDirection: 'column', gap: '16px', border: '1px dashed gray', borderRadius: '8px', p: '16px' }}>
-                            <Box sx={{ display: 'flex', gap: '16px' }}>
-                                <Button
-                                    variant="contained"
-                                    color="primary"
-                                    startIcon={<Upload />}
-                                    onClick={uploadFiles}
-                                >
-                                    Загрузить все
-                                </Button>
+                            {filesToUpload.length > 0 &&
+                                <>
+                                    <Button
+                                        variant="contained"
+                                        color="primary"
+                                        startIcon={<Upload />}
+                                        onClick={uploadFiles}
+                                    >
+                                        Загрузить все
+                                    </Button>
 
-                                <Button
-                                    variant='outlined'
-                                    startIcon={<Cancel />}
-                                    onClick={() => setFilesToUpload([])}
-                                >
-                                    Отмена
-                                </Button>
-                            </Box>
+                                    <Button
+                                        variant='outlined'
+                                        startIcon={<Cancel />}
+                                        onClick={() => {
+                                            setFilesToUpload([])
+                                        }}
+                                    >
+                                        Отмена
+                                    </Button>
+                                </>
+                            }
+                        </Box>
 
-                            <Divider />
+                        <Divider />
 
+                        {filesToUpload.length > 0 &&
                             <Box>
                                 {filesToUpload.map((file, index) => (
                                     <Box key={index} sx={{ display: 'flex', alignItems: 'center', gap: '8px', marginTop: '8px' }}>
@@ -269,9 +262,8 @@ export default function FolderViewer() {
                                     </Box>
                                 ))}
                             </Box>
-                        </Box>
-                    }
-
+                        }
+                    </Box>
                 </Box>
             }