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 formik = useFormik({
|
26
|
initialValues: {
|
27
|
file: undefined,
|
28
|
},
|
29
|
validationSchema,
|
30
|
onSubmit: async (values) => {
|
31
|
|
32
|
},
|
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
|
buttonText="File"
|
57
|
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
|