Upload file using jquery dialog not working

Question

i want to upload file using jquery dialog. I have created a partial view and showing that partial view in the dialog.

The problem is, when I directly browse the partial view and upload a file, it works perfect. BUT when I put the partial view inside a jquery dialog, it submits the form, but don't submits the file. So i have null value. I really dont understand what is the difference here!!

Hope someone can help me to identify the problem.

here is some codes;

jquery codes:

$('#UploadDialog').dialog({
        autoOpen: false,
        width: 580,
        resizable: false,
        modal: true,
        open: function (event, ui) {
        $(this).load('@Url.Action("Upload","Notes")');
        },
        buttons: {
            "Upload": function () {
                $("#upload-message").html(''); 
                $("#noteUploadForm").submit();
            },
            "Cancel": function () {
                $(this).dialog("close");
            }
        }
    });
    $(".uploadLink").click(function () {
        $('#UploadDialog').dialog('open');
        });
        return false;
});

partial view:

@using (Ajax.BeginForm("Upload", "Notes", null, new AjaxOptions
{
UpdateTargetId = "upload-message",
InsertionMode = InsertionMode.Replace,
HttpMethod = "POST",
OnSuccess = "uploadSuccess"
}, new { id = "noteUploadForm" , enctype="multipart/form-data"}))
{
<div>
<div id="upload-message"></div>
<div class="editLabel">
    @Html.LabelFor(m => m.Notes.NoteTitle)
</div>
<div class="editText">
    @Html.TextBoxFor(m => m.Notes.NoteTitle)
</div>
<div class="clear"></div>

<div class="editLabel">
    @Html.Label("Upload file")
</div>
<div class="editText">
    <input type="file" name="file" />(100MB max size)
</div>

</div>
}

You could check jquery file update. Its a good component to do it with ajax. — Felipe Oriani, Jun 02 '12 at 03:57

score 1 · Accepted Answer · answered Jun 02 '12 at 10:40

1

That's because you cannot upload file using AJAX.

Try this

http://jquery.malsup.com/form/#file-upload

answered Jun 02 '12 at 10:40

VJAI

32,167
23
102
164

score 0 · Answer 2 · edited May 23 '17 at 12:22

Directly uploading file content over ajax is not possible you need to serialize your file data. You need to use some plugin to do this, or manually serialize file data. Some ready plugins are :

Secondly, Keep in mind that JQuery dialog box moves the input elements out of the Form. see this question :

Input inside Jquery UI Dialog not being sent?

Make sure you append elements before submission

score 0 · Answer 3 · answered Jun 02 '12 at 16:37

You cannot submit a form with multipart/form-data using ajax. You need to use some plugin for that.

The other work around (to get ajax like effect) is to use iframe (<iframe>) in your view which will be hidden and then post the form to this iframe as a target. You can create a dialog out of such form if required.

<form action="controller/action" method="post" target="iframename" id="yourformid">

Now on the iframe you can bind for the load event to check for the status of the post back like:

 $('#iframename').load(function(){.......});

Upload file using jquery dialog not working

3 Answers3