File System Access API - open/read a file without using showOpenFilePicker()

Question

I wonder if there is a solution to open only one file directly without using showOpenFilePicker() function?

I don't want to let other users to pick a different file but API would use only the correct one. I have a root and name of file.

FROM:

this.getFileAsText = async function () {
        var [fileHandle] = await window.showOpenFilePicker();
        var fileData = await fileHandle.getFile();
            return text = await fileData.text();
    }

TO:

this.getFileAsText = async function () {
        var [fileHandle] = await directFile(myPath/test.txt);
        var fileData = await fileHandle.getFile();
            return text = await fileData.text();
    }

thanks

Claude · Accepted Answer · 2024-02-24 19:16:07Z

For security reasons this cannot be done in a normal browser. You wouldn't want a site you visit on the internet be able to just open a file on your local computer. There are only three ways to get to files on the local file system, one is through the File System Access API, the other through the HTML upload button, the final one if files are dragged into the browser. All have in common that the user has to select exactly which files they want to make available to the website.

The "correct" solution here depends on what you're trying to make; you could for instance make a browser extension if your webapp is for a small number of people. Or you could use Origin Private File System if you want to save a file from your webapp, and load it later.

However if your idea is for a website that random people visit, and the website wants to get access to a local file on that user's file system, it is not going to work (again, for obvious reasons). (Rather, if you ever get this to work on any major browser, you should definitely tell them and probably get the largest payout ever from the browser's bug bounty program.

Matthew Davis · Accepted Answer · 2023-07-29 02:21:19Z

0

I tried looking for a solution in the File System Access API, but I could not find one. However, you may not want to use the File System Access API. If the file you are trying to open is a local resource for your app, you can use

fetch('myPath/test.txt')
    .then(response => response.text())
    .then(data => {
        // Here's your text file content
        this.theStuff = data;
    })
    .catch((error) => {
        console.error('Error:', error);
    });

The fetch method returns a promise the resolves to a Response object, whose text method will return a promise that resolves to the data in your file as a string. You can manipulate it however you choose at that point. See this documentation at MDN web docs: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

answered Jul 29, 2023 at 2:21

Matthew Davis

1

1 Comment

Orbit Over a year ago

Hello, thanks for help I think this is much better approach! It kind of works but I can not see any text from my file "test.txt" in a console or inner HTML...all works but seems like I can't get text from that file to be shown. Or it's like it's loaded empty file.

Collectives™ on Stack Overflow

File System Access API - open/read a file without using showOpenFilePicker()

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related