CODEWITHSUNDEEP
javascriptjqueryajax
user1698144
user1698144

Reputation: 764

Jquery/ajax file upload

Uncaught TypeError: Cannot read property 'length' of undefined

I have 3 file fields, each with its own independent upload button. The problem is that the file field is returned as undefined.

JavaScript:

$('.imgAction').on('click', function () {

    event.stopPropagation(); // Stop stuff happening
    event.preventDefault(); // Totally stop stuff happening
    var imgID = $(this).attr('data-id');
    var fileSelect =  $(this).closest('div').find('input[type=file]');

    var files = fileSelect.files;

    if (files.length > 0) {
        if (window.FormData !== undefined) {
            var data = new FormData();
            for (var x = 0; x < files.length; x++) {
                data.append("file" + x, files[x]);
            }

            $.ajax({
                type: "POST",
                url: '/AdminPanel/Catalog/ImgUpload/' + @Model.productID + "/" + imgID,
                contentType: false,
                processData: false,
                data: data,
                success: function (result) {
                    console.log(result);
                },
                error: function (xhr, status, p3, p4) {
                    var err = "Error " + " " + status + " " + p3 + " " + p4;
                    if (xhr.responseText && xhr.responseText[0] == "{")
                        err = JSON.parse(xhr.responseText).Message;
                    console.log(err);
                }
            });
        } else {
            alert("This browser doesn't support HTML5 file uploads!");
        }
    }
});

HTML

<div>
@if (Model.productType == 1)
{
    string imgPath1 = "assets/img/catalog/phones/" + @Model.Make + "-" + @Model.Model + "-" + @Model.carrier1 + "-1.jpg";
    string imgPath2 = "assets/img/catalog/phones/" + @Model.Make + "-" + @Model.Model + "-" + @Model.carrier1 + "-2.jpg";
    string imgPath3 = "assets/img/catalog/phones/" + @Model.Make + "-" + @Model.Model + "-" + @Model.carrier1 + "-3.jpg";

    <div style="width: 20%;float: left;">
"
        <img width="200" id="img1" src="~/@imgPath1" />
        <input type="file" class="imgFile" />
        <a href="#" class="imgAction" data-id="1">UPLOAD</a>
    </div>
    <div style="width: 20%;float: left;">
        <img width="200" id="img2" src="~/@imgPath2" />
        <input type="file"  class="imgFile" />
        <a href="#" class="imgAction" data-id="2">UPLOAD</a>
    </div>
    <div style="width: 20%;float: left;">
        <img width="200" id="img3" src="~/@imgPath3" />
        <input type="file"  class="imgFile"/>
        <a href="#" class="imgAction" data-id="3" >UPLOAD</a>
    </div>
}
</div>

Upvotes: 0

Views: 111

Answers (2)

Will Ru
Will Ru

Reputation: 131

It seems like you are trying to upload without the use of any direct association between the file field and the button or image( whatever imgAction references). If the two are adjacent elements, then you may need to trigger the upload event.

var fileSelect = $(this).closest('div').find('input[type=file]').click()

check out the jquery click docs

Upvotes: 0

Marvin Medeiros
Marvin Medeiros

Reputation: 252

You should get the first element of the jQuery find method, it should be like this:

var files = fileSelect[0].files;

Upvotes: 3

Related Questions