jQuery Form Plugin’s File Upload issue when string returned from server

Question

I am trying to use jQuery Form Plugin to upload files. It is uploading to a ASP.NET MVC controller action with a return type string.

Controller Action with String return type

 [HttpPost]
 public string PracticeInfoFormUpload(HttpPostedFileBase myfile, FormCollection formCollection)
 {
      //Store the file on disk (Logic excluded for brevity)
      return “good”;
 }

The file is uploaded and response is displayed in Chrome and Firefox. But when I use IE, it is showing the response string in a new page. How to fix this to work in IE also?

Note: The file is getting uploaded correctly in IE also. The problem is what it does with the response unlike other browsers.

Note: I am using IE-10

Expected Result and IE Issue

jQuery

<script src="http://malsup.github.com/jquery.form.js"></script>  
<script type="text/javascript">
        $(function () {
            var bar = $('.bar');
            var percent = $('.percent');
            var status = $('#status');

            $('#frmUpload').ajaxForm({
                beforeSend: function () {
                    status.empty();
                    var percentVal = '0%';
                    bar.width(percentVal)
                    percent.html(percentVal);
                },
                uploadProgress: function (event, position, total, percentComplete) {
                    var percentVal = percentComplete + '%';
                    bar.width(percentVal)
                    percent.html(percentVal);
                },
                success: function () {
                    var percentVal = '100%';
                    bar.width(percentVal)
                    percent.html(percentVal);
                },
                complete: function (xhr) {
                    var returnMessage = xhr.responseText;
                    //alert(xhr.responseText);
                    //status.html(xhr.responseText);
                    if (returnMessage == "good") {
                        status.html('<div style="Color:#00A000;"><i>File successfully uploaded</i></div>');
                    }
                    else {
                        status.html('<div style="Color:#FF0000;"><i>Error! Please try again</i></div>');
                    }

                }
            });

        });


    </script>

HTML

  <div style="float:left;width:100%;border:0px solid green;margin: 0 0 0 0px;">

                        @using (Html.BeginForm("PracticeInfoFormUpload", "Home", FormMethod.Post, new { enctype = "multipart/form-data", name = "frmUpload", id = "frmUpload" }))
                        {
                            <input type="hidden" name="Practice" value="DefaultText"><br>


                            <div class="input-group" style="margin-left:20px;">
                                <input type="file" class="form-control input-sm" name="myfile" id="myfile">
                            </div>
                            <input type="submit" value="Upload " style="margin:2px 0 2px 120px;" class="approvalRadioBackground">

                        }

                        <div style="width:80%; padding-left:50px; text-align:center; margin:3px 0 5px 0;">
                            <div class="progress">
                                <div class="bar"></div>
                                <div class="percent">0%</div>
                            </div>
                            <div id="status"></div>
                        </div>
                    </div>

Answer 1

According to the HTML code sample documentation the target identifies the HTML element to update with the server response.

Try adding the line target: '#status', to the JS (as seen below)

$('#frmUpload').ajaxForm({
        // target identifies the element(s) to update with response 
        target: '#status', 
        beforeSend: function () {
            status.empty();
            var percentVal = '0%';
            bar.width(percentVal)
            percent.html(percentVal);
        },
        //rest omitted for brevity...

This worked for me.

Answer 2

1.You should use ContentResult in controller.

2.You should specify contentType,dataType in Ajax method in jquery

Controller:

[HttpPost]
    public ContentResult PracticeInfoFormUpload(HttpPostedFileBase myfile, FormCollection formCollection)
    {
      //Store the file on disk (Logic excluded for brevity)
       return Content("good");
    }

Jquery:

$.ajax({
    type: "POST",
    url: "/Home/PracticeInfoFormUpload",
    data: '{myfile: "' + yourdata + '" }',
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (response) {
        alert(response);
    },
    failure: function (response) {
        alert(response.responseText);
    },
    error: function (response) {
        alert(response.responseText);
    }
});

Answer 3

There are multiple things you can try:

1. You haven't set the id to input, assign id to it and access though this id id="UploadId":

   <input type="submit" value="Upload" id="UploadId" 
      style="margin:2px 0 2px 120px;" class="approvalRadioBackground">
   

2. Or if not, then try this code:

   $(document).ready(function() { 
       var options = {...
       /*abridged for clarity*/
   
       $('#upload').submit(function() {
           $(this).ajaxSubmit(options);
           return false;
       });
   });
   

3. Internet Explorer will not allow you to submit a form for security reasons. Open your file browser through manually triggered OnClick instead of a submit it, actual clicking the button. After doing this the form plugin will work fine.

Answer 4

Have you tried changing your controller to return Json instead of a string. You can try something like this :-

    [HttpPost]
    public JsonResult PracticeInfoFormUpload(HttpPostedFileBase myfile,FormCollection formCollection)
    {
        //Store the file on disk (Logic excluded for brevity)
        return new Json("good");
    }

Then change your code in your ajax request to contentType: "application/json" dataType: "json"