FormData content length Limitation in Jquery, Ajax When sending Large Image Files In Using Array with FormData

Question

I have 3 Image or Multiple Images Array whose total size is approx. 29mb or above. I am try to post it on server Side using Ajax with Form data. But It shows error when i try to post large data using FormData in MVC is there any solution. when i try to post data it shows error on client side means go into the request.fail section

This is My Jquery Code

 var filess = new Array();
var num = 4;
var IsAlready = false;
$(document).ready(function() {
    document.getElementById('pro-image').addEventListener('change', readImage, false);

    $( ".preview-images-zone" ).sortable();

    $(document).on('click', '.image-cancel', function() {
    debugger;
        let no = $(this).data('no');
        let Id = this.id;
        $(".preview-image.preview-show-"+no).remove();
        for (var i = 0; i < filess.length; i++) {
          debugger;
             filess = $.grep(filess, function(value) {
  return value.name != Id;
        });
}
    });
});

function readImage() {

    if (window.File && window.FileList && window.FileReader) {
        var files = event.target.files;
        var output = $(".preview-images-zone");

          for (var i = 0; i < files.length; i++) {

             $.grep(filess, function (n) {
                 if (n.name == files[i].name) {
                     IsAlready = true;
                 }
             })
             if (IsAlready)
             {
                 alert("Same Name File Exist");
                  $("#pro-image").val('');
                  IsAlready = false;
                 return false;
             }
        }

        var anyWindow = window.URL || window.webkitURL;
          for (var i = 0; i < files.length; i++) {

            filess.push(files[i]);
        var file = null;
             file = files[i];

            if (!file.type.match('image')) continue;
            var objectUrl = anyWindow.createObjectURL(files[i]);
            var html =  '<div class="preview-image preview-show-' + num + '"  >' +
                            '<div class="image-cancel" data-no="' + num + '" id="' + files[i].name + '">x</div>' +
                            '<div class="image-zone"><img id="pro-img-' + num + '" src="' + objectUrl + '"></div>' +

                            '</div>';

                output.append(html);
                num = num + 1;

            window.URL.revokeObjectURL(files[i]);
        }
       $("#pro-image").val('');
    }
    else {
        console.log('Browser not support');
    }

}

$("#submit").click(function () {
    event.preventDefault();
    debugger;
    var url = "/Administration/CreateAlbum";
    var albumName = $("#AlbumName").val();
    var albumDescription = $("#AlbumDescription").val();
    var IsActive = $("#IsActive").val();
    var filess = new Array();
    var data = new FormData();
    data.append('albumName', albumName);
    data.append('albumDescription', albumDescription);
    data.append('IsActive', IsActive);
    $("#submit").prop("disabled", true);

    for (var i = 0; i < filess.length; i++) {

        data.append('image', filess[i] );
    }

    var request = $.ajax({
        url: url,
        enctype: 'multipart/form-data',
        type: 'POST',
        processData: false,
        contentType: false,
        cache: false,
        timeout: 600000,
        data: data
    });

    request.done(function (response) {
        $("#resultCode").html(response.ResultCode);
        $("#resultMessage").html(response.ResultMessage);
        $('#reasonCode').val("");
        $('#quantity').val("");
        $('#inventoryCode').val("");
        $('#unitCost').val("");


    });
    request.fail(function (jqXHR, textStatus) {
        alert("Request failed: " + textStatus);
    });

});

The code that you have supplied only initialises filess the actual array is blank. — , Mar 08 '18 at 11:53
Where is the reference to your file upload control? i.e. type="file" ??? — Wheels73, Mar 08 '18 at 12:05
I should check the maxRequestLength and maxAllowedContentLength settings in your web.config. If you've not set them, then do so. have a look here. https://stackoverflow.com/questions/11300232/maxrequestlength-vs-maxallowedcontentlength-on-iis-7-5 — Wheels73, Mar 08 '18 at 12:16
my maxRequestLength is set to 1048576 in webconfig. is there need of set maxAllowedContentLength. If yes then where to set it? @Wheels73 — Anshul, Mar 08 '18 at 12:29
It has solved finally after set maxAllowedContentLength in web config. Thanks For corporation @Wheels73 — Anshul, Mar 08 '18 at 13:09

score 1 · Accepted Answer · answered Mar 08 '18 at 13:41

As discussed, you need to set the maxAllowedContentLength in the web.config

 <system.webServer>
    <security>
      <requestFiltering>
        <requestLimits maxAllowedContentLength="YOUR SIZE"  />
      </requestFiltering>
    </security>
  </system.webServer>

