How to read file in Java Script line by line from hardcoded path and name of the file?

Question

I would like to read file in Java Script. The best it would be to read line by line, but there is also possibility to read the whole file at once. Generally on the web there is quite a lot of implementations, but I would like to read a file in very simple way by entering, hardcoded path and file name in the Java Script code, not but any buttons or something like this. The pseudo code below:

<!DOCTYPE html>
<html>
<body>
    <script type="text/javascript">
        var file = FileReader("home/test.txt");//hardcoded path and name of the file
        var listOfLines = [];
        var line = file.readLine();
        while(line != eof) {
            listOfLines.push(file.readLine());
            file.readLine();
        }
    </script>
</body>
</html>

Is there such possibility to do something like this. Thank you.

JavaScript that runs in a webpage cannot access files on your local computer. If you're trying to access another file on the web server, you can do this with an Ajax request -- google "ajax requests". — Hayden Schiff, Feb 26 '18 at 18:19
@Occam'sRazor [FileReader](https://developer.mozilla.org/en-US/docs/Web/API/FileReader) — Thomas, Feb 26 '18 at 18:47

Giona Granata · Answer 1 · 2018-02-26T19:12:02.793

FileReader is working well and it is well supported, see:

https://caniuse.com/#search=FileReader

even IE has a partial support.

But it can read ONLY file returned from the user. You cannot read any file with an hardcoded path from the developer. Of course that is for security reasons, the javascript engine in the browser runs in a sandbox.

PS Also, to read big csv files from javascript, I suggest this library, that I used many times with success:

https://www.papaparse.com/

reference:

https://www.w3.org/TR/FileAPI/

https://www.w3.org/TR/FileAPI/#dfn-filereader

https://developer.mozilla.org/it/docs/Web/API/FileReader

score 0 · Answer 2 · answered Feb 26 '18 at 19:10

That would be a pretty big security hole, if your browser could simply read arbityry files from your filesystem. Think, every banner on the web could read configuation files of your OS, and stuff like that.

also check this question/answer: How to set a value to a file input in HTML?
slightly different question, same problem.

But if the client gives your app the file you should process, that's something different.

//use fetch() to get the file content
function fetchFile(file){
  const {name, lastModified, size, type} = file;
  return fetch(URL.createObjectURL(file))
    .then(response => response.text())
    .then(text => ({name, lastModified, size, type, text}));
}

//use a FileReader to get the content
function readFile(file){
  const {name, lastModified, size, type} = file;
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result);
    reader.onerror = reject;
    reader.readAsText(file);
  })
  .then(text => ({name, lastModified, size, type, text}));
}


let input = document.querySelector('input');
input.onchange = function(){
  const promises = [...input.files].map(fetchFile);  //fetch
  //const promises = [...input.files].map(readFile);  //FileReader

  Promise.all(promises)
    .then(files => {
      console.log(files);
    })
}

<input type="file" />

This is just a quick snippet. You'd have to check wether there are further security measures/obstacles due to the fact that a web page is accessing local files; but since this snippet is working, I'm confident that you're good.

How to read file in Java Script line by line from hardcoded path and name of the file?

2 Answers2

Linked