DirectoryPicker for saving file

Author: Aviral09

src/graph-builder/graph-core/5-load-save.js

@@ -100,11 +100,30 @@ class GraphLoadSave extends GraphUndoRedo {
         return `${this.projectName}`;
     }
 
-    saveToDisk(fileName) {
+    async saveToDisk() {
         const str = graphmlBuilder(this.jsonifyGraph());
         const bytes = new TextEncoder().encode(str);
         const blob = new Blob([bytes], { type: 'application/json;charset=utf-8' });
-        saveAs(blob, `${fileName || `${this.getName()}-concore`}.graphml`);
+        if (navigator.userAgent.indexOf('Edg') !== -1 || navigator.userAgent.indexOf('Chrome') !== -1) {
+            const options = {
+                types: [
+                    {
+                        description: 'GraphMl Files',
+                        accept: {
+                            'text/graphml': ['.graphml'],
+                        },
+                    },
+                ],
+            };
+            const handle = await window.showSaveFilePicker(options);
+            const stream = await handle.createWritable();
+            await stream.write(blob);
+            await stream.close();
+        } else {
+            // eslint-disable-next-line no-alert
+            const fileName = prompt('Filename:');
+            saveAs(blob, `${fileName || `${this.getName()}-concore`}.graphml`);
+        }
     }
 
     saveToFolder() {

src/toolbarActions/toolbarFunctions.js

@@ -75,8 +75,8 @@ const downloadImg = (state, setState, format) => {
     getGraphFun(state).downloadImg(format);
 };
 
-const saveAction = (state, d, fileName) => {
-    getGraphFun(state).saveToDisk(fileName);
+const saveAction = (state) => {
+    getGraphFun(state).saveToDisk();
 };
 
 async function saveGraphMLFile(state) {

src/toolbarActions/toolbarList.js

@@ -45,7 +45,7 @@ const toolbarList = (state, dispatcher) => [
         type: 'action',
         text: 'Save As',
         icon: FaSave,
-        action: (s, d) => saveAction(s, d, prompt('File Name:')),
+        action: (s, d) => saveAction(s, d),
         active: true,
     },
     {