From 906626bbaeb872b65c15a3f2c1ac85d13f2a4c3f Mon Sep 17 00:00:00 2001 From: Avinash Kumar Deepak Date: Sat, 21 Mar 2026 16:07:30 +0530 Subject: [PATCH 1/2] fix: address file browser bonus issues --- src/component/fileBrowser.jsx | 16 ++++++++++++---- src/toolbarActions/toolbarFunctions.js | 9 +++++++++ 2 files changed, 21 insertions(+), 4 deletions(-) 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 }, From 5abb159e1e7222ae31eb18ccc2f044ab4695efc3 Mon Sep 17 00:00:00 2001 From: Avinash Kumar Deepak Date: Mon, 23 Mar 2026 22:23:50 +0530 Subject: [PATCH 2/2] chore: parameterize file-size limit and document config --- DEV-GUIDE.md | 10 ++++++++++ src/toolbarActions/toolbarFunctions.js | 7 ++++--- 2 files changed, 14 insertions(+), 3 deletions(-) create mode 100644 DEV-GUIDE.md diff --git a/DEV-GUIDE.md b/DEV-GUIDE.md new file mode 100644 index 0000000..d7a8269 --- /dev/null +++ b/DEV-GUIDE.md @@ -0,0 +1,10 @@ +# Dev Guide + +## File size limit used by file browser + +The file open size limit is configured in [src/toolbarActions/toolbarFunctions.js](src/toolbarActions/toolbarFunctions.js). + +- `MAX_FILE_SIZE_MB` controls the limit in MB. +- `MAX_FILE_SIZE` is derived from it as bytes. + +To change the limit, update `MAX_FILE_SIZE_MB` only. diff --git a/src/toolbarActions/toolbarFunctions.js b/src/toolbarActions/toolbarFunctions.js index a0d81b6..282e9ec 100644 --- a/src/toolbarActions/toolbarFunctions.js +++ b/src/toolbarActions/toolbarFunctions.js @@ -3,7 +3,8 @@ 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 MAX_FILE_SIZE_MB = 10; +const MAX_FILE_SIZE = MAX_FILE_SIZE_MB * 1024 * 1024; const createNode = (state, setState) => { setState({ @@ -108,7 +109,7 @@ 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'); + toast.error(`File size exceeds ${MAX_FILE_SIZE_MB}MB`); return; } const fr = new FileReader(); @@ -133,7 +134,7 @@ 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'); + toast.error(`File size exceeds ${MAX_FILE_SIZE_MB}MB`); return; } setState({