Unable to read external text file JS

Hi i need help for JS code. i need to access a local text file from my computer for read purpose. I already try Fetch, XMLHttpRequest but still not able to read the file. Any help would be great. Thanks :smile:

Hi!
Did you mean a FileReader?

Here’s an article that might help…

https://50linesofco.de/post/2019-07-05-reading-local-files-with-javascript

You need to explain what you’re trying to do a little bit more. What code have you tried, how are you trying to load the file, and for what purpose? At the minute there isn’t enough information to provide specific help.

Sounds like you’re looking for this? FileSystem - Web APIs | MDN

There shouldn’t be anything preventing you from getting the file content using fetch. Did you use the .text() method? Did you provide the correct path to the file?

const out = document.querySelector('#output');

async function getText() {
  const res = await fetch('test.text');
  const text = await res.text();
  console.log(text);
  out.textContent = text;
}

getText();

@lasjorg
With this method, it only access a file which is in the directory and not outside it. ex : /tmp/my_file.cfg

async function getData(){
      const response = await fetch(../my_file.cfg);
      var data = await response.text();
      return data;
} 
var ret_val = getdata();

Use a string inside fetch for the path.

root
  js/main.js
  text/test.text
await fetch('../text/test.text')

or just

await fetch('/text/test.text')

@DanCouper

function getDoc()
        {
            var rawFile = new XMLHttpRequest();
            rawFile.open("GET", "file:///tmp/my_file.cfg", true);
            rawFile.onreadystatechange = function ()
            {
                if(rawFile.readyState === 4)
                {
                    if(rawFile.status === 200 || rawFile.status == 0)
                    {
                        var allText = rawFile.responseText;
                        console.log(allText);
                        return allText;
                    }
                }
            }
            rawFile.send(null);
        }

var ret_val = getDoc();

It only have access to the directory. localhost/tmp/my_file.cfg and not /tmp/my_file.cfg.

I used it still it only search for the file in its directory and not in /tmp/my_file.cfg

The error : not found in localhost/tmp/my_file.cfg

Is the temp folder inside the root folder? Also, do not use the file protocol.

Edit: If it isn’t in the root. Why do you need to access a file outside the root folder? What is the actual use case here, what are you trying to do?

Also, remember this code is not made to just run from your PC, it is meant to run from a server.

The tmp folder is an external folder and the file have all the permission needed to read or write. All the config is in the cfg file and i created a web interface to easily manage it.

See my edited post. What makes you think the server this code will eventually run on will have that folder in that location with that content? Can you please explain what it is you are trying to do here?

You can’t directory traverse out of the root folder. It doesn’t matter how many ../ you add to the path, it will still just be the root folder. In fact, if you were trying to get to the root on a server but you didn’t know how many steps you had to take, you would just spam a bunch of ../ it wouldn’t matter if you had too many as long as you had enough you would end in the root.

Why do you not just put this folder/file inside the root folder?

1 Like

i can’t put it in the root folder as there’s another script using the config file. instead of every time, go through the file to make changes, i design a web interface to facilitate it.

i hosted all the web pages in locally. Just not able to get the config file from the external folder.

I don’t think you can access local files programmatically outside of the root like that. But @parvathy0 gave you a link above to the FileReader object which will allow you to do what you want to do. The FileReader method works because it requires the user to actively select the file they want to read in from their local filesystem. So this option requires you to actively choose the file from the file selector dialog.

You could try creating a symbolic link to the config file in your web app’s root directory. I’m not sure if this will be allowed though. I’ve never tried it.

I try the symbolic link but i’m not able to make changes via my web app but if work well when i do it manually via terminal.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.