File System (fs) in Quasar SPA mode

[kzaiwo]

Hi guys,

I need to have access to several local XML files (part of my web page) without using a server.

Since Node's fs does not work on browsers, I tried using BrowserFS:

    var fs = ''
    var path = ''
    BrowserFS.install(window)
    BrowserFS.configure({ fs: 'LocalStorage' }, err => {
      if (err) {
        alert(err)
      } else {
        fs = window.fs = window.require('fs') // also tried BrowserFS.BFSRequire('fs')
        path = window.path = window.require('path') // also tried BrowserFS.BFSRequire('path')
      }
    })

Then I tried calling it like this:

    console.log(process.cwd())
    console.log(__dirname)
    fs.readdirSync(path.resolve(process.cwd())).forEach(file => {
      console.log('file: ' + file)
    })

    fs.readdirSync(path.join(__dirname, '..//defaults')).forEach(file => {
      console.log('__dirname file: ' + file)
    })

Then I get the following errors and log outputs:

/
/
file: test.txt sample-xml-upload.vue:145
[Vue warn]: Error in mounted hook: "Error: ENOENT: No such file or directory., '/defaults'"

so:

    console.log(process.cwd()) // results to /
    console.log(__dirname) // results to /

How can I make the path look at the actual local location where the file is called (ex. C:\Users\Me\Desktop\NodeJS)?

Any way I can achieve what I need using whatever is integrated in Quasar?
Or maybe how can I transfer my local XML files to localStorage root (/)?

Help please! Any thoughts or workarounds will be much appreciated.

Thanks!

[ontwikkelfabriek]

@kzaiwo

I need to have access to several local XML files (part of my web page) without using a server.

You'll need a (web)server like Nginx or Apache to serve Quasar in SPA mode, at least when you want to have your website accessible from a domain, for example https://myQuasarSPA.

Quasar in SPA mode is running in the clients browser. To access files on a clients machine you will have to use the File System Access API:
https://developer.mozilla.org/en-US/docs/Web/API/FileReader

It is possible to read and write files using HTML5 with the FileReader and saveAs(). The browser will open a file dialogue and let the user choose the file, so the user is aware of the file access. It is not possible to read or write to a file without the user's attention.

However you don't need access to the client's local files because the files are served/stored from the same webserver that will serve your Quasar SPA.

Here's a library to parse/read/convert xml in JS:
https://github.com/NaturalIntelligence/fast-xml-parser#readme

[kzaiwo]

Hey @ontwikkelfabriek, thanks for your answer! Question though - any other possible option though to load the local xml files (same package) if my Quasar SPA will only be bundled and opened locally (bundled web app will only be opened by clicking on the generated index.html file)?

[dr-vortex]

Hi @kzaiwo and @ontwikkelfabriek, I'm the maintainer of BrowserFS. I'd like to let you know that BrowserFS has been deprecated. You can read more about that on the BrowserFS readme (https://github.com/jvilk/BrowserFS). ZenFS is an updated and active fork that I created.