MVC file upload

Suraj Kumar

8y1.8k

How to get XmlHttpRequest response data on success in MVC? I have to save HttpPostedBasefile and I need to track the success data.

7 Replies

Know the answer? Post it — somebody with the same question will find it here.

kalai vanan8y ago
Hi Suraj,

can you please use Dropzone.js ,Its very easy to implement And Opensource too.
sai roja8y ago
Hi
Refer this File Upload in ASP.Net MVC application
https://aspdotnet-kishore.blogspot.in/2014/10/mvc-file-upload-in-aspnet-mvc.html
Suraj Kumar8y ago
Hello,

Please have a look to the below code. As you can see below after success I can track everything in data and can put condition based on the value in that data. In the same manner I want to track the data after xhr request send where I am stuck. I have not to show the message only. I want to show the data of employee for which I have send the request. Now I am sending it to Index action but if I will be able to track the sent data then I can show that employee data.

$.ajax({
url: '@Url.Action("CompetencyAddEdit", "GoalAssessment")',
type: "POST",
data: { "id": compId, "competencyId": compMstId, "selfRemarks": compDesc },
"success": function (data) {
debugger;
if (data.IscompExistResult >= 1) {
//alert("This Competency already added");
swal(
'',
'This Competency already added!',
'warning'
);
return false;
}
Srikant Maruwada8y ago
Hi Suraj,

In XMLHttpRequest, you have "OnReadyStateChange" event. In this you will get the response from controller.

Try below :
var xhr = new XMLHttpRequest();

...

xhr.open("POST", "/GoalAssessment/ContributionAddEdit/", true);

xhr.send(fd);

xhr.onreadystatechange = function() {

if (xhr.readyState === 4) {

var response = JSON.parse(xhr.responseText);

if (xhr.status === 200 && response.status === 'OK') {

console.log('successful');

} else {

console.log('failed');

}

}
Suraj Kumar8y ago
Hello Rajeesh Sir,
first of all thank you for reply .

Let you know I am not using Formdata. I have simply used

and sending action parameter using below line

var xhr = new XMLHttpRequest();
var fd = new FormData();
fd.append('file', document.getElementById('filecontribution').files[0]);
fd.append('id', conId);
fd.append('condata', conDesc);
xhr.open("POST", "/GoalAssessment/ContributionAddEdit/", true);

Now I want to track the employee code and other data after successfull the action and dbSaveChange(). Because we want to reassign that employee code in dropdown after saving the record and fetch the saved file as link to download in same tab.

For more understanding I have attached the sample what I have used in my project.
Srikant Maruwada8y ago
Hi Suraj
To post the file using ajax in MVC. You have to submit using FormData. In the formdata collection add the file and submit the form using Jquery.
And in the MVC controller side you will get the File in HttpFileCollectionBase.
Please refer below url for more information.
http://www.c-sharpcorner.com/UploadFile/manas1/upload-files-through-jquery-ajax-in-Asp-Net-mvc/
Rajeesh Menoth8y ago
Hi,

Please check the following reference :

http://www.c-sharpcorner.com/UploadFile/manas1/upload-files-through-jquery-ajax-in-Asp-Net-mvc/

http://www.c-sharpcorner.com/UploadFile/sourabh_mishra1/fileupload-in-Asp-Net-mvc/