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-06T14:27:17.160

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.

@ChrisChudzicki Yes, they are different. The first `e` is [jQuery event object](https://api.jquery.com/category/events/event-object/). The second `e` is [load event object](https://developer.mozilla.org/en-US/docs/Web/Events/load). — trafalgarx, Oct 19 '16 at 08:06

score 8 · Answer 2 · answered Apr 27 '18 at 21:58

8

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 '18 at 21:58

Aymon Fournier

4,323
12
42
59

score 2 · Answer 3 · edited Oct 27 '16 at 07:01

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.

strange, fiddle reverted back to the old version. Fixed now. — , Aug 06 '12 at 14:45
return is a keyword that I believe was being mentioned here. The readFile function will always return 'empty' — Urasquirrel, May 16 '16 at 23:53

score 1 · Answer 4 · answered Feb 19 '15 at 10:30

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>

HTML5 FileReader how to return result?

4 Answers4

Linked