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
– Felipe Oriani, Commented Jun 2, 2012 at 3:57

VJAI · Accepted Answer · 2012-06-02 10:40:21Z

1

That's because you cannot upload file using AJAX.

Try this

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

answered Jun 2, 2012 at 10:40

VJAI

32.9k23 gold badges108 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 12:22:17Z

0

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

edited May 23, 2017 at 12:22

CommunityBot

11 silver badge

answered Jun 2, 2012 at 12:17

amarnath chatterjee

1,96216 silver badges15 bronze badges

Comments

Abhijit-K · Accepted Answer · 2012-06-02 16:37:35Z

0

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(){.......});

answered Jun 2, 2012 at 16:37

Abhijit-K

3,7091 gold badge26 silver badges31 bronze badges

Collectives™ on Stack Overflow

Upload file using jquery dialog not working

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related