Search code examples
ajaxasmxwebmethodform-data

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.


Solution

  • This works for me:

    JavaScript

    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"]),
                };