Unable to call server side webmethod function

Question

I am using summernote, I want to upload image to my web server.. Below is my code which I am using

Default.aspx

<script type="text/javascript">
    $(document).ready(function () {
        $('#summernote').summernote({
            onImageUpload: function (files, editor, $editable) {
                alert('image?');
                var formData = new FormData();
                formData.append("file", files[0]);

                $.ajax({
                    url: "Default.aspx/UploadImage",
                    data: formData,
                    type: 'POST',
                    cache: false,
                    contentType: false,
                    processData: false,
                    success: function (imageUrl) {
                        alert(imageUrl);
                        if (!imageUrl) {

                            // handle error

                            return;
                        }

                        editor.insertImage($editable, imageUrl);
                    },
                    error: function () {
                        alert('error');
                        // handle error
                    }
                });
                console.log('image upload:', files, editor, $editable);
            }
        });
    });
</script>

Default.asp.cs

[System.Web.Services.WebMethod]
    public static string UploadImage(HttpPostedFileBase file)
    {
        //Saving to Server

        return imageUrl;
    }

But it is not calling server side function. Also, alert(imageUrl) is giving me complete page html.

Where I am wrong?

Updating Question with network information (google chrome)

Edit 2

Updated after suggestion

Code:

 url: "About.aspx/UploadImage",
                   data: "multipart/form-data",
                   type: 'POST',
                   cache: false,
                   contentType: "application/json",

Error:

Note: I have changed Page from Default.aspx to about.aspx (but code is same)

Hidalgo

Check the URL - "Default.aspx/UploadImage", this could be the issue. Inorder to debug further Open chrome network tab (F12) and check the the status code and the response you are getting for the AJAX call. – Schubert

Side question, does you class that is holding the method , has property [ScriptService] ? – Kathaleenkatharevusa

@abhi I have uploaded my question – Hidalgo

whats the response for the POST call? Also is the 400 bad request part of same call? – Schubert

@Kathaleenkatharevusa It is in default.aspx.cs page public partial class _Default : Page – Hidalgo

Answer 1

WebMethod or "Page methods" expect contentType: "application/json;

Additional ref: Scott Guthrie - JSON Hijacking and How ASP.NET AJAX 1.0 Avoids these Attacks:

There is a built-in validation layer of protection that ASP.NET enforces for both GET and POST based ASP.NET AJAX web methods, which is that regardless of the HTTP verb being used, ASP.NET always requires that the HTTP Content-Type header is set to the value application/json. It this content type header is not sent, ASP.NET AJAX will reject the request on the server.

• this is why your alert is returning the page (html), your call succesfully called the page (default.aspx), but the webmethod was not invoked.

See this for direction/possible solution.

---

I think you're getting confused, probably my fault. I'll try to simplify:

• The suggestion in the link is not using WebMethod.
• In order to send file/s, your contentType must be multipart/form-data
  • see related question: jquery contentType false
• But as referenced above, WebMethods require contentType to be application/json
• It will not work with WebMethods (hence the link suggests using a generic handler).

Hth...

Leavenworth

Thanks for your answer.. I tried with contentType: "application/json; charset=utf-8", and also with contentType: "application/json". but now it is going to error section. Anything else I am wrong with? – Hidalgo

@Zerotoinfinite See the link above for the possible alternative/solution - re: based on your code it seems you need to send multipart/form-data (it won't work with PageMethods) – Leavenworth