HTML5 FileReader how to return result?

Question

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?

apsillers · Accepted Answer · 2012-08-06 14:27:17Z

56

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.

edited Aug 6, 2012 at 14:27

answered Aug 6, 2012 at 14:18

apsillers

116k18 gold badges248 silver badges249 bronze badges

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

2 Comments

Chris Chudzicki Over a year ago

Is there a difference between the two es?

trafalgarx Over a year ago

@ChrisChudzicki Yes, they are different. The first e is jQuery event object. The second e is load event object.

Aymon Fournier · Accepted Answer · 2018-04-27 21:58:54Z

10

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

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

answered Apr 27, 2018 at 21:58

Aymon Fournier

4,44312 gold badges46 silver badges61 bronze badges

Comments

icedwater · Accepted Answer · 2016-10-27 07:01:19Z

2

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.

edited Oct 27, 2016 at 7:01

icedwater

4,8943 gold badges39 silver badges54 bronze badges

answered Aug 6, 2012 at 14:12

user554180

2 Comments

user554180 Over a year ago

strange, fiddle reverted back to the old version. Fixed now.

Urasquirrel Over a year ago

return is a keyword that I believe was being mentioned here. The readFile function will always return 'empty'

websky · Accepted Answer · 2015-02-19 10:30:03Z

use case FileReader

<html>
    <head>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
        <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
        <script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
    </head>
    <body>
        <script>
            function PreviewImage() {
            var oFReader = new FileReader();
            oFReader.readAsDataURL(document.getElementById("uploadImage").files[0]);
            oFReader.onload = function (oFREvent) {
                var sizef = document.getElementById('uploadImage').files[0].size;
                document.getElementById("uploadPreview").src = oFREvent.target.result;
                document.getElementById("uploadImageValue").value = oFREvent.target.result; 
            };
        };
        jQuery(document).ready(function(){
            $('#viewSource').click(function ()
            {
                var imgUrl = $('#uploadImageValue').val();
                alert(imgUrl);
            });
        });
        </script>
        <div>
            <input type="hidden" id="uploadImageValue" name="uploadImageValue" value="" />
            <img id="uploadPreview" style="width: 150px; height: 150px;" /><br />
            <input id="uploadImage" style="width:120px" type="file" size="10" accept="image/jpeg,image/gif, image/png" name="myPhoto" onchange="PreviewImage();" />
        </div>
        <a href="#" id="viewSource">Source file</a>
    </body>
</html>

Collectives™ on Stack Overflow

HTML5 FileReader how to return result?

4 Answers 4

2 Comments

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related