aswi2022code-of-duty-gitlab/frontend/src/features/TrackingTool/FileUpload.tsx @ 91fd3fa6

import {
    Button,
    DialogContent,
    DialogTitle,
    Link,
    Stack,
    Typography,
} from '@mui/material'
import { useFormik } from 'formik'
import { Fragment, useState } from 'react'
import * as yup from 'yup'
import axiosInstance from '../../api/api'
import ButtonOpenableDialog from '../Reusables/ButtonOpenableDialog'
import AttachmentIcon from '@mui/icons-material/Attachment'
import DeleteIcon from '@mui/icons-material/Delete'
import SendIcon from '@mui/icons-material/Send'

const FileUpload = () => {
    const [filename, setFilename] = useState<string | undefined>(undefined)

    const validationSchema = yup.object().shape({
        file: yup.mixed().required('File is required'),
    })

    const [submitButtonEnabled, setSubmitButtonEnabled] = useState(true)

    const formik = useFormik({
        initialValues: {
            file: undefined,
        },
        validationSchema,
        onSubmit: async (values) => {
            // TODO actually send the file somewhere
            // TODO implement me

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

            const { data } = await axiosInstance.post('/path', formData, {
                headers: {
                    'Content-Type': 'multipart/form-data',
                },
            })
        },
    })

    // Callback when user selects the file
    const onFileSelected = (event: any) => {
        const file = event.currentTarget.files[0]
        if (file) {
            setFilename(file.name)
            formik.setFieldValue('file', file)
        }
    }

    const onClose = () => {
        setFilename(undefined)
        formik.resetForm()
    }

    const onClearSelectedFile = () => {
        setFilename(undefined)
        formik.setFieldValue('file', undefined)
    }

    return (
        <ButtonOpenableDialog
            buttonText="File"
            buttonColor="primary"
            buttonVariant="contained"
            onCloseCallback={onClose}
            maxWidth="xs"
        >
            <DialogTitle>Upload New File</DialogTitle>
            <DialogContent>
                <form onSubmit={formik.handleSubmit}>
                    {!filename ? (
                        <Fragment>
                            <Stack
                                direction="row"
                                justifyContent="flex-end"
                                alignItems="center"
                            >
                                <Button
                                    variant="contained"
                                    color="primary"
                                    component="label"
                                    // size="small"
                                    startIcon={<AttachmentIcon />}
                                >
                                    Select File
                                    <input
                                        id="file"
                                        name="file"
                                        type="file"
                                        hidden
                                        onChange={onFileSelected}
                                    />
                                </Button>
                            </Stack>
                        </Fragment>
                    ) : (
                        <Fragment>
                            <Stack direction="row" spacing={1}>
                                <Typography
                                    sx={{
                                        // textOverflow: 'ellipsis',
                                        // overflow: 'hidden',
                                    }}
                                    variant="body1"
                                >
                                    Selected File:{' '}
                                </Typography>
                                <Typography
                                    sx={{
                                        textOverflow: 'ellipsis',
                                        overflow: 'hidden',
                                    }}
                                    // color="text.secondary"
                                    component={Link}
                                    // download={(formik.values?.file as File).}
                                    // align="right"
                                >
                                    {filename}
                                </Typography>
                            </Stack>
                            <Stack
                                direction="row"
                                justifyContent="flex-end"
                                alignItems="center"
                                spacing={2}
                                sx={{mt: 2}}
                            >
                                <Button
                                    // sx={{ mb: 2, mt: 1 }}
                                    variant="contained"
                                    size="small"
                                    endIcon={<DeleteIcon />}
                                    onClick={onClearSelectedFile}
                                >
                                    Remove Selection
                                </Button>
                                <Button size="small" type="submit" variant="contained" startIcon={<SendIcon />}>
                                Submit
                            </Button>
                            </Stack>
                            
                            
                        </Fragment>
                    )}
                </form>
            </DialogContent>
        </ButtonOpenableDialog>
    )
}

export default FileUpload