how to read text file in folder with javascript

June 29, 2022

I have a folder structure like this

index.html
file.txt

in the index.html I have a script that wants to read the file.txt and assign it to a variable, say x.

async function loadFile(file) {
    let text = await file.text();
    console.log(text);
    return text
}

var x = loadFile("file.txt")

but this returns an error

main.js:35 
        
       Uncaught (in promise) TypeError: file.text is not a function
    at loadFile (main.js:35:27)
    at main.js:39:13

what to do? I just want to assign file.txt content to a variable.

>Solution :

JavaScript in browser doesn’t give you direct access to file system.
What you did is just pass a string to your function and call text() on it. Sadly it doesn’t work like that.

Here are two workarounds I know of:

1. fetch api

If you have an http server serving your files then you make a request using fetch() to obtain its content in JS. Read the docs here :

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

Note that it won’t work on pages loaded with file:// URI scheme. You need http(s). If you have python installed run python -m http.server 8000 in directory containing files to be served.