thanks

Mayank Majithia · Answer 2 · 2018-03-08T12:50:06.703

For large file upload.

ini_set('upload_max_filesize', '10M'); ini_set('post_max_size', '10M');

your files array is blank and no need to specify enctype. Here in Ajax

var files = array();

if you have multiple files,then append like

 data.append('image[]', filess[i] );





var filess = new Array();
var num = 4;
var IsAlready = false;
$(document).ready(function() {
    document.getElementById('pro-image').addEventListener('change', readImage, false);

    $( ".preview-images-zone" ).sortable();

    $(document).on('click', '.image-cancel', function() {
    debugger;
        let no = $(this).data('no');
        let Id = this.id;
        $(".preview-image.preview-show-"+no).remove();
        for (var i = 0; i < filess.length; i++) {
          debugger;
             filess = $.grep(filess, function(value) {
  return value.name != Id;
        });
}
    });
});

function readImage() {

    if (window.File && window.FileList && window.FileReader) {
        var files = event.target.files;
        var output = $(".preview-images-zone");

          for (var i = 0; i < files.length; i++) {

             $.grep(filess, function (n) {
                 if (n.name == files[i].name) {
                     IsAlready = true;
                 }
             })
             if (IsAlready)
             {
                 alert("Same Name File Exist");
                  $("#pro-image").val('');
                  IsAlready = false;
                 return false;
             }
        }

        var anyWindow = window.URL || window.webkitURL;
          for (var i = 0; i < files.length; i++) {

            filess.push(files[i]);
        var file = null;
             file = files[i];

            if (!file.type.match('image')) continue;
            var objectUrl = anyWindow.createObjectURL(files[i]);
            var html =  '<div class="preview-image preview-show-' + num + '"  >' +
                            '<div class="image-cancel" data-no="' + num + '" id="' + files[i].name + '">x</div>' +
                            '<div class="image-zone"><img id="pro-img-' + num + '" src="' + objectUrl + '"></div>' +

                            '</div>';

                output.append(html);
                num = num + 1;

            window.URL.revokeObjectURL(files[i]);
        }
       $("#pro-image").val('');
    }
    else {
        console.log('Browser not support');
    }

}

$("#submit").click(function () {
    event.preventDefault();
    debugger;
    var url = "/Administration/CreateAlbum";
    var albumName = $("#AlbumName").val();
    var albumDescription = $("#AlbumDescription").val();
    var IsActive = $("#IsActive").val();
    var filess = new Array();
    var data = new FormData();
    data.append('albumName', albumName);
    data.append('albumDescription', albumDescription);
    data.append('IsActive', IsActive);
    $("#submit").prop("disabled", true);

    for (var i = 0; i < filess.length; i++) {

        data.append('image', filess[i] );
    }

    var request = $.ajax({
        url: url,
        enctype: 'multipart/form-data',
        type: 'POST',
        processData: false,
        contentType: false,
        cache: false,
        timeout: 600000,
        data: data
    });

    request.done(function (response) {
        $("#resultCode").html(response.ResultCode);
        $("#resultMessage").html(response.ResultMessage);
        $('#reasonCode').val("");
        $('#quantity').val("");
        $('#inventoryCode').val("");
        $('#unitCost').val("");


    });
    request.fail(function (jqXHR, textStatus) {
        alert("Request failed: " + textStatus);
    });

});

I have not write here code for array. In array there are files I want to know that FormData Content Lenth Limit — Anshul, Mar 08 '18 at 12:07
If you getting error for max file upload size , then u need to set ; allowed size for uploaded files. upload_max_filesize = 40M ; Must be greater than or equal to upload_max_filesize post_max_size = 40M — Mayank Majithia, Mar 08 '18 at 12:37
Yes I have updated HTML here also check it @Mayank Majithiya I dont know what is error. but if I send small data then it works but 25-30 Mb or above is not post — Anshul, Mar 08 '18 at 12:41
ini_set('upload_max_filesize', '40M'); ini_set('post_max_size', '40M'); — Mayank Majithia, Mar 08 '18 at 12:45
; Maximum allowed size for uploaded files. upload_max_filesize = 40M ; Must be greater than or equal to upload_max_filesize post_max_size = 40M, update this in php.ini file — Mayank Majithia, Mar 08 '18 at 12:51
It has solved finally after set maxAllowedContentLength in web config. Thanks For corporation @Mayank Majithya — Anshul, Mar 08 '18 at 13:08

FormData content length Limitation in Jquery, Ajax When sending Large Image Files In Using Array with FormData

2 Answers2