Add file input dialog

CHANGELOG.md

@@ -19,6 +19,7 @@ and adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 -   Made text input box use a monospace font
 -   Disabled download buttons when there is no input/output.
+-   Added a modal to the file input section.
 
 ### 🔧 Internal changes
 

demo/src/MemoryModelsUserInput.tsx

@@ -9,6 +9,7 @@ import {
     Tooltip,
     MenuItem,
     Stack,
+    Modal,
 } from "@mui/material";
 import DownloadJSONButton from "./DownloadJSONButton";
 import MemoryModelsMenu from "./MemoryModelsMenu";
@@ -45,6 +46,10 @@ type MemoryModelsUserInputPropTypes = MemoryModelsFileInputPropTypes &
 
 function MemoryModelsFileInput(props: MemoryModelsFileInputPropTypes) {
     const [uploadedFileString, setUploadedFileString] = useState("");
+    const [open, setOpen] = useState(false);
+
+    const handleOpen = () => setOpen(true);
+    const handleClose = () => setOpen(false);
 
     const onChange = (event) => {
         try {
@@ -54,7 +59,6 @@ function MemoryModelsFileInput(props: MemoryModelsFileInputPropTypes) {
             fileReader.onload = (event) => {
                 const fileString = event.target.result as string;
                 setUploadedFileString(fileString);
-                props.setTextData(fileString);
             };
         } catch (error) {
             const errorMessage = `Error reading uploaded file as text. Please ensure it's in UTF-8 encoding: ${error.message}`;
@@ -66,29 +70,42 @@ function MemoryModelsFileInput(props: MemoryModelsFileInputPropTypes) {
 
     const onLoadButtonClick = () => {
         props.setTextData(uploadedFileString);
+        setOpen(false);
     };
 
     return (
-        <Stack direction={"row"} spacing={2}>
-            <Input
-                type="file"
-                onChange={onChange}
-                inputProps={{
-                    accept: "application/JSON",
-                    "data-testid": "file-input",
-                }}
-                disableUnderline={true}
-            />
-            <Button
-                data-testid="file-input-reapply-button"
-                variant="contained"
-                disabled={!uploadedFileString}
-                onClick={onLoadButtonClick}
-                sx={{ textTransform: "none" }}
-            >
-                Load file data
+        <div>
+            <Button onClick={handleOpen} sx={{ textTransform: "none" }}>
+                File Input
             </Button>
-        </Stack>
+            <Modal open={open} onClose={handleClose}>
+                <Box className="fileInputBox">
+                    <div>
+                        <Input
+                            type="file"
+                            onChange={onChange}
+                            inputProps={{
+                                accept: "application/JSON",
+                                "data-testid": "file-input",
+                            }}
+                            disableUnderline={true}
+                        />
+                    </div>
+                    <div>
+                        <Button
+                            data-testid="file-input-reapply-button"
+                            variant="contained"
+                            color="primary"
+                            disabled={!uploadedFileString}
+                            onClick={onLoadButtonClick}
+                            sx={{ textTransform: "none" }}
+                        >
+                            Load file data
+                        </Button>
+                    </div>
+                </Box>
+            </Modal>
+        </div>
     );
 }
 

demo/src/css/styles.css

@@ -20,3 +20,16 @@ input[type="number"]::-webkit-outer-spin-button {
     transition: transform 0.2s ease-in-out;
     transform: rotate(180deg);
 }
+
+.fileInputBox {
+    display: flex;
+    position: absolute;
+    top: 40%;
+    left: 20%;
+    width: 50%;
+    background-color: white;
+    border-radius: 5px;
+    justify-content: space-between;
+    padding: 10px;
+    align-items: center;
+}