CODEWITHSUNDEEP
javascripthtmlfilereader
Muteking
Muteking

Reputation: 1513

No data being passed through FileReader in Javascript

I'm expecting some text data (given I load a .txt file) to be shown in the <p> element but nothing is actually passed.

function showData() {
    var file = document.getElementById('myFile');
    var data = file.files[0];
    var fileRead = new FileReader();

    fileRead.readAsDataURL(data);


    document.getElementById('out').appendChild(document.createTextNode(' ' + fileRead.result));
}
<p id = "out">The content of the file is</p>
<input type = "file" id = "myFile" style="margin-top:5%;">
<button id = "show" onclick="showData()">The result is</button>

Upvotes: 0

Views: 58

Answers (1)

georg
georg

Reputation: 214969

FileReader is asynchronous, therefore you have to set up a callback that will be invoked once the data has been read. Also readAsDataURL is not appropriate here, you want readAsText.

fileRead.onload = function() {
      document.getElementById('out').appendChild(document.createTextNode(' ' + fileRead.result));
}

fileRead.readAsText(data);

Upvotes: 3

Related Questions