HTML5 Filereader always returns empty string?

I'm just learning how to use the filereader now, and I duplicated an example I found online to experiment with, but for some reason, the filereader always returns an empty string.

First, I have an HTML form for the user to select a file, which then calls the script:

<input type="file" id="filelist" onchange="selectfile()">

Here's the script:

function selectfile() {
        myFile = document.getElementById("filelist").files[0];
        reader = new FileReader();
        
        reader.readAsText(myFile);
    
        myResult = reader.result;
        
        alert(myFile.name);
        alert(myResult);
        alert(reader.error);
    }

I have tried this with a number of different text files I typed up in Notepad, and in every case the results are the same. I'm only ever submitting one file through the html form.

The 3 alerts are for testing.

It displays the file name correctly. It displays an empty string for the result. It displays NULL for the error so it's not getting an error.

I searched around to see if there was something obvious here already, but couldn't find anything that seemed to point me in the right direction.

Thoughts?

Solution

The FileReader object is not ready yet. You need to add an onload event listener to the reader and then make a call to the readAsText method. You can then access the file contents from inside the callback function.

MDN docs - https://developer.mozilla.org/en-US/docs/Web/API/FileReader/result

function selectfile() {
    myFile = document.getElementById("filelist").files[0];
    reader = new FileReader();

    reader.onload = () => {
        myResult = reader.result;

        alert(myFile.name);
        alert(myResult);
        alert(reader.error);
    };


    reader.readAsText(myFile); // only accessible when the FileReader is loaded
}

<input type="file" id="filelist" onchange="selectfile()">