Importing a plain-text file using HTML5 and JavaScript

Question

I'm new to JavaScript, so forgive me if the answer to this question is an obvious one.

I'm trying to set up an import function for a text-editor web-application.

My code is as follows:

function dataImport() {
    confirm("Are you sure you want to import the selected file? This will overwrite any data that is currently saved in the application workplace.");
    var fileReader = new FileReader();
    window.localStorage.setItem("AppData", fileReader.readAsText(document.querySelector("#import-selector").value));
};

And it should be activated by:

<input id="import-selector" type="file" /><button id="import-button" onclick="dataImport();">Import File</button>

Instead of writing the contents of the file to the localStorage, however, it merely writes the word 'undefined'. I take it some kind of error has happened, but I'm not sure what it is.

Thanks in advance for any help or advice.

Answer 1

I've never heard of a lick event in HTML. Maybe it's something new to HTML5 ;)

Try changing your onlick="... trigger to onclick="...

Maybe that will work?

---

Now that that's fixed, try this example: Chrome FileReader

I tried it, and it works flawlessly. It outputs the file contents into the error console.

Good luck!