AJAX Post Request with Multiple Properties and Files ASP.NET Core - ajax

Question

I am trying to pass an object with multiple properties including user selected files to ASP.NET Core Controller. The POST request passes all properties except the files. How to fix the request to include the files in object? See the code below.
ViewModel:
public class InquiryViewModel
{
[Display(Name = "First Name")]
public string FirstName { get; set; }
[Display(Name = "Last Name")]
public string LastName { get; set; }
[Display(Name = "Upload Documents")]
public IEnumerable<IFormFile> Files { get; set; }
}
Controller:
[HttpPost]
[ValidateAntiForgeryToken]
public IActionResult Create(InquiryViewModel model)
{
try
{
//if (model.Files != null)
//{
// foreach(var file in model.Files)
// await _uploadFileService.PostFileAsync(file, "", 1);
//}
return Json(new { success = true });
}
catch (Exception ex)
{
return Json(new { success = false, message = ex.Message });
}
}
View:
#model InquiryViewModel
#{
ViewData["Title"] = "New Inquiry";
var AllowedExtensions = new string[] { "jpeg", "txt", "jpg", "pdf", "docx", "doc", "csv", "xls", "xlsx", "zip", "png" };
}
<div class="text-center pt-5 bg-logo">
<form id="wizard" autocomplete="false">
#Html.AntiForgeryToken()
<div class="row">
<div class="col-md-12">
<div class="requiredNotice">* Required Field</div>
</div>
</div>
<div class="row">
<div class="form-group col-lg-12 col-md-12 col-sm-12">
<label asp-for="FirstName" class="form-label"></label>
<input asp-for="FirstName" class="form-control" />
</div>
<div class="form-group col-lg-12 col-md-12 col-sm-12">
<label asp-for="LastName" class="form-label"></label>
<input asp-for="LastName" class="form-control" />
</div>
</div>
<div class="row">
<div class="form-group col-lg-12 col-md-12 col-sm-12">
<label asp-for="Files" class="form-label"></label>
<kendo-upload drop-zone=".dropZoneElement" id="files" name="Files">
<async auto-upload="false" chunk-size="12582912" />
<validation allowed-extensions="#AllowedExtensions" max-file-size="12582912" />
</kendo-upload>
<div class="demo-hint">Maximum allowed file size is <strong>12MB</strong>.</div>
</div>
</div>
<input type="button" name="next" class="col-2 submit action-button" value="Submit" />
</form>
</div>
#section Scripts {
<script>
$('input.submit').on('click', function() {
var formData = $('#wizard').serializeArray();
// add files to form data
var upload = $("input[name=Files]").data("kendoUpload");
var files = upload.getFiles();
for (var i = 0; i < files.length; i++) {
formData.push({ name: "Files", value: files[i] });
}
$.ajax({
type: 'POST',
//cache: false,
//contentType: false,
//processData: false,
data: formData,
url: '/Home/Create',
success: function (result) {
if (result.success == true) {
// success
}
else if (result.success == false) {
console.log(result);
}
},
error: function (xhr, ajaxOptions, thrownError) {
console.log(xhr);
console.log(ajaxOptions);
console.log(thrownError);
}
});
});
</script>
}
As is the form submits only the first and last names no files. If I remove the comment from the cache = false, contentType = false, processData = false, it will not hit the controller at all.

Answer 1

Here is what I changed to make it work.
In the controller I added the [FromForm]
Controller:
[HttpPost]
[ValidateAntiForgeryToken]
public IActionResult Create([FromForm] InquiryViewModel model)
{
try
{
//if (model.Files != null)
//{
// foreach(var file in model.Files)
// await _uploadFileService.PostFileAsync(file, "", 1);
//}
return Json(new { success = true });
}
catch (Exception ex)
{
return Json(new { success = false, message = ex.Message });
}
}
In the View I replaced kendo uploader with the out of the box html file input with the attribute multiple. In the AJAX I ended up constructing the FormData from scratch. Lastly, I used the contentType: false and processData: false
View
#model InquiryViewModel
#{
ViewData["Title"] = "New Inquiry";
}
<div class="text-center pt-5 bg-logo">
<form id="wizard" autocomplete="false">
#Html.AntiForgeryToken()
<div class="row">
<div class="col-md-12">
<div class="requiredNotice">* Required Field</div>
</div>
</div>
<div class="row">
<div class="form-group col-lg-12 col-md-12 col-sm-12">
<label asp-for="FirstName" class="form-label"></label>
<input asp-for="FirstName" class="form-control" />
</div>
<div class="form-group col-lg-12 col-md-12 col-sm-12">
<label asp-for="LastName" class="form-label"></label>
<input asp-for="LastName" class="form-control" />
</div>
</div>
<div class="row">
<div class="form-group col-lg-12 col-md-12 col-sm-12">
<label asp-for="Files" class="form-label"></label>
<input type="file" name="Files" id="files" class="form-control" multiple maxlength="12582912" />
</div>
</div>
<input type="button" name="next" class="col-2 submit action-button" value="Submit" />
</form>
</div>
#section Scripts {
<script>
$('input.submit').on('click', function() {
var formdata = new FormData();
var files = $("#files").get(0).files;
for (var i = 0; i < files.length; i++) {
formdata.append("Files", files[i]);
}
var otherData = wizard.serializeArray();
$.each(otherData, function (key, input) {
formdata.append(input.name, input.value);
});
$.ajax({
url: '/Home/Create',
type: "POST",
data: formdata,
contentType: false,
processData: false,
success: function (result) {
if (result.success == true) {
// success
}
else if (result.success == false) {
console.log(result);
}
},
error: function (xhr, ajaxOptions, thrownError) {
console.log(xhr);
console.log(ajaxOptions);
console.log(thrownError);
}
});
});
</script>
}