CodeRatchet CodeRatchet - 6 months ago 61
Ajax Question

Passing more then 1 value to webmethod using FormData via Ajax

I'm trying to pass the uploaded image + two additional parameters to my web service using the FormData method from my Ajax method as shown here:

var formData = new FormData();
formData.append('file', $('#photo')[0].files[0]);
formData.append('u', "test");
formData.append('s', "Testing");


My ajax call is outlined like so:

$.ajax({
url: "/admin/WebService/test.asmx/UploadImage",
type: "POST",
processData: false,
contentType: false,
data: formData,
success: function (response) {
console.log(response);
},
error: function (er) {
alert(er);
}

});


Which calls this webmethod:

[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public string UploadImage()
{

if (System.Web.HttpContext.Current.Request.Files.AllKeys.Any())
{
var t= System.Web.HttpContext.Current.Request.Files["s"];
var c= System.Web.HttpContext.Current.Request.Files["u"];
var p = System.Web.HttpContext.Current.Request.Files["file"];
}
else
{
return "Error";
}

return "Error";
}


The issue I'm having is the parameters 'u' and 's' are null yet when referencing file I'm able to get its value.

Whilst searching the web I was under the impression you can specify as many key/values are required when using this approach unless I have been misinformed? can someone please shed some light into why these two parameters are null? Thanks in advance.

Answer
This works for me:


var formData = new FormData();
            formData.append("UserId", userId);              
            formData.append("RequestPhoto", imageFile);
            formData.append("RequestVoiceRecord", voiceFile);
            formData.append("Latitude", latitude);
            formData.append("Longitude", longtitude);

        $.ajax({
            type: "POST",
            url: "/User/CreateRequest",
            data: formData,
            contentType: false,
            processData: false,

            success: function () {
                alert("OK");
            },
            error: function () {
                alert("Error");
            }

        });

Controller:

 public class UserController : ApiController
    {           

        [HttpPost]
        public int CreateRequest()
        {

            // HttpResponseMessage result = null;
            var httpRequest = HttpContext.Current.Request;

            var req = new UserRequest
            {
                UserId = Guid.Parse(httpRequest.Form["UserId"]),                                      
                Photo = httpRequest.Files["RequestPhoto"],
                VoiceRecord = httpRequest.Files["RequestVoiceRecord"]
                Latitude = float.Parse(httpRequest.Form["Latitude"]),
                Longitude = float.Parse(httpRequest.Form["Longitude"]),
            };