Question

103

HTML5 FileReader how to return result?

rated 0 times [ 110] [ 7] / answers: 1 / hits: 78445 / 12 Years ago, mon, august 6, 2012, 12:00:00

I use JS FileReader. I want to get result after file reading operation and work with this data. FileReader is asynchronous and I don't know when result is ready. How to get it done right?

$(document).ready(function(){

    $('#file_input').on('change', function(e){

        var res = readFile(this.files[0]);



        //my some manipulate with res



        $('#output_field').text(res);

    });

});



function readFile(file){

    var reader = new FileReader(),

        result = 'empty';



    reader.onload = function(e)

    {

        result = e.target.result;

    };



    reader.readAsText(file);



    //waiting until result is empty?



    return result;

}

http://jsfiddle.net/ub22m/4/

It's show empty.

How to wait until result is empty?
Another way?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

taliac

Add To Favorites

Follow

Total Points: 84

Total Questions: 114

Total Answers: 114

Location: Morocco

Member since Fri, May 22, 2020

4 Years ago

taliac questions

1 defaultLocale is not keeping default lang in Next.js i18n

Sun, Mar 21, 21, 00:00, 3 Years ago

1 Dynamic Imports: Am I missing something?

Tue, May 12, 20, 00:00, 4 Years ago

1 React testing-library - Testing a promise that set states in the first useEffect hook

Mon, May 4, 20, 00:00, 4 Years ago

1 jest comparing objects . string

Mon, Jan 13, 20, 00:00, 4 Years ago

1 How to place floating action button in bottom right in React Native

Sat, Nov 30, 19, 00:00, 5 Years ago

View All

answered 12 Years ago manuel · Accepted Answer

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.