electron app: send filename in query filename= param, instead of as part of url path, more robust and should work on windows

src/chooser.js

@@ -33,7 +33,13 @@ class Chooser extends LitElement
     if (this.file) {
       loadInfo.isFile = true;
       // file.path only available in electron app
-      loadInfo.loadUrl = this.file.path ? __APP_FILE_SERVE_PREFIX__ + this.file.path : URL.createObjectURL(this.file);
+      if (this.file.path) {
+        const url = new URL(__APP_FILE_SERVE_PREFIX__);
+        url.searchParams.set("filename", this.file.path);
+        loadInfo.loadUrl = url.href;
+      } else {
+        loadInfo.loadUrl = URL.createObjectURL(this.file);
+      }
       loadInfo.noCache = this.file.path !== undefined;
       loadInfo.name = this.fileDisplayName;
     }

src/electron-main.js

@@ -7,7 +7,6 @@ import {app, session, BrowserWindow, ipcMain} from 'electron';
 
 import path from 'path';
 import fs from 'fs';
-import qs from 'querystring';
 
 import { ArchiveResponse, Rewriter } from 'wabac/src/rewrite';
 
@@ -133,7 +132,8 @@ async function doIntercept(request, callback) {
   }
 
   if (request.url.startsWith(__APP_FILE_SERVE_PREFIX__)) {
-    const filename = qs.unescape(request.url.slice(__APP_FILE_SERVE_PREFIX__.length));
+    const parsedUrl = new URL(request.url);
+    const filename = parsedUrl.searchParams.get("filename");
     console.log("file serve:", filename);
 
     const stat = await fs.promises.lstat(filename);

ui.js

@@ -372,7 +372,7 @@ const ae=new WeakMap,oe=v(e=>t=>{if(!(t instanceof T))throw new Error("unsafeSVG
         </section>
       </div>
   </div>
-  `:""} `:O``}firstUpdated(){this.initRoute(),window.addEventListener("popstate",e=>{this.initRoute()})}updated(e){e.has("sourceUrl")&&(this.collInfo=null)}onFavIcons(e){const t=document.querySelector("head"),i=document.querySelectorAll("link[rel*='icon']");for(const e of i)t.removeChild(e);for(const i of e.detail.icons){const e=document.createElement("link");e.rel=i.rel,e.href=i.href,t.appendChild(e)}}onNavMenu(){this.navMenuShown=!this.navMenuShown}initRoute(){this.inited=!0,this.pageParams=new URLSearchParams(window.location.search);let e=this.pageParams.get("state");if(e)try{if(e=JSON.parse(e),e.ids instanceof Array&&e.userId&&"open"===e.action)return this.pageParams.set("source","googledrive://"+e.ids[0]),this.pageParams.delete("state"),void(window.location.search=this.pageParams.toString())}catch(e){console.log(e)}if(this.sourceUrl=this.pageParams.get("source")||"",this.embed=this.pageParams.get("embed")||"",this.pageParams.has("terms")&&(this.showTerms=!0),this.pageParams.get("config")){this.loadInfo||(this.loadInfo={});try{this.loadInfo.extraConfig=JSON.parse(this.pageParams.get("config"))}catch(e){console.log("invalid config: "+e)}}this.pageParams.get("customColl")&&(this.loadInfo||(this.loadInfo={}),this.loadInfo.customColl=this.pageParams.get("customColl"))}onStartLoad(e){if(this.pageParams.set("source",e.detail.sourceUrl),e.detail.isFile){{const e=new URL(window.location.href);e.search=this.pageParams.toString(),window.history.pushState({},"",e.toString())}this.sourceUrl=e.detail.sourceUrl,this.loadInfo=e.detail}else window.location.search=this.pageParams.toString()}onCollLoaded(e){this.loadInfo=null,e.detail.collInfo&&(this.collInfo=e.detail.collInfo),e.detail.alreadyLoaded||e.detail.sourceUrl!==this.sourceUrl&&(this.pageParams.set("source",e.detail.sourceUrl),window.location.search=this.pageParams.toString())}});var je=i(88),De=i.n(je);customElements.define("wr-chooser",class extends ie{constructor(){super(),this.fileDisplayName="",this.file=null}onChooseFile(e){0!==e.currentTarget.files.length&&(this.file=e.currentTarget.files[0],this.fileDisplayName="file://"+(this.file.path||this.file.name),this.requestUpdate())}onStartLoad(e){e.preventDefault();const t={sourceUrl:this.fileDisplayName};return this.file&&(t.isFile=!0,t.loadUrl=this.file.path?"http://files.replayweb.page"+this.file.path:URL.createObjectURL(this.file),t.noCache=void 0!==this.file.path,t.name=this.fileDisplayName),this.dispatchEvent(new CustomEvent("load-start",{detail:t})),!1}onInput(e){this.fileDisplayName=e.currentTarget.value,this.file&&this.fileDisplayName&&this.fileDisplayName.startsWith("file://")&&(this.file=null,this.fileDisplayName="")}static get styles(){return be(ee`
+  `:""} `:O``}firstUpdated(){this.initRoute(),window.addEventListener("popstate",e=>{this.initRoute()})}updated(e){e.has("sourceUrl")&&(this.collInfo=null)}onFavIcons(e){const t=document.querySelector("head"),i=document.querySelectorAll("link[rel*='icon']");for(const e of i)t.removeChild(e);for(const i of e.detail.icons){const e=document.createElement("link");e.rel=i.rel,e.href=i.href,t.appendChild(e)}}onNavMenu(){this.navMenuShown=!this.navMenuShown}initRoute(){this.inited=!0,this.pageParams=new URLSearchParams(window.location.search);let e=this.pageParams.get("state");if(e)try{if(e=JSON.parse(e),e.ids instanceof Array&&e.userId&&"open"===e.action)return this.pageParams.set("source","googledrive://"+e.ids[0]),this.pageParams.delete("state"),void(window.location.search=this.pageParams.toString())}catch(e){console.log(e)}if(this.sourceUrl=this.pageParams.get("source")||"",this.embed=this.pageParams.get("embed")||"",this.pageParams.has("terms")&&(this.showTerms=!0),this.pageParams.get("config")){this.loadInfo||(this.loadInfo={});try{this.loadInfo.extraConfig=JSON.parse(this.pageParams.get("config"))}catch(e){console.log("invalid config: "+e)}}this.pageParams.get("customColl")&&(this.loadInfo||(this.loadInfo={}),this.loadInfo.customColl=this.pageParams.get("customColl"))}onStartLoad(e){if(this.pageParams.set("source",e.detail.sourceUrl),e.detail.isFile){{const e=new URL(window.location.href);e.search=this.pageParams.toString(),window.history.pushState({},"",e.toString())}this.sourceUrl=e.detail.sourceUrl,this.loadInfo=e.detail}else window.location.search=this.pageParams.toString()}onCollLoaded(e){this.loadInfo=null,e.detail.collInfo&&(this.collInfo=e.detail.collInfo),e.detail.alreadyLoaded||e.detail.sourceUrl!==this.sourceUrl&&(this.pageParams.set("source",e.detail.sourceUrl),window.location.search=this.pageParams.toString())}});var je=i(88),De=i.n(je);customElements.define("wr-chooser",class extends ie{constructor(){super(),this.fileDisplayName="",this.file=null}onChooseFile(e){0!==e.currentTarget.files.length&&(this.file=e.currentTarget.files[0],this.fileDisplayName="file://"+(this.file.path||this.file.name),this.requestUpdate())}onStartLoad(e){e.preventDefault();const t={sourceUrl:this.fileDisplayName};if(this.file){if(t.isFile=!0,this.file.path){const e=new URL("http://files.replayweb.page/");e.searchParams.set("filename",this.file.path),t.loadUrl=e.href}else t.loadUrl=URL.createObjectURL(this.file);t.noCache=void 0!==this.file.path,t.name=this.fileDisplayName}return this.dispatchEvent(new CustomEvent("load-start",{detail:t})),!1}onInput(e){this.fileDisplayName=e.currentTarget.value,this.file&&this.fileDisplayName&&this.fileDisplayName.startsWith("file://")&&(this.file=null,this.fileDisplayName="")}static get styles(){return be(ee`
     .extra-padding {
       padding: 2em;
     }

webpack.config.js

@@ -4,7 +4,7 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 // fake url used in app to serve files
 // can not use custom scheme due to service worker issues
-const APP_FILE_SERVE_PREFIX = "http://files.replayweb.page";
+const APP_FILE_SERVE_PREFIX = "http://files.replayweb.page/";
 //const APP_FILE_SERVE_PREFIX = "file://files.replayweb.page";