HTML5 FileReader how to return result?

Reading happens asynchronously. You need to provide a custom onload callback that defines what should happen when the read completes:

$(document).ready(function(){    $('#file_input').on('change', function(e){        readFile(this.files[0], function(e) {            // use result in callback...            $('#output_field').text(e.target.result);        });    });});function readFile(file, onLoadCallback){    var reader = new FileReader();    reader.onload = onLoadCallback;    reader.readAsText(file);}

(See the Fiddle.)

Note that readFile does not return a value.  Instead, it accepts a callback function, which will fire whenever the read is done. The $('#output_field').text operation is moved into the callback function. This ensures that that operation will not run until the reader's onload callback fires, when e.target.result will be filled.

Programming with callbacks is a bit difficult to get right at first, but it is absolutely necessary for implementing advanced functionality.

Use a Promise to wrap FileReader and then use await to get the results:

https://blog.shovonhasan.com/using-promises-with-filereader/

Here's the javascript:

$(document).ready(function() {    $('#file_input').on('change', function(e) {        function updateProgress(evt) {            if (evt.lengthComputable) {                // evt.loaded and evt.total are ProgressEvent properties                var loaded = (evt.loaded / evt.total);                if (loaded < 1) {                    // Increase the prog bar length                    style.width = (loaded * 200) + "px";                }            }        }        function loaded(evt) {            // Obtain the read file data                var fileString = evt.target.result;            // Handle UTF-16 file dump            $('#output_field').text(fileString);        }        var res = readFile(this.files[0]);        var reader = new FileReader();        reader.readAsText(this.files[0], "UTF-8");        reader.onprogress = updateProgress;        reader.onload = loaded;    });});function readFile(file) {    var reader = new FileReader(),        result = 'empty';    reader.onload = function(e) {        result = e.target.result;    };    reader.readAsText(file);    return result;}

And of course, the HTML portion:

<input type="file" id="file_input" class="foo" /><div id="progBar" style="background-color:black;width:1px;"> </div><div id="output_field" class="foo"></div>

Seems to work for *.txt files.

See this fiddle.