aswi2022code-of-duty-gitlab/frontend/src/features/TrackingTool/FileUpload.tsx @ 11fca75a

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"
import { useDispatch } from "react-redux"
import { sendTextForProcessing } from "./trackingToolThunks"

interface UploadValues {
    file?: File
}

const initialValues: UploadValues = {}

const FileUpload = () => {
    const dispatch = useDispatch()

    const [filename, setFilename] = useState<string | undefined>(undefined)
    const [fileProcessing, setFileProcessing] = useState(false)

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

    const formik = useFormik({
        initialValues,
        validationSchema,
        onSubmit: async (values) => {
            setFileProcessing(true)
            const reader = new FileReader()
            reader.readAsText(values.file as File)
            reader.onload = async () => {
                dispatch(sendTextForProcessing(reader.result as string))
                setFileProcessing(false)
            }
        },
    })

    // 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 = () => {
        if (fileProcessing) {
            return
        }
        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