Need Access to Local Text File via JavaScript

Question

I am working on a project which must be self contained and able to run without an internet connection. It's is for video presentations and I need to import a .txt file which includes chapters and loop information such as Chapter Title, Looping point and chapter end point (both in frames). However, there is no client-side include script to include a text file.

What would be the best way for me to store or access a local text file so that I can iterate over it and build my chapters object? HTML5 local storage? Hacking by including a hidden iframe that loads the text file then grab that body content via JavaScript? Any help on this issue would be greatly appreciated.

Thanks!

If you are running the application from a local file, many browsers provide some way to access the local filesystem via ajax. — Bergi, Oct 06 '14 at 21:28
Would a file upload be acceptable, or does the file need to be read in the background when the application is loaded? — Bergi, Oct 06 '14 at 21:29
it seems what you are doing is pulling in data for display purposes. How is this data being stored? — Beau Bouchard, Oct 06 '14 at 23:13
The goal of the data is to have the chapters information entered into excel then saved as a text file. I want to read that text file, iterate over it, and build my chapters information object in JavaScript which would allow me to display chapter titles, descriptions, and such. — Yuschick, Oct 07 '14 at 12:55

score 3 · Answer 1 · edited May 23 '17 at 11:52

For your question "Need Access to Local Text File via JavaScript" is very similar to this question here: Local file access with javascript

The Answer is there really isn't a good way to access a local file if you are using javascript in a browser. If its just a text file on the same machine without a http/webserver you may run into some problems, as in javascript the ability to read a local file is disabled by default in most browsers. In chrome you can disable this security-feature by adding the following flag when starting the browser from command-line.

--disable-web-security

If your data is structured json, xml, csv, you can bring it in using an AJAX call if the file is hosted on a server accessible with HTTP. Without using an http ajax call, another possible solution as mentioned in the question link above:

Just an update of the HTML5 features http://www.html5rocks.com/en/tutorials/file/dndfiles/ This excellent article will explain en detail the local file access in Javascript. Summary from the mentioned article:

The spec provides several interfaces for accessing files from a 'local' filesystem:

File - an individual file; provides readonly information such as name, file size, mimetype, and a reference to the file handle. FileList - an array-like sequence of File objects. (Think or dragging a directory of files from the desktop). Blob - Allows for slicing a file into byte ranges. -- @Horst Walter

As shown below you can have a "file upload" input selection, and simply have your file path as a default option for the input"

<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>

<script>
  function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object

    // files is a FileList of File objects. List some properties.
    var output = [];
    for (var i = 0, f; f = files[i]; i++) {
      output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
                  f.size, ' bytes, last modified: ',
                  f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
                  '</li>');
    }
    document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
  }

  document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>

After doing some reading on this, I am thinking this should work. Is there any way that you can think of that would allow me to dynamically pass the file name to handleFileSelect as opposed to having it triggered by a file input? — Yuschick, Oct 07 '14 at 15:20

Elheni Mokhles · Answer 2 · 2014-10-06T21:17:52.893

2

You can use AJAX to read the text file.
with javascript you can't edited, you can only read it.
an example will be :
1- create a text file "page.txt"
2- create a html page with this code

<!DOCTYPE html>
<html>
<body>
<script>
    text = new XMLHttpRequest();
    text.open("GET","page.txt",false);
    text.onload = function(){
        document.write(text.responseText);
    }
    text.send();
</script>
</body>
</html>

edited Oct 06 '14 at 21:17

answered Oct 06 '14 at 20:35

Elheni Mokhles

3,801
2
12
17

2

The question states that the solution must work without an internet connection. What would be the purpose of AJAX here? – lxg Oct 06 '14 at 20:37
1

We don't need internet to use Ajax. – Elheni Mokhles Oct 06 '14 at 20:45
Agreed, but what resource would you access with AJAX? AJAX needs a server, and in the above scenario (“self-contained”) there's no server. – lxg Oct 06 '14 at 20:48
You can acces any File with ajax even local ones. You may have probleme with security in google chrome. – Elheni Mokhles Oct 06 '14 at 20:50
1

AJAX is based on HTTP, HTTP needs a web server. There's no webserver in “self-contained”. Even if there would be a webserver running on localhost, this would not be a self-contained (i.e. portable) solution. – lxg Oct 06 '14 at 20:52
create a file called "page.txt" then a html page with this code. and don't run a server. tell me the result. – Elheni Mokhles Oct 06 '14 at 21:03
Ok, I see what you're doing. Your example does work when served by a webserver, but not if loaded as a `file:/` ressource. Still, it may be a valid solution to the OP's question. Could you update your answer with that example you've just posted? – lxg Oct 06 '14 at 21:14
@lxg: Ajax doesn't necessarily need to retrieve the requested resource via HTTP - you only would get cross-origin problems when using a different protocol, but those can be circumvented sometimes. – Bergi Oct 06 '14 at 21:32
When I try running this example, I still receive the cross origin request errors preventing me actually loading the file. – Yuschick Oct 07 '14 at 12:58

Need Access to Local Text File via JavaScript

2 Answers2