I need to upload form data along with file from razor view, how can i upload it from Ajax call ?
Please refer my code, i am trying to upload but using Ajax but it got error while passing values.
<form class="tab-pane" id="step2" enctype="multipart/form-data">
<div class="provider-details-wrapper">
<h6>License, Certifications & Documents</h6>
<div class="row">
<div class="col-lg-3 col-md-4">
<div class="form-group">
<label for="doctype">Document Type</label>
<select class="form-control form-select" id="DocumentTypeID" name="DocumentTypeID">
</select>
</div>
</div>
<div class="col-lg-3 col-md-4">
<div class="form-group">
<label for="firstname">Document Name</label>
@Html.TextBoxFor(c=>c.ManageProviderDocument.DocumentName,new{ @class="form-control",id="documentname"})
<span asp-validation-for="ManageProviderDocument.DocumentName" class="text-danger"></span>
@* <input type="text" class="form-control" id="firstname">*@
</div>
</div>
<div class="col-lg-3 col-md-4">
<div class="form-group">
<label for="firstname">Document Number</label>
@Html.TextBoxFor(c=>c.ManageProviderDocument.DocumentNumber,new{ @class="form-control",id="documentnumber"})
<span asp-validation-for="ManageProviderDocument.DocumentNumber" class="text-danger"></span>
@* <input type="text" class="form-control" id="documentnumber">*@
</div>
</div>
<div class="col-lg-3 col-md-4">
<label for="state">State</label>
<div class="form-group">
<select class="form-control form-select" id="DocStateID">
</select>
</div>
</div>
<div class="col-lg-3 col-md-4">
<div class="form-group">
<label for="isuuedate">Isuue Date</label>
@Html.TextBoxFor(c => c.ManageProviderDocument.IssueDate, new { id = "isuuedate",type = "date",@class="form-control" })
<span asp-validation-for="ManageProviderDocument.IssueDate" class="text-danger"></span>
@* <input type="date" class="form-control" id="isuuedate">*@
</div>
</div>
<div class="col-lg-3 col-md-4">
<div class="form-group">
<label for="tax">Expiration Date</label>
@Html.TextBoxFor(c => c.ManageProviderDocument.ExpirationDate, new { id = "eradate",type = "date",@class="form-control" })
<span asp-validation-for="ManageProviderDocument.ExpirationDate" class="text-danger"></span>
@* <input type="date" class="form-control" id="tax">*@
</div>
</div>
</div>
<div class="row">
<div class="col-xl-12 col-lg-12 col-md-12 mt-3">
<input type="file" id="fileUpload" class="fileUpload">
<button id="btnUpload" class="btn btn-success">Upload</button>
@* <button class="btn disabled-btn me-3 mb-2">Drag file here, or Click to
Upload</button>*@
<button class="btn upload-btn px-5">Upload</button>
</div>
</div>
<div class="d-flex justify-content-end mt-5">
<a href="manage-provider.html" class="btn cancel-btn me-3">Back</a>
<a href="manage-provider.html" class="btn save-btn">Save & next</a>
</div>
</div>
</form>
this is my ajax call getting failed at line
var form = $('#step2')[0];
function validationFormStepTwo()
{
if (!$("#step2").valid()) {
return false;
}
}
$("#btnUpload").on('click',function(e){
e.preventDefault();
validationFormStepTwo();
var fdata = new FormData();
//var fileInput = $('#step2')[0];
//var file = fileInput.files[0];
//fdata.append("File", file);
alert('hi')
var form = $('#step2')[0];
var formData = new FormData(form);
var form = $('#step2');
var formData = new FormData(form);
// You can update the jquery selector to use a css class if you want
//$("input[type='text'").each(function (x, y) {
// fdata.append($(y).attr("name"), $(y).val());
//});
$.ajax({
type: "POST",
url: '@Url.Action("AddProvider","Provider")',
contentType: false,
processData: false,
data: fdata,
success: function (message) {
alert(message);
},
error: function () {
alert("There was error uploading files!");
}
});
});
[HttpPost]
public IActionResult AddProviderDocument(ProviderViewModel model)
{
ModelState.Remove("ManageProviderModel");
if (ModelState.IsValid)
{
ManageProviderDocumentModelCopy modeldoc = new ManageProviderDocumentModelCopy();
modeldoc.DocumentTypeID = model.ManageProviderDocument.DocumentTypeID;
modeldoc.DocumentName = model.ManageProviderDocument.DocumentName;
modeldoc.DocumentNumber = model.ManageProviderDocument.DocumentNumber;
modeldoc.StateID = model.ManageProviderDocument.StateID;
modeldoc.IssueDate = model.ManageProviderDocument.IssueDate;
modeldoc.ExpirationDate = model.ManageProviderDocument.ExpirationDate;
AccountApiCall accountApiCall = new AccountApiCall(Configuration["PrescriptionAPI"]);
var Response = accountApiCall.PostAPIcall<GetProviderDetailModel>(model, "provider/documentadd", HttpContext.Request.Cookies["Token"].ToString());
//return Json(Response.message);
if (Response.status)
{
ViewBag.ProviderId = Response.data;
return View();
}
else
{
ModelState.AddModelError("CustomError", Response.message);
return View();
}
}
else
{
return View();
}