Merge pull request #369 from avinxshKD/fix/file-browser-bonus

fix: address file browser bonus issues

Author: pradeeban

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.

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);
                         }

src/toolbarActions/toolbarFunctions.js

@@ -3,6 +3,8 @@ import parser from '../graph-builder/graphml/parser';
 import { actionType as T } from '../reducer';
 
 const getGraphFun = (superState) => superState.curGraphInstance;
+const MAX_FILE_SIZE_MB = 10;
+const MAX_FILE_SIZE = MAX_FILE_SIZE_MB * 1024 * 1024;
 
 const createNode = (state, setState) => {
     setState({
@@ -106,6 +108,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 ${MAX_FILE_SIZE_MB}MB`);
+            return;
+        }
         const fr = new FileReader();
         const projectName = file.name;
         if (file.name.split('.').pop() === 'graphml') {
@@ -127,6 +133,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 ${MAX_FILE_SIZE_MB}MB`);
+            return;
+        }
         setState({
             type: T.EDIT_TEXTFILE,
             payload: { show: true, fileObj: file, fileHandle },