-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
FI-2539: Add JSON and YAML file input options (#466)
* add catch for json parse * add placeholder upload button * control serial input * simplify invalid file input handling * add error handling for json inputs * remove extra error * move upload button to separate component * fix download file * restyle upload button * add copy button to input --------- Co-authored-by: Alyssa Wang <awang@mitre.org>
- Loading branch information
1 parent
77f4bfa
commit 030468a
Showing
6 changed files
with
190 additions
and
37 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| import React, { FC } from 'react'; | ||
| import { Button } from '@mui/material'; | ||
| import { FileDownloadOutlined } from '@mui/icons-material'; | ||
|
|
||
| export interface DownloadFileButtonProps { | ||
| fileName: string; | ||
| fileType: string; | ||
| } | ||
|
|
||
| const DownloadFileButton: FC<DownloadFileButtonProps> = ({ fileName, fileType }) => { | ||
| const downloadFile = () => { | ||
| const downloadLink = document.createElement('a'); | ||
| const file = new Blob( | ||
| [(document.getElementById(`${fileType}-serial-input`) as HTMLInputElement)?.value], | ||
| { | ||
| type: 'text/plain', | ||
| } | ||
| ); | ||
| downloadLink.href = URL.createObjectURL(file); | ||
| downloadLink.download = `${fileName}.${fileType}`; | ||
| document.body.appendChild(downloadLink); // Required for this to work in FireFox | ||
| downloadLink.click(); | ||
| }; | ||
|
|
||
| return ( | ||
| <Button | ||
| variant="contained" | ||
| component="label" | ||
| color="secondary" | ||
| aria-label="file-download" | ||
| startIcon={<FileDownloadOutlined />} | ||
| disableElevation | ||
| onClick={downloadFile} | ||
| sx={{ mb: 4 }} | ||
| > | ||
| Download File | ||
| </Button> | ||
| ); | ||
| }; | ||
|
|
||
| export default DownloadFileButton; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,63 @@ | ||
| import React, { ChangeEvent, FC } from 'react'; | ||
| import { Box, Button, Typography } from '@mui/material'; | ||
| import { styled } from '@mui/material/styles'; | ||
| import { FileUploadOutlined, TaskOutlined } from '@mui/icons-material'; | ||
|
|
||
| export interface UploadFileButtonProps { | ||
| onUpload: (text: string) => unknown; | ||
| } | ||
|
|
||
| const UploadFileButton: FC<UploadFileButtonProps> = ({ onUpload }) => { | ||
| const [fileName, setFileName] = React.useState<string>(''); | ||
|
|
||
| const uploadFile = (e: ChangeEvent<HTMLInputElement>) => { | ||
| if (!e.target.files || e.target.files.length === 0) return; | ||
| const file = e.target.files[0]; | ||
| setFileName(file.name); | ||
| const reader = new FileReader(); | ||
| reader.onload = () => { | ||
| const text = reader.result?.toString() || ''; | ||
| onUpload(text); | ||
| }; | ||
| reader.readAsText(file); | ||
| }; | ||
|
|
||
| const VisuallyHiddenInput = styled('input')({ | ||
| clip: 'rect(0 0 0 0)', | ||
| clipPath: 'inset(50%)', | ||
| height: 1, | ||
| overflow: 'hidden', | ||
| position: 'absolute', | ||
| bottom: 0, | ||
| left: 0, | ||
| whiteSpace: 'nowrap', | ||
| width: 1, | ||
| }); | ||
|
|
||
| return ( | ||
| <Box display="flex" alignItems="center" sx={{ mb: 2 }}> | ||
| <Button | ||
| variant="contained" | ||
| component="label" | ||
| color="secondary" | ||
| aria-label="file-upload" | ||
| startIcon={<FileUploadOutlined />} | ||
| disableElevation | ||
| sx={{ flexShrink: 0 }} | ||
| > | ||
| Upload File | ||
| <VisuallyHiddenInput type="file" onChange={(e) => uploadFile(e)} /> | ||
| </Button> | ||
| {fileName && ( | ||
| <Box display="flex" alignItems="center" sx={{ mx: 2 }}> | ||
| <TaskOutlined color="secondary" sx={{ mr: 1 }} /> | ||
| <Typography variant="subtitle1" sx={{ fontFamily: 'Monospace' }}> | ||
| {fileName} | ||
| </Typography> | ||
| </Box> | ||
| )} | ||
| </Box> | ||
| ); | ||
| }; | ||
|
|
||
| export default UploadFileButton; |