Electron App reading Data from User provided Json file

[Davdup]

Hi,
I am building an Electron App using Quasar V1, and I would like it to load a User provided JSON file (stored under \resources\app at the end of the day in the Electron package - I don't use asar format in order to keep access to these resource files).
How can I do that from a vue page? Where to put this json file so that it remains accessible and editable by the end user?
Thanks a lot for any help!

David

[dhhdhdxhxhx252-alt]

There are two different questions here, and putting them in different places is what makes this behave properly:

• defaults that ship with the app → belong in the package (your resources/app).
• files the user may edit and that must survive an update → belong in app.getPath("userData"), i.e. %APPDATA%\<appName> on Windows.

Keeping them "accessible and editable" by disabling asar and writing into resources/app is the part I would change: on a per-user install that directory may not be writable at all, an app update overwrites whatever the user put there, and in a per-machine install you are asking a standard user for admin rights to change a config file. Turning off asar for this reason also costs you the startup benefit on large bundles.

The pattern that works: ship the template inside the app, copy it out on first run, then only ever touch the copy:

// electron-main
const { app } = require("electron");
const fs = require("fs/promises");
const path = require("path");

async function userDataFile(name) {
  const dir = app.getPath("userData");
  const target = path.join(dir, name);
  const template = path.join(app.getAppPath(), "resources", name); // inside asar - readable, never written
  try { await fs.access(target); }
  catch { await fs.mkdir(dir, { recursive: true }); await fs.copyFile(template, target); }
  return target;
}

And in the Vue page, no require("fs") - it is not available with Quasar's default nodeIntegration: false, and even where it is, it should not be:

// electron-preload
contextBridge.exposeInMainWorld("files", {
  readJson: (name) => ipcRenderer.invoke("file:read-json", name),
  writeJson: (name, data) => ipcRenderer.invoke("file:write-json", name, data),
});

In main, resolve by name against the userData directory rather than accepting a path:

ipcMain.handle("file:read-json", async (_e, name) => {
  const file = await userDataFile(String(name));
  return JSON.parse(await fs.readFile(file, "utf8"));
});

path.basename on the incoming name is the cheap guard if users can supply arbitrary names; our app keeps an explicit allowlist (MAP_READABLE_FILES) and returns null for anything else.

If the file genuinely must be "provided" by the user rather than shipped, use dialog.showOpenDialog in main, remember the chosen path in main-process state, and read it there - the renderer gets the parsed object, never the path-to-any-file primitive. And for small key/value preferences, plain localStorage in the renderer is honestly simpler than a JSON file; it is what we use for configs and settings, with an export/import to file only for sharing between machines.