Form has enctype=“multipart/form-data” but Request

Question

I have a basic form in ASP.Net MVC4 using Html helpers. I have an input file in the form for uploading a file which will be added to a database. In my view model I have a property for the input file:

        public HttpPostedFileBase AssetFile { get; set; }

In my view I have the form helper:

@using (Html.BeginForm("Create", "Contact", FormMethod.Post, new { enctype = "multipart/form-data" }))

Inside my form:

@Html.TextBoxFor(model => model.AssetFile, new { @type = "file", @name = "AssetFile" })

Yet, when I post the form there are no files in the Request.Files. Then I noticed that in Fiddler the Request Header has Content-Type: application/x-www-form-urlencoded; charset=UTF-8. I have another form with an input file and the header has Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryCfBFSR0RXQRnasfb and this form works fine. I tried doing this without Html helpers and same thing happens. The view model itself inherits from another view model where the input file actually belongs but then I have a string property mapped to a textbox and the form is picking up this value. There is no nested forms (on this page this is the only form) but I am having the same problem with another page that has multiple form (not nested) using multiple partial views that contain the forms like this:

@using (Html.BeginForm("Edit", "Home", FormMethod.Post, new { @enctype = "multipart/form-data" })){ @Html.Partial("EditorTemplates/_Profile", Model.InstitutionProfileInformation)}

Thanks in advance for any help.

OK - Here's the weirdness. Since they're (the original coder(s)) using partial views they ajaxified this thing. When the partial view (with the form) is rendered:

    var loadContactDiv = function (e) {
    isChanged = false;
    var url = e.href;
    $("#Contacts").load(url, function (response, status, xhr) {
        if (status == "error") {
            var msg = "Sorry but there was an error: ";
        }

        $("#Contacts").find('form').submit(divSubmitHandler).change(function () {
            isChanged = true;
        });

        $("#ReturnButton").click(function () {
            loadContacts();
        });
    });
    return false;
};

Then when the user click the submit button:

    var divSubmitHandler = function () {
    var form = $("#Contacts").find('form');
    var test = form.serialize();

    debugger;
    $.ajax({
        url: (form).attr('action'),
        data: form.serialize(),
        type: "POST",
        success: function (data) {
            if (data == "") {
                loadContacts();
            } else {
                $("#Contacts").html(data);

                $("#Contacts").find('form').submit(divSubmitHandler).change(function () {
                    isChanged = true;
                });
                $("#ReturnButton").click(function (e) {
                    loadContacts();
                });
            }
        }
    });

    return false;
};

Still stuck: http://prntscr.com/20v2cp

Answer 1

Since you are not submitting the form, but using $.ajax to process the request remotely and then get the result, the enctype is ignored from the form itself.

As you can also see the form data is serialize and sent.

So the fix here is simple, to submit the content-type correctly, just add a

content-type

option to the ajax request like so,

var divSubmitHandler = function () {
    var form = $("#Contacts").find('form');
    var test = form.serialize();

    debugger;
    $.ajax({
        url: (form).attr('action'),
        **contentType: 'multipart/form-data',**
        data: form.serialize(),
        type: "POST",
        success: function (data) {
            if (data == "") {
                loadContacts();
            } else {
                $("#Contacts").html(data);

                $("#Contacts").find('form').submit(divSubmitHandler).change(function () {
                    isChanged = true;
                });
                $("#ReturnButton").click(function (e) {
                    loadContacts();
                });
            }
        }
    });

    return false;
};

This should do the trick. However if it does not work, please refer to Jquery Form Ajax submit.

jQuery AJAX submit form

Have a nice session!