Revize 11fca75a

autozoom + file upload

re #9741

frontend/src/features/TrackingTool/FileUpload.tsx

@@ -5 +5 @@
     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'
+} 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'),
+        file: yup.mixed().required("File is required"),
     })
 
     const formik = useFormik({
-        initialValues: {
-            file: undefined,
-        },
+        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)
+            }
         },
     })
 
@@ -37 +52 @@
         const file = event.currentTarget.files[0]
         if (file) {
             setFilename(file.name)
-            formik.setFieldValue('file', file)
+            formik.setFieldValue("file", file)
         }
     }
 
     const onClose = () => {
+        if (fileProcessing) {
+            return
+        }
         setFilename(undefined)
         formik.resetForm()
     }
 
     const onClearSelectedFile = () => {
         setFilename(undefined)
-        formik.setFieldValue('file', undefined)
+        formik.setFieldValue("file", undefined)
     }
 
     return (
@@ -91 +109 @@
                         <Fragment>
                             <Stack direction="row" spacing={1}>
                                 <Typography
-                                    sx={{
-                                        // textOverflow: 'ellipsis',
-                                        // overflow: 'hidden',
-                                    }}
+                                    sx={
+                                        {
+                                            // textOverflow: 'ellipsis',
+                                            // overflow: 'hidden',
+                                        }
+                                    }
                                     variant="body1"
                                 >
-                                    Selected File:{' '}
+                                    Selected File:{" "}
                                 </Typography>
                                 <Typography
                                     sx={{
-                                        textOverflow: 'ellipsis',
-                                        overflow: 'hidden',
+                                        textOverflow: "ellipsis",
+                                        overflow: "hidden",
                                     }}
                                     // color="text.secondary"
                                     component={Link}
@@ -117 +137 @@
                                 justifyContent="flex-end"
                                 alignItems="center"
                                 spacing={2}
-                                sx={{mt: 2}}
+                                sx={{ mt: 2 }}
                             >
                                 <Button
                                     // sx={{ mb: 2, mt: 1 }}
@@ -128 +148 @@
                                 >
                                     Remove Selection
                                 </Button>
-                                <Button size="small" type="submit" variant="contained" startIcon={<SendIcon />}>
-                                Submit
-                            </Button>
+                                <Button
+                                    size="small"
+                                    type="submit"
+                                    variant="contained"
+                                    startIcon={<SendIcon />}
+                                >
+                                    Submit
+                                </Button>
                             </Stack>
-                            
-                            
                         </Fragment>
                     )}
                 </form>