Simple javascript program reading a file

Question

I am writing a simple script that will read a .txt file. I had quite a bit of trouble with making it work, now i would like to upgrade it. Basicly i am looking for an option that would halt the program until file is opened and read. I tried putting a while() waiting for some variable to change, but that while halts the whole program - makes it impossible to click on open file.

HTML:

<html>

<head>
</head>

<body>
<input type="file" id="fileInput">  
<script src="1dn.js"></script>
</body>

</html>

Javascript:

var string;

window.onload = function() {

var fileInput = document.getElementById('fileInput');   

fileInput.addEventListener('change', function(e) {      

    var file = fileInput.files[0];      
    var reader = new FileReader();

    reader.onload = function(e) {                   

        string = reader.result;             
        alert(string);

    }

    reader.readAsText(file);

});

}

*** wait here until file is opened and read

*** do some other stuff

You could use an AJAX call to check if the file exists and then in the `success` callback function, read your file async. This will prevent freezing up the browser — TayTay, Oct 29 '15 at 19:29
No, you cannot halt javascript execution. Just do all the `other stuff` in the onload callback. — Bergi, Oct 29 '15 at 19:35

ghybs · Answer 1 · 2015-10-30T17:33:17.347

Well, if you wrap in a function all the code that must be executed only after file is opened and read, it will be parsed but not executed before you call the function.

Then call your function at the end of your callback (the function given in argument of your event listener).

EDIT: sorry the place I had put restOfCode() was unclear. It must be inside the onload callback.

You will not be able to get rid of the event listener on file input, because the browser will actually prevent you from accessing any client side local file if it does not come from a user's action. This is a security measure to prevent malicious websites from accessing visitors' files without their consent.

Result:

var string;

window.onload = function() {

    var fileInput = document.getElementById('fileInput');   

    // You need user input for the browser to allow you reading local files.
    // This is a security measure to protect the user.
    fileInput.addEventListener('change', function(e) {      

        var file = fileInput.files[0];      
        var reader = new FileReader();

        reader.onload = function(e) {                   

            string = reader.result;             
            alert(string);

            // At this point only you are sure your file is opened and read.
            restOfCode();
        }

        // Open the file and start reading.
        reader.readAsText(file);
    });
}

// *** wait here until file is opened and read
// the function below is parsed but not executed, since it is not called

function restOfCode() {
    //*** do some other stuff
}

jperezov · Answer 2 · 2015-10-29T19:38:32.063

-1

You can use a library that adds a when function, or you can implement one yourself in pure JS if you prefer:

function when(conditionFunc, execFunc, interval) {
    if (conditionFunc()) {
        execFunc();
    } else {
        setTimeout(function() { when(conditionFunc, execFunc, interval);}, interval);
    }
}

You can read more about the function here. Use it like so:

when(function() {
    return string;
}, function() {
    // do stuff
}, 500);

If you want // do stuff to execute whenever string changes, just change return string; to a condition that compares the new string value with the old string value.

edited Oct 29 '15 at 19:38

answered Oct 29 '15 at 19:32

jperezov

3,041
1
20
36

Thank you all for your answers ! I am already using Ghybs solution, meaning i call function from onload. I am in a bit of a hurry so i guess i will keep this solution (when solution looks good but i am simply out of time). Since the name and location of .txt file will always be the same, what if instead of looking for it i just write name into the code ? Then i wouldnt have to wait for event because function would always start right away. Sadly all attempts to transform this function that way failed, i just started with js :/ – Jessica Oct 29 '15 at 20:36
Browsers will prevent you from directly trying to read a txt file on your visitor's local file system. The visitor must trigger the file input. See my edited answer for further details. – ghybs Oct 30 '15 at 17:35

Simple javascript program reading a file

2 Answers2