How to handle FormData AJAX message (file with additional parameters) using asp.net WebMethod

Question

Cannot process jQuery AJAX FormData post for ASP.net 4 WebMethod web service.

<input id="ipt_file" type="file" /> <a href='#' onclick="UploadFile();" data-role='button'>Upload</a> 

---

 var UploadFile = function () { var file_object = $('#ipt_file')[0].files[0]; var form_data = new FormData(); form_data.append('job_id', '123456'); form_data.append('job_name', 'xyx'); form_data.append('job_file', file_object); var xhr_upload = $.ajax({ type: "POST", headers: { "Cache-Control":"no-cache", "Content-Type":"multipart/form-data" }, // also tried without these url: "../MyServices.asmx/Upload", data: form_data, processData: false, contentType: false, dataType: "json", success: function (msg) { if (typeof (msg) === "object") { var _upload = $.parseJSON(msg.d); alert(_upload.status + ': ' + _upload.msg); }; } }); }; 

---

 public class FileUploadRequest { public string job_id { get; set; } public string job_name { get; set; } public HttpPostedFile job_file { get; set; } } 

---

 [WebMethod] public string Upload(FileUploadRequest x) { string str_response = string.Empty; if (x.job_file.ContentLength > 0) { str_response = "{\"status\":1,\"msg\":\"" + x.job_id + ", " + x.job_name + ", " + x.job_file.FileName + "\"}"; } else { str_response = "{\"status\":0,\"msg\":\"FAIL"\}"; }; return str_response; } 

---

You cannot correctly handle the parameter of a FormData object; here I created an instance of a custom class, but all I get back from the server is 500 errors (also tried a generic x object). Also tried to process it as an HttpRequest object, as I saw on some posts, but to no avail. Do not care about IE 9 incompatibility in this case; I just want to see the loading of a single file, or at least a FormData object with key / value pairs correctly accepted by WebMethod asmx.

Answer 1

I got it to work with the following code if someone wants to see it:

  var upload_file = $('#ipt_file')[0].files[0]; var upload_filename = upload_file.name; var upload_maxsize = 10485760; var upload_projectname = "test"; var form_data = new FormData(); form_data.append('session_id', this.sessionID()); form_data.append('project_name', upload_projectname); form_data.append('file_name', upload_filename); form_data.append('file_size', upload_file.size); form_data.append('file', upload_file); if (upload_file.size < upload_maxsize) { var xhr_upload = $.ajax({ type: "POST", headers: { 'Cache-Control': 'no-cache' }, url: "../services/upload.ashx", data: form_data, processData: false, contentType: false, dataType: "json" } }) .done(function (xhr_data) { ... }) .fail(function (jqXHR, textStatus, errorThrown) { ... }) .always(function () { ... }); 

Answer 2

.NET does not allow multipart / form-data strong> for content type:

JSON Hijacking and As ASP.NET AJAX 1.0 Avoids These Attacks

There is a built-in security check layer that ASP.NET uses ASP.NET AJAX web methods based on GET and POST, which, regardless of the HTTP verb A used, SP.NET always requires the HTTP Content-Type header to be set to use / json . This content type header is not sent; ASP.NET AJAX will reject the request on the server.