Question

I would like to send an image using AJAX to an .Net MVC server application, and one of the ways I found to do it is using jquery.form.js.
But I am not able to do it, it says that the request can’t be serialized, when I uncomment the part:

// the image I would like to pass
//thumb: $('#imagePath')[0], 

The HTML generated by the CSHTML file is as follows:

HTML generated from CreateItem.cshtml

<div class="ui-dialog ui-widget ui-widget-content ui-corner-all" style="display: block;
z-index: 1002; outline: 0px none; height: auto; width: 557.6px; top: 62px; left: 280px;" tabindex="-1" role="dialog" aria-labelledby="ui-dialog-title-dialog-form">
<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
    <div id="dialog-form" class="ui-dialog-content ui-widget-content" shape-id="3" style="width: auto;
        min-height: 0px; height: 296px;" scrolltop="0" scrollleft="0">
        <form class="item-form" method="post" action="/OrchardLocal/Course/CreateCourse"
        shape-id="3">
        <fieldset shape-id="3">
            <ul class="image-preview-list" shape-id="3">
                <li shape-id="3">
                    <div style="border-color: Black; border-width: thick;" shape-id="3">
                        <img id="thumb" class="image-from-popup" alt="some image" src="/OrchardLocal/Media/Default/Images/abc/abc.jpg"
                            shape-id="3">
                    </div>
                </li>
                <li shape-id="3">
            </ul>
            <label for="description" shape-id="3">
                Description</label>
            <textarea id="description" class="description-text text ui-widget-content ui-corner-all description-class"
                rows="2" name="description" cols="20" shape-id="3"></textarea>
        </fieldset>
        <input type="hidden" value="FApn3HBCkLLIo59k6ZFvlT4/Ug+3ZDhILay4C+hbdG7lAQfeWyms5ulVZ2scLkHgmwkqhDk0121dT03116VIVrSmWr3Tp0njksqX/Gnr3BK1nI7GdO1Em6ugdAbBJcUSNP0snS1DOHffG7sbq8x/dyK/ALI1bY+HDdIkk2oW5oC63YkV7Fq5pc7MjkPjTEj9o8oCYSFBsm0OdCzsZlpWFw=="
            name="__RequestVerificationToken" shape-id="3">
        </form>
    </div>
    <div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
        <div class="ui-dialog-buttonset">
            <button type="button">
                Create</button>
        </div>
    </div>
</div>

I have a javaScript file that:

$(document).ready(function () {
    // bind '.item-form' and provide a simple callback function 
    $('.item-form').ajaxForm(function () {

        alert("Thank you for your comment!");
    });
}); 

$(function () {


    var UNIQUE_TITLE = "You must specify an unique title";
    var TITLE_IS_REQUIRED = "You must specify a title";
    var DESCRIPTION_IS_REQUIRED = "You must specify a description";




    $('#dialog-form').dialog({
        autoOpen: false,
        height: 400.6,
        width: 557.6,
        modal: true,
        draggable: false,
        resizable: false,
        buttons: {
            "Create": function () {

                var newContactItem = {
                    title: $.trim($("#title").val()),
                    description: $.trim($(".description-class").val()),
                    imagePath: $.trim($("#imagePath").val()),


                    // the image I would like to pass
                    //thumb: $('#imagePath')[0], 


                    __RequestVerificationToken: antiForgeryToken                    }


                var form = $('.item-form');

                $.ajax({
                    type: "POST",
                    url: form.attr("action"), 
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    data: JSON.stringify(newContactItem),
                    success: function (data) {
                        // There is no problem with the validation
                        if (data.valid) {
                            $('#eventos').html(html);
                        }

                      $.each(data.Errors, function (key, value) {
                            if (value != null) {
                                $("#Err_" + key).html(value[value.length - 1].ErrorMessage);
                            }
                        });

                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert(XMLHttpRequest.responseText);
                        alert("Critical Error!. Failed to call the server.");
                    }
                });


            }
        }
    });

Answer 1

You cannot use both ajaxForm and jQuery.post to send the form. I believe you will need to rewrite, using only ajaxForm.