Projekt

Obecné

Profil

Stáhnout (5.24 KB) Statistiky
| Větev: | Tag: | Revize:
1 0d90d67b Vaclav Honzik
import {
2
    Button,
3
    DialogContent,
4
    DialogTitle,
5
    Link,
6
    Stack,
7
    Typography,
8
} from '@mui/material'
9
import { useFormik } from 'formik'
10
import { Fragment, useState } from 'react'
11
import * as yup from 'yup'
12
import axiosInstance from '../../api/api'
13
import ButtonOpenableDialog from '../Reusables/ButtonOpenableDialog'
14
import AttachmentIcon from '@mui/icons-material/Attachment'
15
import DeleteIcon from '@mui/icons-material/Delete'
16
import SendIcon from '@mui/icons-material/Send'
17
18
const FileUpload = () => {
19
    const [filename, setFilename] = useState<string | undefined>(undefined)
20
21
    const validationSchema = yup.object().shape({
22
        file: yup.mixed().required('File is required'),
23
    })
24
25
    const formik = useFormik({
26
        initialValues: {
27
            file: undefined,
28
        },
29
        validationSchema,
30
        onSubmit: async (values) => {
31 8c57f958 Vaclav Honzik
            
32 0d90d67b Vaclav Honzik
        },
33
    })
34
35
    // Callback when user selects the file
36
    const onFileSelected = (event: any) => {
37
        const file = event.currentTarget.files[0]
38
        if (file) {
39
            setFilename(file.name)
40
            formik.setFieldValue('file', file)
41
        }
42
    }
43
44
    const onClose = () => {
45
        setFilename(undefined)
46
        formik.resetForm()
47
    }
48
49
    const onClearSelectedFile = () => {
50
        setFilename(undefined)
51
        formik.setFieldValue('file', undefined)
52
    }
53
54
    return (
55
        <ButtonOpenableDialog
56 2d82649d Vaclav Honzik
            buttonText="File"
57 0d90d67b Vaclav Honzik
            buttonColor="primary"
58
            buttonVariant="contained"
59
            onCloseCallback={onClose}
60
            maxWidth="xs"
61
        >
62
            <DialogTitle>Upload New File</DialogTitle>
63
            <DialogContent>
64
                <form onSubmit={formik.handleSubmit}>
65
                    {!filename ? (
66
                        <Fragment>
67
                            <Stack
68
                                direction="row"
69
                                justifyContent="flex-end"
70
                                alignItems="center"
71
                            >
72
                                <Button
73
                                    variant="contained"
74
                                    color="primary"
75
                                    component="label"
76
                                    // size="small"
77
                                    startIcon={<AttachmentIcon />}
78
                                >
79
                                    Select File
80
                                    <input
81
                                        id="file"
82
                                        name="file"
83
                                        type="file"
84
                                        hidden
85
                                        onChange={onFileSelected}
86
                                    />
87
                                </Button>
88
                            </Stack>
89
                        </Fragment>
90
                    ) : (
91
                        <Fragment>
92
                            <Stack direction="row" spacing={1}>
93
                                <Typography
94
                                    sx={{
95
                                        // textOverflow: 'ellipsis',
96
                                        // overflow: 'hidden',
97
                                    }}
98
                                    variant="body1"
99
                                >
100
                                    Selected File:{' '}
101
                                </Typography>
102
                                <Typography
103
                                    sx={{
104
                                        textOverflow: 'ellipsis',
105
                                        overflow: 'hidden',
106
                                    }}
107
                                    // color="text.secondary"
108
                                    component={Link}
109
                                    // download={(formik.values?.file as File).}
110
                                    // align="right"
111
                                >
112
                                    {filename}
113
                                </Typography>
114
                            </Stack>
115
                            <Stack
116
                                direction="row"
117
                                justifyContent="flex-end"
118
                                alignItems="center"
119
                                spacing={2}
120
                                sx={{mt: 2}}
121
                            >
122
                                <Button
123
                                    // sx={{ mb: 2, mt: 1 }}
124
                                    variant="contained"
125
                                    size="small"
126
                                    endIcon={<DeleteIcon />}
127
                                    onClick={onClearSelectedFile}
128
                                >
129
                                    Remove Selection
130
                                </Button>
131
                                <Button size="small" type="submit" variant="contained" startIcon={<SendIcon />}>
132
                                Submit
133
                            </Button>
134
                            </Stack>
135
                            
136
                            
137
                        </Fragment>
138
                    )}
139
                </form>
140
            </DialogContent>
141
        </ButtonOpenableDialog>
142
    )
143
}
144
145
export default FileUpload