Uncaught TypeError: Cannot read the 'name' property from undefined

Question

I have the following code for clicking the "Select File" button:

$(':file').change(function () { if(this.files.length == 1) { $('#selected_files').html("<h4>Attaching " + this.files.length + " file</h4>"); } else { $('#selected_files').html("<h4>Attaching " + this.files.length + " files</h4>"); } $('#selected_files').append("<table class=\"altShaded\"><thead><tr><td></td><td>Filename</td><td>Size</td></tr></thead>"); for(x=0;x<=this.files.length;x++) { var file = this.files[x], name = file.name, size = file.size, type = file.type; $('#selected_files').append("<tr><td></td><td><b>" + name + "</b> ("+filesize(size)+") " + type + "<br>"); } }); 

Okay right? And everything works well. This is great, except that when jQuery adds table rows, it seems like it starts a new table and the top <thead> not bound to rows (in Chrome).

Ok, I thought we’ll just build a line and run everything right away.

In this way:

 $(':file').change(function () { if(this.files.length == 1) { var displayFiles = "<h4>Attaching " + this.files.length + " file</h4>"; } else { var displayFiles = "<h4>Attaching " + this.files.length + " files</h4>"; } var displayFiles = displayFiles + "<table class=\"altShaded\"><thead><tr><td></td><td>Filename</td><td>Size</td></tr></thead>"; for(x=0;x<=this.files.length;x++) { var file = this.files[x], name = file.name, size = file.size, type = file.type; displayFiles = displayFiles + "<tr><td>" + type + "</td><td><b>" + name + "</b></td><td>"+filesize(size)+"</td></tr>"; } $('#selected_files').html(displayFiles); }); 

But now all of a sudden, I get the following error:

* Uncaught TypeError: Unable to read the 'name' property from undefined *

Nothing has changed except the code around it. He points to:

name = file.name,

Can you tell me what the problem is?

Answer 1

This type of error means that your container variable file not defined.

You have to use console.log in different places to find out what is defined and what is not (your file array, etc.)

Also:

 for(x=0;x<=this.files.length;x++) 

It will be undefined for the last value of x , because the last element of the array is in array.length - 1 , not array.length , which gives you an undefined value at the end of your loop, possibly the source of your error. In your case, x goes into the value of this.files.length In addition, always use var, otherwise your x will be a global variable, which may be another source of problems.

The correct cycle should be:

 for (var x = 0; x < this.files.length; x++) 

Answer 2

Here is the code with the problem,

 for (var index = 0; index <= results.length; index++) { //doSumthing } 

Working code

 for (var index = 0; index < results.length; index++) { //doSumthing } 

The problem was the operator = operator in for loop. He checked an element that does not exist (last element + 1) in the array.

Try removing = from the loop statement, for example.

 for(var x = 0; x < this.files.length; x++){} 

It might work!

Answer 3

I had the same error, and this was due to a stupid error. I deleted modulo from the import array and accidentally left a comma on this line ..... so the following was imported in the import: [] array .... after deleting one comma, it solved the problem.