100 lines
3.3 KiB
TypeScript
100 lines
3.3 KiB
TypeScript
import { useState } from 'react'
|
|
import FileUpload from 'react-material-file-upload'
|
|
import {Box, Button, IconButton, Paper} from '@mui/material'
|
|
import { useNavigate } from '@tanstack/react-router'
|
|
import SettingsIcon from '@mui/icons-material/Settings';
|
|
|
|
export default function UploadPage() {
|
|
const [files, setFiles] = useState<File[]>([])
|
|
const fileTypes = ["pdf"];
|
|
const navigate = useNavigate()
|
|
|
|
return (
|
|
<Box
|
|
display="flex"
|
|
flexDirection="column"
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
height="100vh"
|
|
bgcolor="white"
|
|
>
|
|
<Box
|
|
width="100%"
|
|
maxWidth="1300px"
|
|
display="flex"
|
|
justifyContent="flex-end"
|
|
px={2}
|
|
>
|
|
<IconButton onClick={() => navigate({ to: '/config' })}>
|
|
<SettingsIcon fontSize="large"/>
|
|
</IconButton>
|
|
</Box>
|
|
<Paper
|
|
elevation={3}
|
|
sx={{
|
|
width: 900,
|
|
height: 500,
|
|
backgroundColor: '#eeeeee',
|
|
borderRadius: 4,
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
}}
|
|
>
|
|
<Box sx={{
|
|
height: '100%',
|
|
width: '100%',
|
|
maxWidth: '100%',
|
|
margin: '0px',
|
|
padding: '0px',
|
|
'& .MuiBox-root': {
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
border: 'none',
|
|
textAlign: 'center',
|
|
},
|
|
}}>
|
|
<FileUpload
|
|
value={files}
|
|
onChange={setFiles}
|
|
accept={`.${fileTypes.join(', .')}`}
|
|
title="Hier Dokument hinziehen"
|
|
buttonText="Datei auswählen"
|
|
sx={{
|
|
height: '100%',
|
|
width: '100%',
|
|
padding: '0px',
|
|
'& svg': {
|
|
color: '#9e9e9e',
|
|
},
|
|
'& .MuiOutlinedInput-notchedOutline': {
|
|
border: 'none',
|
|
},
|
|
'& .MuiButton-root': {
|
|
backgroundColor: '#9e9e9e',
|
|
},
|
|
'& .MuiTypography-root': {
|
|
fontSize: '1.25rem',
|
|
fontWeight: 500,
|
|
marginBottom: 1,
|
|
},
|
|
}}
|
|
/>
|
|
</Box>
|
|
</Paper>
|
|
<Button
|
|
variant="contained"
|
|
sx={{
|
|
mt: 4,
|
|
backgroundColor: '#383838',
|
|
}}
|
|
disabled={files.length === 0}
|
|
onClick={() => navigate({ to: '/extractedResult' })}
|
|
>
|
|
Kennzahlen extrahieren
|
|
</Button>
|
|
</Box>
|
|
)
|
|
} |