I have some problem with posting formData
to server side action method. Because ajax call doesn't send files to server, I have to add file uploader data to formData
manually like this:
var formData = new FormData();
formData.append("imageFile", $("#imageFile").file);
formData.append("coverFile", $("#coverFile").file);
I wrote jQuery function that need to post form data to server using ajax call.
It's works but posted formData
in server side is always null!
this is my script:
<script>
function SubmitButtonOnclick()
{
var formData = new FormData();
formData.append("imageFile", $("#imageFile").file);
formData.append("coverFile", $("#coverFile").file);
$.ajax({
type: "POST",
url: '@Url.Action("EditProfile", "Profile")',
data: formData,
dataType: 'json',
contentType: "multipart/form-data",
processData: false,
success: function (response) {
$('#GeneralSection').html(response.responseText);
},
error: function (error) {
$('#GeneralSection').html(error.responseText);
}
});
}
</script>
Edit 1: This is the action method in controller:
public ActionResult EditProfile(ProfileGeneralDescription editedModel,
HttpPostedFileBase imageFile,
HttpPostedFileBase coverFile,
string postOwnerUser)
{
try
{
if (postOwnerUser == User.Identity.Name)
{
// edit codes...
var result = GetProfileGeneralDescription(postOwnerUser);
return PartialView("_GeneralProfile", result);
}
else
{
var error = new HandleErrorInfo(
new Exception("Access Denied!"),
"Profile",
EditProfile
return PartialView("~/Views/Shared/Error.cshtml", error);
}
}
catch (Exception ex)
{
var error = new HandleErrorInfo(ex, "Profile", EditProfile
return PartialView("~/Views/Shared/Error.cshtml", error);
}
}
Edit 2: Cshtml view file content:
@model Website.Models.ViewModel.Profile
@using (Ajax.BeginForm("EditProfile", "Profile", new { postOwnerUser = User.Identity.Name }, new AjaxOptions()
{
HttpMethod = "POST",
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "GeneralSection"
}, new { enctype = "multipart/form-data" }))
{
<div>
<button id="btnSubmit" type="button" onclick="SubmitButtonOnclick()">Submit</button>
</div>
<input type="hidden" name="username" id="username" value="@Model.Username"/>
<fieldset>
<legend>Edit Photos</legend>
<div>
Select profile picture:
<input id="imageFile" type="file" name="imageFile" accept="image/png, image/jpeg" />
@Html.CheckBoxFor(modelItem => modelItem.DefaultCover)<span>Remove profile photo</span>
</div>
<div>
Select cover picture:
<input id="coverFile" type="file" name="coverFile" accept="image/png, image/jpeg" />
@Html.CheckBoxFor(modelItem => modelItem.DefaultCover)<span>RemoveCover</span>
</div>
</fieldset>
}
Any tips, link or code example would be useful.
Thank you in advance!
Transmitting a file from your computer to another computer. "File upload" is essentially the same term as "upload," because most of the time data are transmitted as a structural unit known as a "file."
Ajax file uploadsA JavaScript method must be coded to initiate the asynchronous Ajax based file upload; A component must exist on the server to handle the file upload and save the resource locally; The server must send a response to the browser indicating the JavaScript file upload was successful; and.
open("POST", "/upload"); // makes the request and uploads the form data xhr. send(fd); Once the file upload is complete, the response from the server is handled the usual way.
Go to File->New->Project. Give a suitable name to the Application. Click OK. As you can see in the above image, two files are sent to C# ActionMethod, and both will be uploaded now.
Instead of Jquery Ajax you could use
<script>
function SubmitButtonOnclick()
{
var formData= new FormData();
var imagefile=document.getElementById("imageFile").files[0];
var coverfile=document.getElementById("coverFile").files[0];
formData.append("imageFile",imageFile);
formData.append("coverFile",coverFile);
var xhr = new XMLHttpRequest();
xhr.open("POST", "/Profile/EditProfile", true);
xhr.addEventListener("load", function (evt) { UploadComplete(evt); }, false);
xhr.addEventListener("error", function (evt) { UploadFailed(evt); }, false);
xhr.send(formData);
}
function UploadComplete(evt) {
if (evt.target.status == 200)
alert("Logo uploaded successfully.");
else
alert("Error Uploading File");
}
function UploadFailed(evt) {
alert("There was an error attempting to upload the file.");
}
</script>
This works for me !!
Your script with changes
function SubmitButtonOnclick() {
var formData = new FormData();
var file = document.getElementById("imageFile").files[0];
var file1 = document.getElementById("coverFile").files[0];
formData.append("imageFile", file);
formData.append("coverfile", file1);
$.ajax({
type: "POST",
url: '@Url.Action("EditProfile","Default1")',
data: formData,
dataType: 'json',
contentType: false,
processData: false,
success: function (response) {
$('#GeneralSection').html(response.responseText);
},
error: function (error) {
$('#GeneralSection').html(error.responseText);
}
});
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With