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");
        }

Thank you @Jason Pan for follow up the issue. I have solved this issue in different way. — Ismail Hossen, Jun 20 '23 at 10:18

score 1 · Answer 1 · answered Jun 16 '23 at 01:59

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');
        
    });

score 0 · Answer 2 · answered Jun 20 '23 at 10:36

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");
        }

Remember that Stack Overflow isn't just intended to solve the immediate problem, but also to help future readers find solutions to similar problems, which requires understanding the underlying code. This is especially important for members of our community who are beginners, and not familiar with the syntax. Given that, **can you [edit] your answer to include an explanation of what you're doing** and why you believe it is the best approach? — Jeremy Caney, Jun 21 '23 at 01:43

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

2 Answers2