Ajax FileUpload on all Browsers including IE 8, 10

File Upload in ASP.NET MVC via ajax

Problem

While looking for fileupload options via ajax and without posting the whole form, we often come across code in the internet using FormData API, which works perfectly fine on chrome and mozilla but on on IE. so a code snippet using a FormData API would like this below

//View Code

<script type="text/javascript">

    function save() {

        $("#test").submit();

    }

    function submitForm() {

        var formData = new FormData($('#test')[0]);

            $.ajax({

                url: '@Url.Action("Upload","FileUpload")',

                type: 'POST',

                data: formData,

                async: false,

                success: function (data) {

                    alert('posted')

                },

                cache: false,

                contentType: false,

                processData: false

            });

            return false;

    }

</script>

<h2>Index</h2>

<input type="button" value="Submit" onclick="save();" />

    

<form id="test" action="javascript:submitForm();" method="post" enctype = "multipart/form-data">

    <div>

        <label for="fileUpload">File upload</label>

        <input type="file" id="fileUpload" name="fileUpload" />

    </div>

</form>

//Controller Code

public ActionResult Upload()

        {

            HttpPostedFileBase postedFile = Request.Files[0];

            return View();

        }

The above snipped works fine on chrome and mozilla and you will be able to see the postedFile in the controller but it does not work on IE because most versions of IE does not support FormData.

Solution

So the solution I came up with after going some recommendations over internet about HTML controls on different browsers is that its better to use iframes. So Idea is to point the target of the form to an iframe and even bind a load event to the iframe so that you know when the upload is finished and write additional jquery functions. Also you can even hide the iframe and not show the user. But this solution works on IE as well. The code is as below

The code also shows how to post additional data along with the file post.

@{

    ViewBag.Title = "Index";

}

<script src="~/scripts/jquery-1.9.1.min_.js"></script>

<script type="text/javascript">

    function successFunction() {

        alert($('#my_iframe').contents().find('p').html());

    }

    function redirect() {

        //debugger;

        document.getElementById('my_form').target = 'my_iframe'; //'my_iframe' is the name of the iframe

        //document.getElementById('my_form').submit();

        var callback = function () {

            if (successFunction)

                successFunction();

            $('#my_iframe').unbind('load', callback);

        };

        $('#my_iframe').bind('load', callback);

        $('#hfParam').val('id:1');

        $('#my_form').submit();

        //$("#my_form").trigger("submit");

     

    }

</script>

<h2>Index</h2>

<input type="button" name="action" value="Upload" onclick="redirect();"/>

<form id="my_form" name="my_form" action="/FileUpload/UploadFile" method="POST" enctype="multipart/form-data" >

    <div id="main">

        <input name="my_hidden" id="hfParam" type="hidden" />

        <input name="my_files" id="my_file" type="file" />

        <iframe id='my_iframe' name='my_iframe' src="">

        </iframe>

        <div id="someDiv"></div>

    </div>

</form>

[HttpPost]

        public ActionResult UploadFile()

        {

            ContentResult result = new ContentResult() { Content = "<p></p>", ContentType = "text/html"};

            HttpPostedFileBase postedFile = Request.Files[0];

            try

            {

                result.Content = "<p>" + postedFile.FileName + "</p>";

            }

            catch (System.Exception ex)

            {

                result.Content = ex.Message;

            }

            return result;

        }

JQuery Set Visibility ON/OFF for a Button in ASP.NET MVC

How to Make a Button Visible true or False of a button in ASP.NET MVC project

I posted the same solution on stackoverflow site

First Method: As explained above, but I am afraid, it will not work if for example you have a partial view and based on something there you want to show or hide something.

Second Method:Initial Page load, button is visible.

<input id='btnAdd' type='button' value='Add' style='display:block;'/>

Based on some action on page/partial view

<script>
  function disableAdd() {
  $('#btnAdd').hide();
}
</script>

*Please note, jquery will not be able to hide/show if you use visibility in style sheet.

Readonly TextBox using @Html.TextAreaFor

How to Create Conditional Readonly TextBox in ASP.NET MVC5

I posted this solution below on stackoverflow because it worked very well for me, so copying from there

By setting readonly attribute to either true or false is not going to work in most browsers, I have done it as below, when the mode of the page is "reload", I've not included "readonly" attribute.

@if(Model.Mode.Equals("edit")){

@Html.TextAreaFor(model => Model.Content.Data, new { id = "modEditor", @readonly = moduleEditModel.Content.ReadOnly, @style = "width:99%; height:360px;" })

}

@if (Model.Mode.Equals("reload")){

@Html.TextAreaFor(model => Model.Content.Data, new { id = "modEditor", @style = "width:99%; height:360px;" })}

Json Object Postback, IE JSON.stringfy problem resolution.

Making Json Object Post to Server in Asp.NET, Problem in IE.

I am copying my own post from StackOverflow.

There may be situations where it may not be possible to include the Doctype or meta tag or nothing might work as in my case so I had to figure out this way below as explained.

To post json objects back to the server, json.strinfy will have to be supported. To support the same on IE, please download json2.js from https://github.com/douglascrockford/JSON-js and refer in your view. The following code snipped worked for me, I hope it helpe someone else too.

//include jquery library from your preferred cdn or local drive.
<!-- include json2.js only when you need JSON.stringfy method -->
<script type="text/javascript" src="~/scripts/json2.js"></script>
<script type="text/javascript">
function button_click() {
 //object to post back to the server.
 var postData = { "Id": $('#hfUserId').val(), "Name": $('#Name').text(), 
 "address": new Array() };
 var address = new Array(); var addr;
 addr = { "HouseNo": "1", "Street": "ABC", "City": "Chicago", "State": "IL" };
 address[0] = addr;
 addr = { "HouseNo": "2", "Street": "DEF", "City": "Hoffman Est", "State": "IL" };
 address[1] = addr;
//make ajax call to server to save the data
 $.ajax({
    url: '@Url.Action("myAction", "MyController")',
    type: 'POST',
    dataType: 'json',
    contentType: 'application/json; charset=utf-8',
    data: JSON.stringify(postData),
    async: true,
    success: function (data) { alert('User Saved'); },
    error: function (data) { alert('Could not save User'); }
    });
}
</script>

The model for the address list will be as below. Please note that the property names are the same as the addr object and it has get and set.

public class Address
{
    public string HouseNo { get; set; }
    public string Street { get; set; }
    public string City { get; set; }
    public string State { get; set; }
}

The controller action will be something like below
[HttpPost]
public ActionResult myAction(string Id, string Name, List<Address> address)
{
   JsonResult result = null;
   result = new JsonResult
                {
                    Data = new
                    {
                        error = false,
                        message = "User Saved !"
                    }
                };
    return result;
}