popovspiridon99/tests
1
0
Fork 0
forked from VinokurovVE/tests
Code Issues Pull Requests Projects Releases Wiki Activity

Multiple files upload

Browse Source
This commit is contained in:
cracklesparkle
2024-07-05 17:35:13 +09:00
parent 3727fcabb3
commit d298de0a72
1 changed files with 61 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

130
frontend_reactjs/src/components/FolderViewer.tsx
View File

@ -90,31 +90,9 @@ export default function FolderViewer() {
setCurrentFolder(newBreadcrumbs[newBreadcrumbs.length - 1]) 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 = () => { const handleUploadClick = () => {
if (fileInputRef.current) { if (fileInputRef.current) {
fileInputRef.current.click(); fileInputRef.current.click()
} }
} }
@ -125,7 +103,6 @@ export default function FolderViewer() {
const handleDragLeave = (e: React.DragEvent) => { const handleDragLeave = (e: React.DragEvent) => {
setDragOver(false) setDragOver(false)
console.log("drag leave")
} }
const handleDrop = (e: React.DragEvent) => { const handleDrop = (e: React.DragEvent) => {
@ -169,7 +146,7 @@ export default function FolderViewer() {
<Box sx={{ <Box sx={{
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
gap: '24px' gap: '16px'
}}> }}>
<FileViewer <FileViewer
open={fileViewerModal} open={fileViewerModal}
@ -207,50 +184,66 @@ export default function FolderViewer() {
{currentFolder && {currentFolder &&
<Box sx={{ display: 'flex', flexDirection: 'column', gap: '16px' }}> <Box sx={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
<Box> <Box sx={{
<Button display: 'flex',
LinkComponent="label" flexDirection: 'column',
role={undefined} gap: '16px',
variant="outlined" border: filesToUpload.length > 0 ? '1px dashed gray' : 'none',
tabIndex={-1} borderRadius: '8px',
startIcon={ p: '16px'
isUploading ? <CircularProgress sx={{ maxHeight: "20px", maxWidth: "20px" }} variant="determinate" value={uploadProgress} /> : <UploadFile /> }}>
<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 &&
<>
<Button
variant="contained"
color="primary"
startIcon={<Upload />}
onClick={uploadFiles}
>
Загрузить все
</Button>
<Button
variant='outlined'
startIcon={<Cancel />}
onClick={() => {
setFilesToUpload([])
}}
>
Отмена
</Button>
</>
} }
onClick={handleUploadClick} </Box>
>
<input
type='file'
ref={fileInputRef}
style={{ display: 'none' }}
onChange={handleFileUpload}
/>
Загрузить
</Button>
</Box>
{filesToUpload.length > 0 && <Divider />
<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>
<Button
variant='outlined'
startIcon={<Cancel />}
onClick={() => setFilesToUpload([])}
>
Отмена
</Button>
</Box>
<Divider />
{filesToUpload.length > 0 &&
<Box> <Box>
{filesToUpload.map((file, index) => ( {filesToUpload.map((file, index) => (
<Box key={index} sx={{ display: 'flex', alignItems: 'center', gap: '8px', marginTop: '8px' }}> <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> }
} </Box>
</Box> </Box>
} }