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?

score 0 · Answer 1 · edited May 23 '17 at 12:28

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 '17 at 12:28

Community

1
1

answered Apr 12 '14 at 14:38

phylax

2,034
14
13

Thank you. Red it just. Still don't understand how to restructure my code :( Can you give an example? – Sharikov Vladislav Apr 12 '14 at 14:49
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. – phylax Apr 12 '14 at 15:02
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. – Sharikov Vladislav Apr 12 '14 at 15:04
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. – phylax Apr 12 '14 at 15:09

score 0 · Answer 2 · answered Feb 19 '15 at 10:33

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>

Getting file contents via FileReader() JavaScript

2 Answers2