Pass a file of a database as parameter to be opened with a html viewer

Question

Premise

1. I am not much expert in this, but I have superficial familiarity with HTML, CSS, vanilla JS.
2. I am creating for let say for myself an application in HTML 5, CSS 3, vanilla JS ECMA script 6, so with NO use of frameworks as jQuery or else: just vanilla JS, and I also don't care about older browser that are not HTML 5 ES6 CSS 3 compliant, like IE.
3. The application runs as simple HTML/CSS/JS file on the local computer only: so no remote server is involved but it is a portable app I store and use on my computer or on a pen drive or I send to other people as my family to show things to them.
4. I know about limits imposed to HTML/JS to open files on its own and about the need for user interaction by the use of input type="file" html element... but nevertheless might be there is another way I am not familiar with yet, if I'm lucky...

---

Situation

1. I have an already working html file, let's call it Manager.html. It contains a table that is populated with a list of files, listed as:

• File 1.db
• File 2.db
• File 3.db
• and much much more of them...

Also, each file is a URL, for instance:

<a href="file 1.db">file 1.db</a>

If I have to, I can change their extension to *.json, *.csv, *.tsv, *.db, *.txt, or any other that could work as long as it is a data related extension for files containing text only, no problem at all for that.

2. I have an already working html file that acts as a viewer let's call it Viewer.html: it loads data from those other db files by using at the moment a canonical input type="file". It loads the content of the chosen database and displays it into the table handled by Manager.html and the relative js that handles the loading process and the process to populate the table.

3. The db file used is a custom kind of "csv"-like-file (coma separated value format file) customized by myself: it contains basically text only content and uses normal \CR\LF to separate records and the pipe symbol "|" (no double quotes) instead of commas, for separating fields. For instance:

   1. text of field 1|text of field 2|text of field 3|text of field n
   2. text of field 1|text of field 2|text of field 3|text of field n
   3. text of field 1|text of field 2|text of field 3|text of field n
   4. and more records ...

4. The content of the db files is utf8 text and it is not limited in quantity, so:

• a db file could be of any size: from few Bytes or KB and few records or even hundreds or thousands of KB and hundreds or even thousands of records: so can be present any number of records.
• a record could be any length, with a fixed number of fields, corresponding to the number of fields of the target html table in Viewer.html
• a field can contain text of any length as well

At the moment everything works well per se with the input type="file" implementation, but I want to implement a different feature and improve my user experience because at the moment I have to:

1. open Viewer.html
2. here I have to click on the input type="file" control to open the "open file window"
3. from the "open file window" I have to select the File n.db file I wish to load in Viewer.html to open it and populate the table into Viewer.html.

All this is of course super tedious.

---

So what I want is to be able to:

Of course directly from Manager.html, that holds the table with the main list of all File n.db I want just to:

• click on the url of the File n.db file I want to open, listed inside the table in the file Manager.html. And with that just one click I want the javascript to:

1. open the Viewer.html
2. pass to Viewer.html as parameter the File n.db file to be processed
3. Viewer.html opens it by its own, process it, and shows its content into its table.

In other words I'm looking for a function that can do something similar to:

Pseudo code:

open(Viewer.html, File n.db)

will also work as well something similar to:

<database src="MyDBsubDir/MyDBfile.db"></database>

Would be great if it works with standard db files as csv, tsv, json, db, txt, and so on, containing just Unicode text in it.

---

It is relevant/Crucial

1. The use of the Manager.html to list all File n.db files to click on for opening.
2. The use of just one common Viewer.html, so it will be easier to maintain and in case of need could be updated just once for debugging or to implement new features in case of need.
3. Handle an unlimited number of File n.db files (or with other extensions)

---

Questions

1. Is it possible for the user (typically myself or family or friends) which is showing Manager.html click on a link of the file and pass its href value as parameter to the other file Viewer.html to be processed and shown here?
2. If Yes, how do I implement a function that does something like that in vanilla JS?

Basically the function activated on mouse click on the link will have to get the text content of the file n.db file under the href attribute of the same clicked link, and will "inject" / "fuse" on the fly such a content with the Viewer.html itself that will provide the correct formatting of it as html table so can be shown on the browser as a normal html page instead of just text.

---

Notice that

As already said: the solution I'm looking for, if any, must be compatible with only HTML 5, ES6 compliant browsers (so I really don't care about IE and similar others, which are dead for me). I repeat: all has to work on a "local" machine (Windows, Linux, MAC, Android... and more), no server of any kind has to be involved.

The ideal solution would be a fetch() like function if it worked on local files, but unfortunately it doesn't, as far as I know.

Also it doesn't work either to compile by JavaScript a input type=file with the file because of course it is not allowed for security reasons.

---

Ideal behavior

IMHO the best way to go to solve this limit once and for all without putting in jeopardy the security of the local system, would be to implement in all browsers a standard behavior that asks to the user the authorization to access to app directory and its sub-dirs, similarly as when the browsers ask the user for authorization to use the microphone. This will allow the user to decide if a local app is authorized to access to its own directory. This authorization has to be a per-session authorization: so it is given every time the app is opened into the browsers.

Answer 1

There are alternatives.

Key factor #1 is : "If I have to, I can change their extension to *.json, or any other that could work, no problem at all for that.". This matters because you are open to using a file format that browsers are still happy to open locally.

Key factor #2 is : "Of course directly from Manager.html, that holds the table with the main list of all File n.db". This matters because browsers are not and should not be allowed to read your local drive without your intervention, but a list or urls gets us pretty far.

The first solution, and the simplest one from a technical perspective, is to save your database files as html files that already look the way you want them to. You just open them when you click on the link. You basically don't have a viewer anymore since your files are directly viewable.

