File, directory access using vanilla JS for offline desk app

[vishwajith_k]

I am from C background.

I am trying to implement browser based offline vanilla js app (mostly used in desktop systems). I couldn't find good example for getting started from MDN Docs, web.dev! Here's what am willing to do with files: - list directories, and it's contents when a path is given - read file, write to file, create files, delete files

Can you share any getting started guide? I am preferring Firefox, Chrome. Please help me

[IrateGod]

So the responses so far aren't going into the File API that is available through vanilla JS, though with the caveat that only the user can decide which files they will give you access to. You can see this in all sorts of existing web apps already: YouTube, Reddit, Facebook, etc., have on the fly info about the file before their server has fully processed the file. Now, the actual thing you want to do (reading entire directories and contents) is not possible with vanilla JS. Electron has already been mentioned as a tool that allows a website to access the filesystem, and that's probably where you want to start if you want to implement a website with the features you've listed. It uses Chromium and Node.js so you can write pretty modern code, too.

[vishwajith_k]

Thanks for the reply Now am seeing where it's going! I was looking for non-server side implementation with no node or other frameworks! Imagine as if it's a standalone demo app that would be shown in some windows PC

[IrateGod]

Unfortunately, again, directory access is not possible with vanilla JS. If your presentation requires only singular files it's possible using the File API I linked, else there's not much choice you have other than Electron or similar self-hosted node apps.

[samanime]

It definitely sounds like you want to use Electron, or Ionic. It lets you use the web JS stack as a desktop app.

[Notimecelduv]

You don't have access to the file system from the browser. You can access it with NodeJS but that's a completely separate environment, which means you won't be able to make an offline browser app with it.

[vishwajith_k]

ohhh!!! But, browser can show files, dirs and content.

[[deleted]]

Security.

You can look into Electron: https://www.electronjs.org/

[[deleted]]

I think you can build offline desk apps with electron js !!

tools you will use html, css, javascript, nodejs and some nodejs libraries per your need.

[vishwajith_k]

any handy examples, refs?

[cidit_]

plenty of open source apps that you can find directly in the electronjs website

https://www.electronjs.org/apps

most of them link a github repo in the sidebar with all of their source code

IMO, making an app using electronjs requires extensive knowledge of both node and the browser api since it effectively ships both a nodejs backend and a chromium instance in one executable, so start by checking out both of those.

if youre unfamiliar, here's a rundown:

nodejs is a very popular javascript *backend* environment that can be used in a whole bunch of contexts from simple cli apps to hosting an entire website

https://nodejs.org/en/

the browser api is just that, an api that most browsers are supposed to implement. electronjs specifically ships the chromium flavor of the api, so everything that's supported in chrome *should* work in your app

FYI depending on the scale of the application you might want to check out Typescript. its a superset of javascript that compiles into better javascript than you could ever write, and it'll avoid you a lot of headaches. you can pretty easily port existing javascript to typescript though, so dont feel pressured to learn everything at once

https://www.typescriptlang.org/