title: Converting File input to text in JavaScript
body: <p>I'm programming a simple JavaScript page to get a file from the user and convert it to a data variable of either binary or text. When I use my code in a click event handler of a button,  I get this error: </p>
  
  <p><strong>Uncaught TypeError: file.getAsText is not a function at HTMLButtonElement.sendfButton.onclick</strong></p>
  
  <p>First I browse and select a file, then click on <em>send</em> button. </p>
  
  <p>This is my html input and button:</p>
  
  <pre><code>            &lt;tr&gt;
              &lt;td&gt;
                  &lt;button type="button" class="control-button" id="send-file-button"&gt;SEND-FILE&lt;/button&gt; 
              &lt;/td&gt;
              &lt;td&gt;
                      &lt;input type='file' id='myfileinput' multiple&gt;&lt;br&gt;
                      &lt;div id='output'&gt;
  
  
              &lt;/td&gt;
          &lt;/tr&gt;
  </code></pre>
  
  <p>Here are my variables:</p>
  
  <pre><code>                var sendfButton = document.getElementById("send-file-button");
              var fileInput = document.getElementById("myfileinput");
  </code></pre>
  
  <p>And here is my click event handler:</p>
  
  <pre><code>sendfButton.onclick = function ()
                  {
                  var files = fileInput.files;
                  var accept = {
                  binary : ["image/png", "image/jpeg"],
                  text   : ["text/plain", "text/css", "application/xml", "text/html" , "text/txt"]
                  };
                  var file;
                      if (conn &amp;&amp; conn.open)
                      {
                          console.log('in1');
                           //convert a file to bytes then send it
                          for (var i = 0; i &lt; files.length; i++)
                          {
                              console.log('in2');
                              file = files[i];
                              // if file type could be detected
                              if (file !== null) 
                              {
                                  console.log('in3');
                                  if (accept.binary.indexOf(file.type) &gt; -1) 
                                  {
                                      console.log('in binary');
                                      // file is a binary, which we accept
                                      var data = file.getAsBinary();
                                      console.log(data + 'dtat');
                                  } 
                                  else if (accept.text.indexOf(file.type) &gt; -1) 
                                  {
                                      console.log('in text');
                                  // file is of type text, which we accept
                                  var data = file.getAsText();
                                  console.log(data + 'dqata');
                                  // modify data with string methods
                                  }
                              }
                          }
  
                          console.log('out' + data);
                          conn.send(data);
                          console.log("fSent: " + data);
                          addMessage("&lt;span class=\"selfMsg\"&gt;Self: &lt;/span&gt; " + data);
                      }
                      else
                      {
                          console.log("failed fsend");
                      } 
                  }
  </code></pre>
  
  <p>It seems to work when I run the code directly, but not when it is activated inside of the button event handler.
  <strong>Code 2</strong>
  i add filereader but still there is a bug :</p>
  
  <pre><code>sendfButton.onclick = function ()
                  {
                  var files = fileInput.files;
                  var accept = {
                  binary : ["image/png", "image/jpeg"],
                  text   : ["text/plain", "text/css", "application/xml", "text/html" , "text/txt"]
                  };
                  var file;
                      if (conn &amp;&amp; conn.open)
                      {
                          console.log('in1');
                           //convert a file to bytes then send it
                          for (var i = 0; i &lt; files.length; i++)
                          {
                              console.log('in2');
                              file = files[i];
                              var readers = new FileReader();
                              // if file type could be detected
                              if (file !== null) 
                              {
                                  console.log('in3');
                                  if (accept.binary.indexOf(file.type) &gt; -1) 
                                  {
                                      console.log('in binary');
                                      // file is a binary, which we accept
                                      var data = readers.readAsBinaryString(file);
                                      console.log(data + 'dtat');
                                  } 
                                  else if (accept.text.indexOf(file.type) &gt; -1) 
                                  {
                                      console.log('in text');
                                  // file is of type text, which we accept
                                  var data = readers.readAsText(file);
                                  console.log(data + 'dqata');
                                  // modify data with string methods
                                  }
                              }
                          }
  
                          console.log('out' + data);
                          conn.send(data);
                          console.log("fSent: " + data);
                          addMessage("&lt;span class=\"selfMsg\"&gt;Self: &lt;/span&gt; " + data);
                      }
                      else
                      {
                          console.log("failed fsend");
                      } 
                  }
  </code></pre>
  
  <p>it returns 
  <strong>undefined</strong></p>