iDipa iDipa - 1 month ago 11
Ajax Question

form submission using ajax and submit prevent and send selected file of file control c#

In my application, I have one form which is rendering from partial view. From that form I want to send whole form data and selected file of file control. Form submission is using ajax call. To save selected file to folder, code I have is like below :

JavaScript function :

<script type="text/javascript">
$(function () {
$('#careerForm').submit(function (e) {
e.stopPropagation();
e.preventDefault();

var formData = new FormData();
var totalFiles = document.getElementById("fuUploadCV").files.length;

for (var i = 0; i < totalFiles; i++) {
var file = document.getElementById("fuUploadCV").files[i];
formData.append("FileUpload", file);
}

$.ajax({
type: "POST",
url: '/CareerSurface/UploadImage/', //put your controller/action here
data: formData,
dataType: 'json',
contentType: false,
processData: false,
beforeSend: function (xhr) {
//do something before send
},
success: function (data) {
//do something if success
},
error: function (data) {
//do something if error
}
});
});
});
</script>


Html :

using (Html.BeginForm("ApplyNow", "CareerSurface", FormMethod.Post, new { enctype = "multipart/form-data", autocomplete = "off", id ="careerForm" })){
<div class="Field-Label-Box">
<label>First Name:<span> *</span></label>
</div>
<div class="Field-Value-Box">
@Html.TextBoxFor(model => model.FirstName, new { id = "txtFirstName", name = "txtFirstName", required = "required" })
@Html.ValidationMessageFor(model => model.FirstName)
</div>
......
<div class="Field-Label-Box">
<label>Upload CV:<span> *</span></label>
</div>
<div class="Field-Value-Box">
@Html.TextBoxFor(model => model.ResumeUpload, new { type = "file", id = "fuUploadCV", name = "fuUploadCV", required = "required" })</div>
<input type="submit" id="btnSave" value="Submit" name="btnSave" />

}


c# :

[HttpPost]
public void UploadImage()
{
if (Request.Files.Count > 0)
{
dynamic file = Request.Files[0];
//do something with your 'file'
}
}


This works perfect to send only selected file. Now my issue is I want to send all another data(model class object) also to the same controller method. I have tried using json also but getting error of 'Illegal Invocation'.

Please guide me how to pass both to gather to single method? If any query, fill free to ask. Help me I got stuck at this point.

Thanks.

Answer

I made a test on your code and the only thing you are missing is adding the other fields to the FormData object you are sending through AJAX. What I mean is to modify your javascript code like this:

var formData = new FormData();
var totalFiles = document.getElementById("fuUploadCV").files.length;
for (var i = 0; i < totalFiles; i++) {
   var file = document.getElementById("fuUploadCV").files[i];
   formData.append("FileUpload", file);
}

// This is what you are missing: adding the other form fields
var txtFirstName = $("#txtFirstName").val();
formData.append("txtFirstName", txtFirstName);

$.ajax({
    (... the rest of your code ...)

You need to append every value of your form you want to send to the server.

Then in the server side, you can access your fields in the following way, also based on your current code:

[HttpPost]
public void UploadImage()
{
   if (Request.Files.Count > 0)
   {
      dynamic file = Request.Files[0];
      //do something with your 'file'

      // This is the way to access your fields based on your code
      string txtFirstName = Request.Form["txtFirstName"];
      // do something with your fields
   }
}

I hope that helps.