Upload multiple images to server in ajax request

Question

I have a web application that create post with 15 images maximum and other data, I am using AJAX request to send all data with images in one request but I got this error:

An error occurred during the serialization or de-serialization process with JSON JavaScriptSerializer. The length of the string exceeds the value set in the MaxJsonLength property.

I am trying to compress the images before uploading but same problem still. That's the JS code:

 function readURL(input) {
    var files = input.files;
    for (var index = 0; index < files.length; index++) {
        var mainImage = "";
        if (files && files[index]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                const imgElement = document.createElement("img");
                imgElement.src = event.target.result;
                if ($(".imgUpload li").length <= 15) {
                    imgElement.onload = function (e) {
                        const canvas = document.createElement("canvas");
                        const MAX_WIDTH = 960;

                        const scaleSize = MAX_WIDTH / e.target.width;
                        canvas.width = MAX_WIDTH;
                        canvas.height = e.target.height * scaleSize;

                        const ctx = canvas.getContext("2d");

                        ctx.drawImage(e.target, 0, 0, canvas.width, canvas.height);

                        const srcEncoded = ctx.canvas.toDataURL(e.target, "image/jpeg");

                        // you can send srcEncoded to the server
                        $(".imgUpload").append('<li class="d-inline-block vTop position-relative mr-3 ' + mainImage + '"><a class="removeImg center w3-text-white fullRadius osRedBg position-absolute" data-ghost="removeImg" href="javascript:;"><svg viewBox="0 0 32 32" width="20" height="20" class="d-inline-block vMiddle" data-name="IconClose"><path fill="#ffffff" stroke="#fff" stroke-width="1" d="M25.333 8.547l-1.88-1.88-7.453 7.453-7.453-7.453-1.88 1.88 7.453 7.453-7.453 7.453 1.88 1.88 7.453-7.453 7.453 7.453 1.88-1.88-7.453-7.453z"></path></svg></a><img class="ad-img" alt="" src="' + srcEncoded + '"></li>');
                         if ($('.imgUpload li.mainImage').length == 0) {
                    $('.imgUpload li:nth-child(2)').addClass("mainImage");
                }

                if ($(".imgUpload li").length > 2) {
                    $(".imgValMsg").text("@Messages.ClickToDetectMainImage");
                }
                    };

                }
                else {
                    $('.modalCountImgs').modal('show');
                }
                if ($('.imgUpload li.mainImage').length == 0) {
                    $('.imgUpload li:nth-child(2)').addClass("mainImage");
                }

                if ($(".imgUpload li").length > 2) {
                    $(".imgValMsg").text("@Messages.ClickToDetectMainImage");
                }

            }

            reader.readAsDataURL(files[index]); // convert to base64 string
        }
    }
}

$("#inputAddImage").change(function () {
    var input = this;
    var files = this.files;
    var validFiles = true;
    for (var index = 0; index < files.length; index++) {
        var extLogo = files[index].name.split('.').pop().toLowerCase();
        if ($.inArray(extLogo, ['gif', 'png', 'jpg', 'jpeg']) == -1) {
            validFiles = false;
            break;
        }

    }
    if (validFiles) {
        readURL(input);
        $("#Imgs-error2").removeClass("d-block").addClass("d-none");
    }
    else {
        $("#Imgs-error2").removeClass("d-none").addClass("d-block");
    }
    $("#Imgs-error").removeClass("d-block").addClass("d-none");
});

and AJAX request:

  //Images
    var lstImgs = [];
    var ImgElements = $(".imgUpload img");
    ImgElements.each(function () {
        var obj = {
            ImageData: $(this).attr("src")
        }
        lstImgs.push(obj);
    });
  
    var productModel = {
        CategoryThirdId: $("#CategoryThirdId").val(),
        ProductTitle: $("#ProductTitle").val(),
        ProductDescription: $("#ProductDescription").val(),
        Price: $("#Price").val(),
      
        Images:lstImgs
    };
            var data = {
                model:productModel
            };
            $.ajax({
                method: "post",
                url: '@Url.Action("CreateAdvertise", "Advertise")',
                contentType: 'application/json',
                data: JSON.stringify(data),
                success: function (res) {
                    if (res != null) {
                        if (res == "ErrorCatalogName") {
                            $(".danger-product-name").show();
                        }
                    } 
                    else {
                        $(".danger-product-name").hide();
                    }
                    $('#overlay').fadeOut();
                },
                error: function (res) {
                     $('#overlay').fadeOut();
                }
            });

At the end my goal is to upload 15 images and other data from client to server witch I use ASP .NET MVC and the images to be compressed until the user upload an image with 20 MB.

Answer 1

You can't post files as string. Use something like this:

var fd = new FormData();
fd.append( 'file', input.files[0] );

$.ajax({
url: '/Example/SendData',
data: fd,
processData: false,
contentType: false,
type: 'POST',
success: function(data){
alert(data);
}
});