title: javascript: how to parse a FileReader object line by line
body: <p>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:</p>
  
  <p>EDIT: I have things parsing correctly now, but they're not rendering correctly. Here's my updated code:</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  
  &lt;html&gt;
  
      &lt;head&gt;
  
          &lt;link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet"&gt;
          &lt;link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet"&gt;
  
      &lt;/head&gt;
      &lt;body&gt;
  
      &lt;input type="file" id="input" name="file" multiple /&gt;
      &lt;br&gt;
      &lt;output id="files"&gt;&lt;/output&gt;
  
          &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"&gt;&lt;/script&gt;
  
          &lt;script&gt;
  
              if (window.File &amp;&amp; window.FileReader &amp;&amp; window.FileList &amp;&amp; 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 &lt; lines.length; i++) {
                                  if (lines[i].length &gt; 240){
                                      output.push('&lt;li&gt;' + lines[i] + '&lt;br&gt;');
                                  }
                              }
                      };
  
                      reader.readAsText(f,"UTF-8");
  
                  }
                  document.getElementById('files').innerHTML = 'Paths with more than 240 characters: &lt;br&gt;&lt;ul&gt;' + output.join('') + '&lt;/ul&gt;';
              }
  
              document.getElementById('input').addEventListener('change', handleFileSelect, false);
  
  
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I can run a trace and see that the <code>output</code> variable is populating correctly, but all that I'm getting for output is: <code>Paths with more than 240 characters:</code> without the <code>output.join()</code> part rendering correctly -- any thoughts?</p>