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!

• Bergi: If you are running the application from a local file, many browsers provide some way to access the local filesystem via ajax.
• Bergi: Would a file upload be acceptable, or does the file need to be read in the background when the application is loaded?
• Beau Bouchard: it seems what you are doing is pulling in data for display purposes. How is this data being stored?
• DoomageAplentty: 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.

Answer 1

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>

• DoomageAplentty: 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?

Answer 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>

• lxg: The question states that the solution must work without an internet connection. What would be the purpose of AJAX here?
• Elheni Mokhles: We don't need internet to use Ajax.
• lxg: Agreed, but what resource would you access with AJAX? AJAX needs a server, and in the above scenario ("self-contained") there's no server.
• Elheni Mokhles: You can acces any File with ajax even local ones. You may have probleme with security in google chrome.
• lxg: 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.