Uploading file via Jquery ui dialog and Ajax

Question

I am developing an ASP.NET MVC application, editing data is possible via 2 ways , opening in new tab and editing in a normal view or clicking on a link and editing in a dialog with Jquery-ui dialog.

this is code form dialog

$dialog.dialog("option", "buttons", {
    "Save": function () {
        var dlg = $(this);
        $.ajax({
            url: $url,
            type: 'POST',
            data: $("#" + formName).serialize(),
            success: function (response, textStatus, xhr) {
                    $(target).html(response);
                    dlg.dialog('close');
                    dlg.empty();
                }
            },
            error: function (xhr, status, error) {
                ....
            }
        });
    },
    "Cancel": function () {
        $(this).dialog("close");
        $(this).empty();
    }

});

My form is like this

@using (Html.BeginForm("Edit", "Patient", null, FormMethod.Post, new { id = "form", enctype = "multipart/form-data" }))

Now I have a input-file on my form, but the file won't post to my form, I googled and get that there are problems with AJAX and File Upload, and they suggest using jquery.form.js but I don't know how to combine them, any idea?

Solution

I have changed my code as below and it works fine:

$dialog.dialog("option", "buttons", {
    "Save": function () {
        var dlg = $(this);
        var formData = new FormData($("#" + formName)[0]);
        $.ajax({
            url: $url,
            type: 'POST',
            data: formData,
            processData: false, 
            contentType: false,