Parse a local file to an array using JavaScript

Question

I am trying to read a local file and have each line as an index in an array using JavaScript. I have been searching for the past 20 minutes and either I'm stupid or there really isn't an answer that pertains to my problem (...but it's probably the former :P). I am really new to JavaScript so if you have an answer could you please comment the code just to I know what's going on?

Also, from the searching I've done on the internet some people said JavaScript can't read local file for security reasons so if that is correct is there another language I can use? I'm a bit familiar with PHP if that is an option, which I doubt it is.

EDIT

As per thg435's question, I'll explain what I am trying to accomplish.

My project is to analyze a BUNCH of water quality data that has been collected by the Ontario gov't (which I've done) and display it in some way. I have chosen to display it on a webpage using the Google Maps API. I currently have a file of chemicals that were found. Each line is a different chemical. I would like to read the file in an array then create an option menu displaying the chemicals in the array.

Also, the local file I would like to read will the be the same name and location all the time. I have seen people have boxes where the user clicks and chooses their file or to drag and drop but that's not what I'm looking for.

---

I don't think I explained this properly. I have a file in the same directory as my HTML and JavaScript files that contains words. Example:

Line 1: "Iron" Line 2: "Aluminum" Line 3: "Steel"

etc...

I would like to read the file and parse each line into a different index in an array. I don't want the user to be able to choose which file to read using the <input ... /> thing.

Answer 1

You're going to want to take a look at the FileReader API. This should allow you to read the text of a local file via readAsText(). This won't work in every browser but should work in all modern browser. You can see which browsers support it here.

Example:

<input id="file" type="file" />

var filesInput = document.getElementById("file");
filesInput.addEventListener("change", function (event) {
    var files = event.target.files;
    var file = files[0];
    var reader = new FileReader();
    reader.addEventListener("load", function (event) {
        var textFile = event.target;
        alert(textFile.result);
    });
    reader.readAsText(file);
});

It's not possible to invoke the FileReader API without user interaction. Consequently, your user would have to select whatever file to load in order for it to be read in pure JS. Since I'm assuming this will be up on a server, why not just put the list of chemicals also up on the server and GET the JSON encoded array of the results. Then you can decode them with Javascript.

Answer 2

You can access local files in 2 ways that I know of. The first way is making the user drag-and-drop the files onto the page, and using an <input type="file"> tag.

For the former, you would need to do the following:

addEventListener('dragover', function(e){e.preventDefault();});
addEventListener('drop', function(e) {
    eventHandler.call(e.dataTransfer||e.clipboardData);
    e.preventDefault();
});

For the latter, you'd need to add an event listener for the change event on the input:

document.getElementById('upload').addEventListener('change', eventHandler)

And for both, you'd need to have this as a basic callback function:

function eventHandler() {
    var file = this.files[0]; //get the files
    var reader = new FileReader(); //initiate reader
    reader.onloadend = callbackFn; //set event handler
    reader.readAsText(file); //initiate reading of files
    if (this.id) { //only run if this is the input
        var id = this.id; 
        this.outerHTML = this.outerHTML; //this resets the input
        document.getElementById(id).addEventListener('change', eventHandler); //reattach event handler
    }
    function callbackFn(e) {
        document.getElementById('output').value = e.target.result; //output it to a textarea
    }
}

Here is a demo where the text contents (that what you see when opening it in notepad) of any file you drop in it, or any file you select from the input, is put in the textarea.

For more information, see https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications.