Send FormData using Jquery-Ajax to C# Web-Api

Question

I have the following function:

public class UserRequest
{    
    public string RequestMessage { get; set; }
    public HttpPostedFileBase Photo { get; set; }
}        
public void CreateRequest(UserRequest userRequest)
{
}

When I post to this function with the following script the posted image is always null:

var requestMessage = document.getElementById("txtReqMessage").value;
var inputFile = document.getElementById("reqphoto");
var imageFile = inputFile.files[0];

$.ajax({
     type: "POST",
     url: "/UserRequest/CreateRequest/",
     contentType: 'application/json; charset=utf-8',
     data: JSON.stringify({                      
        "RequestMessage": requestMessage,
        "Photo": imageFile
     }),
    success: function () {
        alert("Success");
}

I read about posting complex data so I changed the script to:

var requestMessage = document.getElementById("txtReqMessage").value;
var inputFile = document.getElementById("reqphoto");
var imageFile = inputFile.files[0];    

var formData = new FormData();
formData.append("RequestMessage", requestMessage);
formData.append("Photo", imageFile);   

    $.ajax({
       type: "POST",
       url: "/UserRequest/CreateRequest/",
       data: formData,
       dataType: 'json',
       contentType: false,
       processData: false,
       success: function () {                  
           alert("Success");
       }
});

But now something is wrong I get Error 500.

500 error means server error, so try to debug your server code — devqon
– devqon, Commented Dec 17, 2014 at 10:45
This is an old thread, but I have to say it - the extra slash at the end of the URL is causing the 500 error. — withoutIf
– withoutIf, Commented Jan 27, 2016 at 15:55

Eyal · Accepted Answer · 2014-12-17 13:01:27Z

3

I changed it to this:

public void CreateRequest()
        {

            var httpRequest = HttpContext.Current.Request;

            var userRequest = new UserRequest
            {                
                RequestMessage = httpRequest.Form["RequestMessage"],
                Photo = httpRequest.Files["RequestPhoto"],

            };                                               
        }



var formData = new FormData();            
formData.append("RequestMessage", requestMessage);
formData.append("RequestPhoto", imageFile);


$.ajax({
   type: "POST",
   url: "/UserRequest/CreateRequest",
   data: formData,      
   processData: false,
   success: function () {
    alert("OK");
   },
   error: function () {
    alert("Error");
 }
 });

answered Dec 17, 2014 at 13:01

Eyal

4,8139 gold badges44 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Hirav Sampat · Accepted Answer · 2014-12-17 10:35:18Z

0

define the method as web method

[WebMethod]
public void CreateRequest(UserRequest userRequest)
{

}

answered Dec 17, 2014 at 10:35

Hirav Sampat

1961 silver badge11 bronze badges

Comments

faby · Accepted Answer · 2014-12-17 12:27:15Z

0

you should read data in a FormDataCollection

public void CreateRequest(FormDataCollection form)
{

}

try changing contentType ajax property to

contentType: 'multipart/form-data'

you are using false value that should be used only when you are sending files

edited Dec 17, 2014 at 12:27

answered Dec 17, 2014 at 10:42

faby

7,6043 gold badges30 silver badges45 bronze badges

2 Comments

Eyal Over a year ago

tryied with both scripts: it's empty.

faby Over a year ago

try with contentType: 'multipart/form-data', you are using false that should be used only when you send files

Collectives™ on Stack Overflow

Send FormData using Jquery-Ajax to C# Web-Api

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related