Search code examples
jqueryasp.net-mvc-3internet-explorerfile-uploadajaxform

JQuery Ajax Form with File Upload not working in IE


I'm using Jquery Ajax Form to upload files, which works well in Chrome and Firefox, but it doesnt work in IE. It pop ups a window telling me to save the file that I'm trying to upload.

Some example of my code, if necessary, is rite here: HTML:

<div class="addNewDocumentContent">
<form id="AddNewDocForm" action="@Url.Action("AddNewDocument", "BidForm")" enctype="multipart/form-data" method="post">
<div>
    <input name="File" type="file" style="width: 80%;" />
</div>
<div>
    <label>
        @Labels.Name</label>
    <input type="text" name="Name" style="width: 80%;" />
</div>
<div style="text-align: right;">
    <button type="button" name="Back" value="Back">
       @Buttons.GoBack
    </button>
    <button type="submit" name="Add" value="Back">
        @Buttons.Add
    </button>
</div>
</form>

JS:

//Document Ready=============================================================================
$(function () { 

    $('#AddNewDocForm').ajaxForm({
        type: 'POST',
        beforeSubmit: function () {
            return $("#AddNewDocForm").valid();
        },
        success: function (documents) {
            FillDocuments(documents);
            $('#dialogAddNewDocument').dialog('close');
        }
    });
});
//Validate====================================================================================
//Validation=====================================================================================
$(function () {
    $("#AddNewDocForm").validate({
        ignore: ":not(:visible)",
        rules: {
            File: "required",
            Name: "required"
        }
    });
});
//=========================================================================================

Action

[HttpPost]
    public JsonResult AddNewDocument(DocumentModel document)
    {
        if (ModelState.IsValid)
        {
            List<DocumentModel> documents = null;
            if (Session["Documents"] != null)
            {
                documents = (List<DocumentModel>)Session["Documents"];
                var doc = documents.OrderByDescending(x => x.Number).Take(1).FirstOrDefault();

                document.Number = doc != null ? doc.Number + 1 : 1;
                document.FileName = document.File != null ? document.File.FileName : document.FileName;
                documents.Add(document);
            }
            else
            {
                documents = new List<DocumentModel>();
                document.Number = 1;
                document.FileName = document.File != null ? document.File.FileName : document.FileName;
                documents.Add(document);
                Session["Documents"] = documents;
            }

            var displaydocs = documents.Select(x => new
            {
                Name = x.Name,
                Number = x.Number,
                File = x.File != null ? x.File.FileName : x.FileName,
                Route = x.Route != null ? x.Route : "#",
            });

            return Json(displaydocs, JsonRequestBehavior.AllowGet);
        }
        else
        {
            return null;
        }
    }

and finally model:

  public class DocumentModel
{
    public int Number { get; set; }
    [Required]
    public string Name { get; set; }
    [Required]
    public HttpPostedFileBase File { get; set; }

    public string FileName { get; set; }
    public string Route { get; set; }
}

Again, it works in every browser except IE8. Im probably not the only one, but I havent found an answer out there.


Solution

  • I haven't tried with a textarea yet, but it works fine if I define the content type to return inside the action as text/html:

     return new JsonResult() { ContentType = "text/html", Data = result };