aspnetboilerplate .net core, multipage web application v8.1.0 file upload

Question

I am trying to build a file upload with the aspnetboilerplate .net core, multi page web application, version 8.1.0. I am getting null in the controller action method. Here is my code:

var product = _$form.serializeFormToObject();
        var uploadFiles = [];
        $.each(_$form.find('input[type="file"]'), function (i, tag) {
            $.each($(tag)[0].files, function (i, file) {
                uploadFiles.push(file);
            });
        });
        product.imageFiles = uploadFiles;

 abp.ajax({
            url: 'Products/Create',
            data: JSON.stringify(product),
        }).done(function (data) {
            _$modal.modal('hide');
            abp.notify.success('Success message');
            
        });

View Model:

    public class FileViewModel
    {
        public IFormFile ImageFiles { get; set; }
    }

Controller Action:

        [HttpPost]
        public async Task<IActionResult> Create([FromForm] FileViewModel product)
        {
            //product.ImageFiles = null
            //There are no errors but porduct.ImageFiles always null

            return Json("ok");
        }

Answer 1

I have solved this issue in different way. Here are my codes: jQuery:

var input = _$form.find('input[type="file"]')[0];
        var files = input.files;
        var formData = new FormData();

        for (var i = 0; i != files.length; i++) {
            formData.append("files", files[i]);
        }
        
abp.ajax({
                    url: 'Products/Create',
                    processData: false,
                    contentType: false,
                    data: formData,

                }).done(function (data) {
                    //abp.notify.success('Success message');
                });        

Controller Action:

[HttpPost]
        public ActionResult Create(IList<IFormFile> files)
        {
            foreach (var formFile in files)
            {
                if (formFile.Length > 0)
                {
                    Guid guid = Guid.NewGuid();
                    var path = "product-images\\" + guid.ToString() + "-" + formFile.FileName;
                    var filePath = Path.Combine(_environment.WebRootPath, path);

                    using (var stream = System.IO.File.Create(filePath))
                    {
                        formFile.CopyTo(stream);
                    }
                  
                }
            }

            return Json("ok");
        }

Answer 2

The default contentType in ABP AJAX Options is 'application/json'.

You need to change contentType: 'application/json', to contentType: 'multipart/form-data',. I don't find you use this in your code, so please add it.

 abp.ajax({
        url: 'Products/Create',
        contentType: 'multipart/form-data',
        data: JSON.stringify(product),
    }).done(function (data) {
        _$modal.modal('hide');
        abp.notify.success('Success message');
        
    });