javascript: how to parse a FileReader object line by line

Question

I have a javascript/HTML5 page that I want to use to pull in a file and check each line to see whether it is greater than 240 chars:

EDIT: I have things parsing correctly now, but they're not rendering correctly. Here's my updated code:

<!DOCTYPE HTML>

<html>

    <head>

        <link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
        <link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">

    </head>
    <body>

    <input type="file" id="input" name="file" multiple />
    <br>
    <output id="files"></output>

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

        <script>

            if (window.File && window.FileReader && window.FileList && window.Blob) {
                // Great success! All the File APIs are supported.
            } else {
                alert('The File APIs are not fully supported in this browser.');
            }


            function handleFileSelect(evt) {
                var files = evt.target.files; // FileList object


                // files is a FileList of File objects. List some properties.
                var output = [];
                for (var i = 0, f; f = files[i]; i++) {

                    var reader = new FileReader();

                    reader.onload = function(e) {
                            // Print the contents of the file
                            var text = e.target.result;

                            var lines = text.split(/[\r\n]+/g); // tolerate both Windows and Unix linebreaks

                            for(var i = 0; i < lines.length; i++) {
                                if (lines[i].length > 240){
                                    output.push('<li>' + lines[i] + '<br>');
                                }
                            }
                    };

                    reader.readAsText(f,"UTF-8");

                }
                document.getElementById('files').innerHTML = 'Paths with more than 240 characters: <br><ul>' + output.join('') + '</ul>';
            }

            document.getElementById('input').addEventListener('change', handleFileSelect, false);


        </script>
    </body>
</html>

I can run a trace and see that the output variable is populating correctly, but all that I'm getting for output is: Paths with more than 240 characters: without the output.join() part rendering correctly -- any thoughts?

AKX · Accepted Answer · 2013-03-08 05:52:15Z

10

The obvious way (if you can tolerate reading the file all at once) is to split it by newlines.

var lines = text.split(/[\r\n]+/g); // tolerate both Windows and Unix linebreaks
for(var i = 0; i < lines.length; i++) { /* do something with lines[i] */ }
// or in modern JavaScript,
lines.forEach(function(line) { /* ... */ });

answered Mar 8, 2013 at 5:52

AKX

171k16 gold badges146 silver badges228 bronze badges

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

2 Comments

fox Over a year ago

why would you want to use the forEach constructor like that?

AKX Over a year ago

It's not a constructor, it's a method on Arrays... Either way, it's just a matter of personal preference.

dfsq · Accepted Answer · 2013-03-08 06:20:14Z

3

I guess you should put

document.getElementById('files').innerHTML = 'Paths with more than 240 characters: <br><ul>' + output.join('') + '</ul>';

inside onload callback. Seems that output is not yet populated when you try to use it. So:

reader.onload = function (e) {
    // all your code ...

    // now can safely print output
    document.getElementById('files').innerHTML = 'Paths with more than 240 characters: <br><ul>' + output.join('') + '</ul>';
};

answered Mar 8, 2013 at 6:20

dfsq

193k26 gold badges244 silver badges261 bronze badges

2 Comments

fox Over a year ago

that did it! I guess it was a local scope issue?

dfsq Over a year ago

@fox No. Reading file content is asynchronous operation, so by the time you were trying to use output it had not yet been populated.

Collectives™ on Stack Overflow

javascript: how to parse a FileReader object line by line

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related