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.

Google Chrome, the dev channel.

木川炎星
– 木川炎星

2010-11-24 06:21:54 +00:00
Commented Nov 24, 2010 at 6:21 — 木川炎星
– 木川炎星, Commented Nov 24, 2010 at 6:21

Community · Accepted Answer · 2017-05-23 11:47:40Z

2

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!

edited May 23, 2017 at 11:47

CommunityBot

11 silver badge

answered Nov 24, 2010 at 5:11

Blender

300k55 gold badges462 silver badges511 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

木川炎星 Over a year ago

Woah, that was stupid of me. Now I'm finally getting an error in the console! I've corrected the question to suit.

木川炎星 Over a year ago

Hmm. I've repurposed the script you mentioned but I get this error: "Uncaught TypeError: Cannot read property 'length' of undefined". I've put the customized script online here: jsfiddle.net/CwfSy

木川炎星 Over a year ago

Nevermind. For some reason it didn't like me having the script execute onclick, but when I set the input tag to do it onchange it worked.

Collectives™ on Stack Overflow

Importing a plain-text file using HTML5 and JavaScript

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related