title: Unable to read image with FileReader (see Update 2)
body: <p>I am trying read a image file selected by a <code>input[type=file]</code> field with this javascript code:</p>
  
  <pre><code>      var reader = new FileReader();
        var blob;
        reader.onloadend = function (e) {
          blob = e.target.result;
        }
        reader.readAsDataURL(this.files[0]);
  </code></pre>
  
  <p>but when I run the code in the browser, I am getting this error:</p>
  
  <pre><code>TypeError: Argument 1 of FileReader.readAsDataURL is not an object.
  </code></pre>
  
  <p>Anyone can see what's wrong here?</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>this is the code where this snippet is included. SHould given more context about what's causing the error, I hope:</p>
  
  <pre><code>  $('#submit').on('click', function(){
      var $form = $( 'form.form' ), url = $form.attr( "action" ), str = $form.serialize();
      $('input[type=file]').each(function(){
        var reader = new FileReader();
        var blob;
        reader.onloadend = function (e) {
          blob = e.target.result;
        }
        reader.readAsDataURL(this.files[0]);
        str = str + "\u0026" + $(this).attr("name") + "=" + blob;
      });
      var posting = $.post( url, str );
      posting.done(function(data){
        if(data == "") {
          $("#alerta_sucesso").css("display", "block");
        } else {
          $("#alerta_erro").find("#texto").text(data);
          $("#alerta_erro").css("display", "block");
        }
      });
    });
  </code></pre>
  
  <p><strong>UPDATE 2</strong></p>
  
  <p>I manage to change the code and execute it without errors, but even so I can't store the image inside the variable <code>blob</code> to send this data to the server. The curretn code is this:</p>
  
  <pre><code>  $('#submit').on('click', function(){
      var $form = $( 'form.form' ), url = $form.attr( "action" ), str = $form.serialize();
      var input = $form.find('input[type=file]');
      $form.find('input[type=file]').each(function(){
        var id = $(this).attr("id");
        if(typeof id !== "undefined") {
          if(this.files.length &gt; 0) {
            var reader = new FileReader();
            var blob;
            reader.onloadend = function (e) {
              blob = e.result;
            }
            reader.readAsDataURL(this.files[0]);
            str = str + "\u0026" + $(this).attr("name") + "=" + blob;
          }
        }
      });
      var posting = $.post( url, str );
      posting.done(function(data){
        if(data == "") {
          $("#alerta_sucesso").css("display", "block");
        } else {
          $("#alerta_erro").find("#texto").text(data);
          $("#alerta_erro").css("display", "block");
        }
      });
    });
  </code></pre>
  
  <p>I assume the problem now it's with the line:</p>
  
  <pre><code>blob = e.result;
  </code></pre>
  
  <p>Anyone knows what should be the right value for this?</p>