Getting file contents via FileReader() JavaScript

Question

I am trying to get file contents with FileReader(), JavaScript.

I find this answer: https://stackoverflow.com/a/21962101/2898694

As @Markasoftware said in comments, I am trying to save result to var.

function readSingleFile(evt) {
        //Retrieve the first (and only!) File from the FileList object
        var myFile = evt.target.files[0];
        var reader = new FileReader();
        var result;
        reader.readAsText(myFile);
        reader.onload=function(){ 
             result = reader.result; 
             console.log(result); // works
        }
        console.log(result); // not works
    }

If I am trying to see content in onload handler all fine, but out of it I can't see result. Why?

Community · Accepted Answer · 2017-05-23 12:28:30Z

0

Because onload runs asynchrone. console.log(result); // not works is executed before the onload event has fired.

More on that: How do I return the response from an asynchronous call?

edited May 23, 2017 at 12:28

CommunityBot

11 silver badge

answered Apr 12, 2014 at 14:38

phylax

2,09615 silver badges16 bronze badges

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

4 Comments

Sharikov Vladislav Over a year ago

Thank you. Red it just. Still don't understand how to restructure my code :( Can you give an example?

phylax Over a year ago

It depends on what you want to achieve. You need the result as input to another function? Call the function from within the event handler with result as parameter.

Sharikov Vladislav Over a year ago

Yes. I have to call another functions with this result, but I don't want to call another function, just after file is readed. I want to read file, show output, if all fine, press another button and call another function.

phylax Over a year ago

Then your function which shows the output has to be called from the event handler. The result can then be stored in a global variable and be used as you like. Notice that the event handler for the button press also is asynchron.

websky · Accepted Answer · 2015-02-19 10:33:24Z

example

<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

Getting file contents via FileReader() JavaScript

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related