I have the following situation. This works perfectly, but when I try to use formData to enable file upload I get a 400 (bad request) error. I have tried all manner of content-type and enctype, but nothing seems to work. Any ideas as to what’s going wrong?
You can see the commented lines. if I switch to those I always get a 400 ‘bad request’
Visual Studio 2022, Net 8.
My Form (BS5 Modal)
<form id="frmItemLocalForm" method="post" name="frmItemLocalForm" novalidate="novalidate" enctype="multipart/form-data">
@Html.AntiForgeryToken()
<input type="hidden" name="controlId" id="controlId" value="@ViewData["controlid"]" />
<input type="hidden" name="itemId" id="itemId" value="@ViewData["itemId"]" />
<input type="hidden" asp-for="UserDocument.Created" name="Created" />
<!--Modal Header-->
<div class="modal-header">
<h4 class="modal-title">Edit User Document</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<!-- Modal body -->
<div class="modal-body">
<div class="row my-1">
<label class="col-form-label col-md-2">Name</label>
<div class="col-md-10">
<input type="text" class="form-control" placeholder="Name" asp-for="UserDocument.DocumentName" name="DocumentName" data-rule-required="true" />
</div>
</div>
<div class="row my-1">
<label class="col-form-label col-md-2">File</label>
<div class="col-md-10">
<input type="file" class="form-control fileUpload" placeholder="User Document" name="userdocumentfileupload" id="userdocumentfileupload" data-rule-required="true" required />
<br />@Model.UserDocument?.DocumentName @Model.UserDocument?.FileName
</div>
</div>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="submit" id="editLocalForm" class="btn btn-primary">OK</button>
<button type="button" class="btn btn-danger close-button" data-bs-dismiss="modal">Close</button>
</div>
</form>
$(document).on("click", "#editLocalForm", function (e) {
e.preventDefault();
e.stopPropagation();
var myform = $("#frmItemLocalForm");
var valid = myform.valid();
if (valid) {
var formData = new FormData();
//$(".fileUpload").each(function () {
// var fileInput = $(this)[0];
// var file = fileInput.files[0];
// if (file.size > 0) {
// formData.append($(this).attr("id"), file);
// }
//});
//formData.append("myFormData", myform.serialize());
$.ajax({
url: formUrl,
data: myform.serialize(),//formData,
dataType: "html",
contentType: "application/x-www-form-urlencoded",
processData: false,
method: "post",
success: function (result) {
$(".close-button").click();
table.ajax.reload(null, false);
},
error: function (err) {
console.log(err);
}
});
}
});