Projekt

Obecné

Profil

Stáhnout (5.71 KB) Statistiky
| Větev: | Tag: | Revize:
1
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 [submitButtonEnabled, setSubmitButtonEnabled] = useState(true)
26

    
27
    const formik = useFormik({
28
        initialValues: {
29
            file: undefined,
30
        },
31
        validationSchema,
32
        onSubmit: async (values) => {
33
            // TODO actually send the file somewhere
34
            // TODO implement me
35

    
36
            const formData = new FormData()
37
            // @ts-ignore for now
38
            formData.append('file', values.file as File)
39

    
40
            const { data } = await axiosInstance.post('/path', formData, {
41
                headers: {
42
                    'Content-Type': 'multipart/form-data',
43
                },
44
            })
45
        },
46
    })
47

    
48
    // Callback when user selects the file
49
    const onFileSelected = (event: any) => {
50
        const file = event.currentTarget.files[0]
51
        if (file) {
52
            setFilename(file.name)
53
            formik.setFieldValue('file', file)
54
        }
55
    }
56

    
57
    const onClose = () => {
58
        setFilename(undefined)
59
        formik.resetForm()
60
    }
61

    
62
    const onClearSelectedFile = () => {
63
        setFilename(undefined)
64
        formik.setFieldValue('file', undefined)
65
    }
66

    
67
    return (
68
        <ButtonOpenableDialog
69
            buttonText="File"
70
            buttonColor="primary"
71
            buttonVariant="contained"
72
            onCloseCallback={onClose}
73
            maxWidth="xs"
74
        >
75
            <DialogTitle>Upload New File</DialogTitle>
76
            <DialogContent>
77
                <form onSubmit={formik.handleSubmit}>
78
                    {!filename ? (
79
                        <Fragment>
80
                            <Stack
81
                                direction="row"
82
                                justifyContent="flex-end"
83
                                alignItems="center"
84
                            >
85
                                <Button
86
                                    variant="contained"
87
                                    color="primary"
88
                                    component="label"
89
                                    // size="small"
90
                                    startIcon={<AttachmentIcon />}
91
                                >
92
                                    Select File
93
                                    <input
94
                                        id="file"
95
                                        name="file"
96
                                        type="file"
97
                                        hidden
98
                                        onChange={onFileSelected}
99
                                    />
100
                                </Button>
101
                            </Stack>
102
                        </Fragment>
103
                    ) : (
104
                        <Fragment>
105
                            <Stack direction="row" spacing={1}>
106
                                <Typography
107
                                    sx={{
108
                                        // textOverflow: 'ellipsis',
109
                                        // overflow: 'hidden',
110
                                    }}
111
                                    variant="body1"
112
                                >
113
                                    Selected File:{' '}
114
                                </Typography>
115
                                <Typography
116
                                    sx={{
117
                                        textOverflow: 'ellipsis',
118
                                        overflow: 'hidden',
119
                                    }}
120
                                    // color="text.secondary"
121
                                    component={Link}
122
                                    // download={(formik.values?.file as File).}
123
                                    // align="right"
124
                                >
125
                                    {filename}
126
                                </Typography>
127
                            </Stack>
128
                            <Stack
129
                                direction="row"
130
                                justifyContent="flex-end"
131
                                alignItems="center"
132
                                spacing={2}
133
                                sx={{mt: 2}}
134
                            >
135
                                <Button
136
                                    // sx={{ mb: 2, mt: 1 }}
137
                                    variant="contained"
138
                                    size="small"
139
                                    endIcon={<DeleteIcon />}
140
                                    onClick={onClearSelectedFile}
141
                                >
142
                                    Remove Selection
143
                                </Button>
144
                                <Button size="small" type="submit" variant="contained" startIcon={<SendIcon />}>
145
                                Submit
146
                            </Button>
147
                            </Stack>
148
                            
149
                            
150
                        </Fragment>
151
                    )}
152
                </form>
153
            </DialogContent>
154
        </ButtonOpenableDialog>
155
    )
156
}
157

    
158
export default FileUpload
(1-1/4)