If the thought of adding markup all throughout your data does not appeal, another possible solution is to define your data as a plain object, and have a little javascript function to render it on the page. Again, no viewer needed since the files render themselves.

Here is a rough example of a database.html

<head>
    <style>
        .hidden-frame {
            display: none;
        }
    </style>
    <script>
        // Your plain object data is here
        const data = [
            ['text of field 1', 'text of field 2', 'text of field 3', 'text of field n'],
            ['text of field 1', 'text of field 2', 'text of field 3', 'text of field n'],
            ['text of field 1', 'text of field 2', 'text of field 3', 'text of field n']
        ];
    </script>
</head>
<body>
    This is the data...
    <div id="viewer"></div>
    <script>
        //Your vanilla javascript render function is here
        document.getElementById('viewer').innerHTML = data.map(r => `<div>${r.join(', ')}</div>`).join('');
    </script>
</body>

If the idea of having a render function in your database is also problematic, you could leverage an iframe and get the data from the database through that and render it in the main html file.

Here is a rough example. The following manager.html has just one hardcoded "db file example" named filedb_example.html instead of a list because I am lazy. Your actual list can be as fancy as you want with the user experience there. You don't need a framework for that. Also, here again, no separate viewer.

<head>
    <style>
        .hidden-frame {
            display: none;
        }
    </style>
    <script>
        // This is the event handler that receives the data from the loaded db file
        const eh = (e) => {
            // The render function is in the main html file now
            document.getElementById('viewer').innerHTML = e.data.map(r => `<div>${r.join(', ')}</div>`).join('');
        }
        // We register the handler to receive messages from the db files when they load
        window.addEventListener('message', eh);
    </script>
</head>
<body>
    This is the manager, and bellow is the data I loaded from the db file.
    <div id="viewer">Nothing loaded yet!</div>
    <iframe class="hidden-frame" src="file:///c:/work/js/filedb_example.html" id="loader"></iframe>
</body>

Your html pseudo databases now look something like this filedb_example.html :

<head>
    <script>
        // This is where the actual data is set.
        const data = [
            ['text of field 1', 'text of field 2', 'text of field 3', 'text of field n'],
            ['text of field 1', 'text of field 2', 'text of field 3', 'text of field n'],
            ['text of field 1', 'text of field 2', 'text of field 3', 'text of field n']
        ];
        // As soon as it is loaded, it sends the data to the top frame
        window.top.postMessage(data, "*");
    </script>
</head>
<body>
    This is a db file and is not meant to be loaded directly :P
</body>

If you want to keep your Manager.html and Viewer.html separate, you can create a dedicated Viewer.html and simply use a query parameter to pass to it the file you want to view like, but you will probably need to url-encode your file path and use front slashes. Example link file:///Viewer.html?file_db=c%3A%2Fwork%2Fjs%2Ffiledb_example.html

A rough viewer would be something like this :

<head>
    <style>
        .hidden-frame {
            display: none;
        }
    </style>
    <script>
        // A function to extract the query parameters
        const params = new Proxy(new URLSearchParams(window.location.search), {
          get: (usp, p) => usp.get(p),
        });        

        // The same rendered
        const eh = (e) => {
            document.getElementById('viewer').innerHTML = e.data.map(r => `<div>${r.join(', ')}</div>`).join('');
        }
        window.addEventListener('message', eh);
    </script>
</head>
<body>
    This is the viewer, and below the data from the file I loaded.
    <div id="viewer"></div>
    <iframe class="hidden-frame" id="loader"></iframe>
    <script>
        // Now that the viewer is loaded, we load the database file
        document.getElementById('loader').src = `file:///${params.file_db}`;
    </script>
</body>

So there you go, options.

Answer 2

You can check the FileSystemDirectoryEntry API in javascript it allows your app to access a local directory here is a link to the mozilla documentation page https://developer.mozilla.org/en-US/docs/Web/API/FileSystemDirectoryEntry

Here is an example on how to use this there are a lot of drawbacks as this is stil experimental features and chrome does not let you access the api if you open the file from the file explorer instead of serving it, to make this work you will have to launch chrome with this flag --allow-file-access-from-files or serve the file with something like live server

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="explorer">
    </div>
    <button id="open">Sync</button>
    <div id="content"></div>
    <script>
        const $ = (s, e = document) => e.querySelector(s);
        const e = (e) => document.createElement(e);
        const getDb = async () => {
            const dir = await window.showDirectoryPicker();
            let it = dir.entries();
            let entry = await it.next();
            while (entry.done === false) {
                const [fileName, fileHandle] = entry.value;
                const fileInAppDir = await rootAppDir.getFileHandle(fileName, { "create": true });

                const fileData = await fileHandle.getFile();
                const writable = await fileInAppDir.createWritable();

                await writable.write(fileData);
                await writable.close();

                $('#explorer').appendChild(e('div')).innerText = fileName;
                entry = await it.next();
            }
        }

        const getAppFiles = async () => {
            for await (const handle of rootAppDir.values()) {
                $('#explorer').appendChild(e('div')).innerText = handle.name;
            }
        }

        const showFileContents = async (fileName) => {
            const fileHandle = await rootAppDir.getFileHandle(fileName);
            const file = await fileHandle.getFile();
            const reader = new FileReader();
            reader.onload = function (event) {
                $('#content').innerText = event.target.result;
            };
            reader.readAsText(file);
        }

        let rootAppDir;

        const main = async () => {
            rootAppDir = await navigator.storage.getDirectory();
            await getAppFiles();

            $('#explorer').addEventListener('click', async (e) => {
                const fileName = e.target.innerText;
                await showFileContents(fileName);
            });

            $('#open').addEventListener('click', getDb);
        }

        main();
    </script>
</body>

</html>