CODEWITHSUNDEEP
javascriptjqueryajax
Tartar
Tartar

Reputation: 5452

Jquery Cannot read property 'length' of undefined

I am trying to post a form by using jquery and ajax and i have file upload in this form as well. I have dynamically created forms so i have to find which form is clicked then get the input values of this form.

$(document).ready(function () {

    $(".audit-form-btn").click(function (e) {

        e.preventDefault();

        //get the form
        var form = $(this).parent().parent().parent().parent();

        // since we have multiple forms/divs with same class name this is how we determine which form button is clicked by getting button's parent
        // then we'll be able to get exact textbox values of clicked button's form
        var parent = $(this).parent().parent().parent();
        var cpDef = parent.find(".cp-def").val();
        console.log("cpDef:" + cpDef);
        var cpImpSug = parent.find(".cp-imp-sug").val();
        console.log("cpImpSug:" + cpImpSug);
        var cpScore = parent.find(".cp-score").val();
        console.log("cpScore:" + cpScore);
        var cpImg = parent.find(".cp-img");
        console.log("cpImg:" + cpImg);
        var aId = parent.attr('data1');
        console.log("aId:" + aId);
        var cpId = parent.attr('data2');
        console.log("cpId:" + cpId);

        var formData = new FormData();

        formData.append("cpDef", cpDef);
        formData.append("cpImpSug", cpImpSug);
        formData.append("cpScore", cpScore);
        formData.append("aId", aId);
        formData.append("cpId", cpId);

        var totalFiles = cpImg.files.length;
        for (var i = 0; i < totalFiles; i++) {
            var file = cpImg.files[i];
            formData.append("file", file);
        }

        console.log(file);
        console.log(formData);

        $.ajax({
            type: "POST",
            url: "/Audits/AddControlPointValues",
            dataType: "JSON",
            contentType: false,
            enctype: 'multipart/form-data',
            processData: false,
            data: formData,
            success: function (returnArgs) {
                alert(returnArgs.Status);
            },
            error: function (xhr, status, error) {
            }
        });

    });
});

I am able to get all input values but cant get file input value.

var totalFiles = cpImg.files.length;
   for (var i = 0; i < totalFiles; i++) {
      var file = cpImg.files[i];
      formData.append("file", file);
}

Getting

Cannot read property 'length' of undefined

error on above code. How do i fix this problem. Any help would be appreciated.

Upvotes: 0

Views: 1181

Answers (3)

Tartar
Tartar

Reputation: 5452

After reading the Lewis's answer i have updated my code as below and it works as i expected

    var totalFiles = cpImg.get(0).files.length;
    for (var i = 0; i < totalFiles; i++) {
        var file = cpImg.get(0).files[i];
        formData.append("file", file);
    }

Upvotes: 2

Someone
Someone

Reputation: 3568

I see you define var cpImg = parent.find(".cp-img") which appears to hold a html element.

However, I don't see you define cpImg.files (which appears to be the object you are trying to find the length of). Am I misunderstanding your code, or is it as your error suggests, it is not defined?

Upvotes: 1

MysterX
MysterX

Reputation: 2368

This is because your cpImg is a jQuery object, not input

Try the next source

var totalFiles = cpImg.files.length,
    filesInput = cpImg.get(0);
   for (var i = 0; i < totalFiles; i++) {
      var file = filesInput.files[i];
      formData.append("file", file);
}

Upvotes: -1

Related Questions