Uncaught TypeError: Cannot read property 'name' of undefined

Question

I have the following code for when 'choose file' is clicked:

$(':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>");
}


});

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 <thead> isnt attached the to rows (in Chrome).

Okay I thought, we'll just build a string and put it all in at once.

Thus:

$(':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: Cannot read property 'name' of undefined *

Nothing has changed, except the code around it. It is pointing to:

name = file.name,

Can you tell me what the problem is here?

Answer 1

This type of error mean that your container variable fileis not defined.

You should use console.log at different places to see what is defined and what is not (your files array, etc.)

Also :

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

Will be undefined for the last x value, because the last element of an array is at array.length - 1and not array.length, that gives you an undefined value at the end of your loop, probably the source of your error. In your case, x goes to the value this.files.length Also, always use var, otherwise your xwill be a global variable, which can be another source of problems.

A correct loop should be :

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

Answer 2

I was having same error and it was happening because of a stupid mistake. I removed on module from imports array and accidentally left comma on that line.....so there were two commas (,,) in imports: [] array....after removing one comma it solved the problem.