import flow OK

buildoz.css

@@ -261,6 +261,7 @@ bz-graflow .bzgf-nodes-container .port.selectable:hover{
     border: 5px solid #FF08!important;
     cursor: pointer;
 }
+bz-graflow .graflow-error{ background:red;color:black;position: absolute;top: 0;left: 50%;transform: translateX(-50%); }
 
 /* BZGRAFLOW_CORE_END */
 

bzGraflow-editor.js

@@ -14,6 +14,7 @@ class BZgrafloweditor extends Buildoz{
     constructor(){
         super()
         this.defaultAttrs = {  }
+window.debugEditor = this       
     }
     
     async connectedCallback() { 
@@ -99,11 +100,14 @@ class BZgrafloweditor extends Buildoz{
                     <div class="cols-2"><label>Tension</label><input name="tension" type="number" size="2" value="30"></div>
                 </section>
                 <section>
-                    <button data-trigger="onexportFlow">Export Flow</button>
+                    <button data-trigger="onImportFlow">Import Flow</button>
+                    <button data-trigger="onExportFlow">Export Flow</button>
+                    <input type="file" name="importFlow" accept="application/json" style="display: none;">
                 </section>
             </div>
         `
-        this.slidePane.querySelector('button[data-trigger="onexportFlow"]').addEventListener('click', this.onexportFlow.bind(this))
+        this.slidePane.querySelector('button[data-trigger="onExportFlow"]').addEventListener('click', this.onExportFlow.bind(this))
+        this.slidePane.querySelector('button[data-trigger="onImportFlow"]').addEventListener('click', this.onImportFlow.bind(this))
     }
 
     refreshNodes(e){
@@ -158,7 +162,17 @@ class BZgrafloweditor extends Buildoz{
         })
     }
 
-    onexportFlow(e){
+    onImportFlow(e){
+        const fileInput = this.slidePane.querySelector('input[name="importFlow"]')
+        fileInput.addEventListener('change', (evt) => {
+            const file = evt.target.files[0]
+            if(file) this.graflow.loadFlow(file)
+            fileInput.value = ''
+        }, { once: true })
+        fileInput.click()
+    }
+
+    onExportFlow(e){
         const flowDeep = JSON.parse(JSON.stringify(this.graflow.flow))
         delete flowDeep.longLinks
         const exportObj = {

bzGraflow.js

@@ -99,20 +99,32 @@ class BZgraflow extends Buildoz{
     }
 
     error(msg, err){
-        this.innerHTML = `<div style="background:red;color:black;margin: auto;width: fit-content;">${msg}</div>`
+        this.querySelector('.graflow-error')?.remove()
+        const errorEl = document.createElement('div')
+        errorEl.classList.add('graflow-error')
+        errorEl.innerHTML = `${msg}`
+        this.appendChild(errorEl)
         if(err) console.error(msg, err)
         else console.error(msg)
     }
 
-    async loadFlow(url){
-        const res = await fetch(url+'?'+crypto.randomUUID())
-        const buf = await res.text()
+    async loadFlow(source){
+        let buf
+        if(source instanceof Blob){
+            buf = await source.text()
+        } else {
+            const url = source
+            const fetchUrl = (typeof url === 'string' && !url.startsWith('blob:') && !url.startsWith('data:'))
+                ? (url + '?' + crypto.randomUUID())
+                : url
+            const res = await fetch(fetchUrl)
+            buf = await res.text()
+        }
         let flowObj
         try{
             flowObj = JSON.parse(buf)
         } catch(err){
             this.error('Could not parse flow JSON!?', err)
-
             return
         }
         if(!flowObj.nodesFile){
@@ -122,7 +134,7 @@ class BZgraflow extends Buildoz{
         await this.loadNodes(flowObj.nodesFile)
         this.flow = flowObj.flow
         this.refresh()
-        this.fireEvent('flowLoaded', { url: url })
+        this.fireEvent('flowLoaded', { url: source instanceof Blob ? null : source, blob: source instanceof Blob ? source : null })
     }
 
     initFlow(){