diff --git a/src/component/fileBrowser.jsx b/src/component/fileBrowser.jsx index e0d57c6..6257e32 100644 --- a/src/component/fileBrowser.jsx +++ b/src/component/fileBrowser.jsx @@ -20,6 +20,13 @@ const LocalFileBrowser = ({ superState, dispatcher }) => { const [dirButton, setDirButton] = useState(false); const [fileState, setFileState] = useState([]); + const getLocalFileState = (state) => state.map((file) => ({ + key: file.key, + modified: file.modified, + size: file.size, + fileName: file.fileObj ? file.fileObj.name : null, + })); + useEffect(() => { if ('showDirectoryPicker' in window) { setDirButton(true); @@ -35,7 +42,7 @@ const LocalFileBrowser = ({ superState, dispatcher }) => { // setFileState({ files: allFiles }); // } try { - window.localStorage.setItem('fileList', JSON.stringify(fileState)); + window.localStorage.setItem('fileList', JSON.stringify(getLocalFileState(fileState))); } catch (e) { toast.error(e.message); } @@ -47,13 +54,14 @@ const LocalFileBrowser = ({ superState, dispatcher }) => { const handleSelectFile = (data) => { const fileExtensions = ['jpeg', 'jpg', 'png', 'exe']; - if (fileExtensions.includes(data.fileObj.name.split('.').pop())) { + const fileExt = data.fileObj.name.split('.').pop().toLowerCase(); + if (fileExtensions.includes(fileExt)) { // eslint-disable-next-line no-alert alert('Wrong file extension'); return; } - if (data.fileObj.name.split('.').pop() === 'graphml') { + if (fileExt === 'graphml') { let foundi = -1; superState.graphs.forEach((g, i) => { if ((g.fileName === data.fileObj.name)) { @@ -251,7 +259,7 @@ const LocalFileBrowser = ({ superState, dispatcher }) => { setFileState(filesArray); try { - window.localStorage.setItem('fileList', JSON.stringify(filesArray)); + window.localStorage.setItem('fileList', JSON.stringify(getLocalFileState(filesArray))); } catch (e) { toast.error(e.message); } diff --git a/src/toolbarActions/toolbarFunctions.js b/src/toolbarActions/toolbarFunctions.js index 721b106..a0d81b6 100644 --- a/src/toolbarActions/toolbarFunctions.js +++ b/src/toolbarActions/toolbarFunctions.js @@ -3,6 +3,7 @@ import parser from '../graph-builder/graphml/parser'; import { actionType as T } from '../reducer'; const getGraphFun = (superState) => superState.curGraphInstance; +const MAX_FILE_SIZE = 10 * 1024 * 1024; const createNode = (state, setState) => { setState({ @@ -106,6 +107,10 @@ async function saveGraphMLFile(state) { const readFile = async (state, setState, file, fileHandle) => { if (file) { + if (file.size > MAX_FILE_SIZE) { + toast.error('File size exceeds 10MB'); + return; + } const fr = new FileReader(); const projectName = file.name; if (file.name.split('.').pop() === 'graphml') { @@ -127,6 +132,10 @@ const readFile = async (state, setState, file, fileHandle) => { const readTextFile = (state, setState, file, fileHandle) => { if (file) { + if (file.size > MAX_FILE_SIZE) { + toast.error('File size exceeds 10MB'); + return; + } setState({ type: T.EDIT_TEXTFILE, payload: { show: true, fileObj: file, fileHandle },