Help with PWA to access local files

[Mud]

Hi - I’ve written an HTML/JavaScript/CSS program that builds a file of metadata about other image files in a folder. If I have the HTML file in the same folder with all the images, it can access/display all the images. If I have the HTML file on a web server, it cannot find the image files on my local disk (Javascript intentionally has limitations around accessing the local file system). When I make the HTML into a PWA and install it to my local system, the PWA cannot find the image files on my local disk.

I CAN do this (i.e., this is not the problem): The PWA can open up a file dialog so I can specify which metadata file to use (which new file to create, or which existing file to load).

I CANNOT do this: have the PWA look at all the files in the folder, and put the file names into an array.

I need one of the following (and would appreciate any help):

1. A way to allow a PWA to access local files in a particular folder (without asking the user which folder. It would be cool if the PWA installation could specify which folder, or some other way).

2. An easy way to install the HTML/CSS/JavaScript file to a local system. I’ve been trying PWA because the installation is so simple. But if we can identify another way to install, that’s OK too. I wrote up steps about how to install it manually and it came to about 20 steps (WAY too complex - e.g., browse to URL, right click and view page source, cntl-c copy the source, create a local folder, create a local file in the folder, ctl-v paste in the copied source code, then more steps to setup a desktop shortcut - way too complex). Note: I’m new to PWA, so I hope there’s PWA options that could enable this - but maybe there aren’t any.

3. Some other way to easily install the HTML/Javascript/html onto a local system.

Another hint - when the html/Javascript/CSS is in a local folder, it can “see” all the image files by their relative file paths. When running from a webserver, or when installed as a PWA, it can’t seem to figure out relative file names.

Thanks for your help.

[iamkajal]

you should try this. It works for me.

let fileHandle;butOpenFile.addEventListener(‘click’, async () => { // Destructure the one-element array. [fileHandle] = await window.showOpenFilePicker(); // Do something with the file handle.});

[Mud]

I’m still pretty “elementary” with Javascript, so your answer is beyond what I currently understand. But I’ll do some Googling to try to figure out more about event listeners (I’m more at the onclick level), await, and showOpenFilePicker. With the help you provided to point me in these directions, maybe I’ll be able to figure it out. Thanks! (If I make no progress, I’ll probably return to ask for more help).