HTML5 Filereader always returns empty string?

Question

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:

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?

user_5860060 · Answer

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
        }

HTML5 Filereader always returns empty string?

1 Answers