title: Uncaught TypeError: Cannot read property 'name' of undefined
body: <p>I have the following code for when 'choose file' is clicked:</p>
  
  <pre><code>$(':file').change(function () {
  
  if(this.files.length == 1) {
      $('#selected_files').html("&lt;h4&gt;Attaching " + this.files.length + " file&lt;/h4&gt;");
  } else {
      $('#selected_files').html("&lt;h4&gt;Attaching " + this.files.length + " files&lt;/h4&gt;");
  }
  
  $('#selected_files').append("&lt;table class=\"altShaded\"&gt;&lt;thead&gt;&lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;Filename&lt;/td&gt;&lt;td&gt;Size&lt;/td&gt;&lt;/tr&gt;&lt;/thead&gt;");
  
  for(x=0;x&lt;=this.files.length;x++)
  {
      var file = this.files[x], 
      name = file.name, 
      size = file.size, 
      type = file.type;
      $('#selected_files').append("&lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;b&gt;" + name + "&lt;/b&gt; ("+filesize(size)+") " + type + "&lt;br&gt;");
  }
  
  
  });
  </code></pre>
  
  <p>Fine, right? And all works well.  That's great, except that when jQuery appends the table rows, it seems to like to start a new table, and the top <code>&lt;thead&gt;</code> isnt attached the to rows (in Chrome).</p>
  
  <p>Okay I thought, we'll just build a string and put it all in at once.</p>
  
  <p>Thus:</p>
  
  <pre><code>$(':file').change(function () {
  
          if(this.files.length == 1) {
              var displayFiles = "&lt;h4&gt;Attaching " + this.files.length + " file&lt;/h4&gt;";
          } else {
              var displayFiles = "&lt;h4&gt;Attaching " + this.files.length + " files&lt;/h4&gt;";
          }
  
  
          var displayFiles = displayFiles + "&lt;table class=\"altShaded\"&gt;&lt;thead&gt;&lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;Filename&lt;/td&gt;&lt;td&gt;Size&lt;/td&gt;&lt;/tr&gt;&lt;/thead&gt;";
          for(x=0;x&lt;=this.files.length;x++)
          {
              var file = this.files[x], 
              name = file.name, 
              size = file.size, 
              type = file.type;
              displayFiles = displayFiles + "&lt;tr&gt;&lt;td&gt;" + type + "&lt;/td&gt;&lt;td&gt;&lt;b&gt;" + name + "&lt;/b&gt;&lt;/td&gt;&lt;td&gt;"+filesize(size)+"&lt;/td&gt;&lt;/tr&gt;";
          }
  
          $('#selected_files').html(displayFiles);
      });
  </code></pre>
  
  <p>But now all of a sudden,  I get the following error:</p>
  
  <p>*<em>Uncaught TypeError: Cannot read property 'name' of undefined *</em></p>
  
  <p>Nothing has changed, except the code around it.  It is pointing to:</p>
  
  <p><strong>name = file.name,</strong></p>
  
  <p>Can you tell me what the problem is here?</p>