How to load file content to variable using FileReader

Question

I would like to seek some help please regarding loading txt file content to variable using input element in javascript.

So i am working with java script file separate from html file, and when the user click on button to load the file from the html side as below:

<input type="file" id="selectedFile" accept=".txt" />

it fires the onchange event as below

document.getElementById('selectedFile').addEventListener('change', function () {
    var fr = new FileReader();
    fr.onload = function () {
        document.getElementById('display').textContent = fr.result;
        console.log(fr.result);
    }
    fr.readAsText(this.files[0]);
})

basically if i console log the fr.result as in the code up there, i can see the content with no issues, and also i have div element with id "display" and content gets updated no issues. however i am unable to get the fr.result to be stored into global variable and use it later on in my code. I tried the below code:

let test = "";
document.getElementById('selectedFile').addEventListener('change', function () {
    var fr = new FileReader();
    fr.onload = function () {
        document.getElementById('display').textContent = fr.result;
        test = fr.result;
    }
    fr.readAsText(this.files[0]);
})
console.log(test);

but the test variable in console comes out empty and runs even before i choose the file with input element. Any advices about what i missing here, and how i can get the file content using same method to be stored in variable? Thanks!

Answer 1

I tried it it works like this, it was maybe because your event listener function was an anonymous function, and you can't call this in anonymous function

<input type="file" id="selectedFile">
<p id="display"></p>
<script>
var fr = new FileReader();
let test;
document.getElementById('selectedFile').addEventListener('change', x);

    
function x() {
fr.onload = ()=>{
document.getElementById('display').innerText = fr.result;
console.log(fr.result);
test = fr.result;

}
fr.readAsText(this.files[0]);

}   


console.log(test);</script>