How to send multiple formdata using ajax and each from data have multiple images in asp.net core web app

Question

How to send multiple formdata using ajax and each from data have multiple images in asp.net core web app and data asp.net core web api. I need to save product variants with variant images.

I am able to save multiple variant without images.

Answer 1

I made a simple example based on your description, it should help you.

My IndexModel:

public class IndexModel : PageModel
{
    public class TestModel
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public byte[] ImageData { get; set; }
        [NotMapped]
        public IFormFile FormFiles { get; set; }
    }

    [BindProperty]
    public List<TestModel> TestModels { get; set; }

    public IActionResult OnGet()
    {
        return Page();
    }

    public IActionResult OnPost()
    {
        return Page();
    }
}

Index.cshtml(Suppose I want to pass two objects of type TestModel):

@page
@model IndexModel
@inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
    
@{
    ViewData["Title"] = "Home page";
        string GetAntiXsrfRequestToken()
        {
            return Xsrf.GetAndStoreTokens(Model.HttpContext).RequestToken;
        }
}

<div>
    @for(var i = 0; i < 2 ; i++){
        <div class="group">
            <div>
               Id: <input class="id" type="number" />
            </div>
            <div>
                Name: <input class="name" type="text" />
            </div>
            <div>
                FormFiles: <input class="files" type="file" />
            </div>
        </div>
        
    }
    <div>
        <input value="Upload" type="submit" id="Upload" />
    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script>
    $("#Upload").click(function (e) {
        var formdata = new FormData();
        for (var i = 0; i < $(".group").length; i++) {
            formdata.append("TestModels[" + i + "].Id", $(".group").find(".id")[i].value);
            formdata.append("TestModels[" + i + "].Name", $(".group").find(".name")[i].value);
            formdata.append("TestModels[" + i + "].FormFiles", $(".group").find(".files")[i].files[0]);
        }

        $.ajax({
                method: "post",
                url: "/",
                headers: { "RequestVerificationToken": '@GetAntiXsrfRequestToken()' },
                data: formdata,
                enctype: 'multipart/form-data',
                processData: false,
                contentType: false,
                cache: false,
            });
    });
</script>

I can successfully receive formData:

Also I'm not sure how you do the saving, but if you want to save the picture to the database, you can refer to my steps below.

My Database Table:

Convert the image to byte and store it in the database:

public IActionResult OnPost()
{
    var model = new TestModel();
    foreach (var item in TestModels)
    { 
        model.Id = item.Id;
        model.Name = item.Name;
        if (item.FormFiles != null)
        {
            if (item.FormFiles.Length > 0)
            {
                byte[] p1 = null;
                using (var fs1 = item.FormFiles.OpenReadStream())
                    using (var ms1 = new MemoryStream())
                    {
                        fs1.CopyTo(ms1);
                        p1 = ms1.ToArray();
                    }
                    model.ImageData = p1;
            }
        }
        _context.TestModel.Add(model);
        _context.SaveChanges();
    }
    return Page();
}

Test Result:

If you want to display the image on the page, you can refer to this link.

If you have multiple images and the number is uncertain, and you want to save them in the database, you can create a table for the image data and match it with TestModelId. For example:

public class TestModel
{
    public int Id { get; set; }
    public string Name { get; set; }
    public List<ImageData> FormFiles { get; set; }
}

public class ImageData
{ 
    public int Id { get; set; }
    public int TestModelId { get; set; }
    public byte[] Image { get; set; }
    [NotMapped]
    public IFormFile FormFiles { get; set; }
}