https://www.facebook.com/photo.php?v=538085782925239

CodeProject

Introduction:

Background:

Once upon a time i came across scenario where i needed to upload file in my asp.net mvc web application but its quite simple if we want full post-back, but i was thinking of doing it using Ajax by doing Partial Post-back.

Using JQuery to post standard forms is extremely simple, but when posting multi-part forms for uploading files it's not so intuitive.  This is due to browser security restrictions and sandboxing.  Today I'm going to show you how to fake an asynchronous upload without reloading the page and get a result back from the server.

 First Idea that came in my mind was using mvc helper Ajax.BeginForm and i came to know that it not supports file upload by partial post-back, it will do post-back.


Second Idea that was in my mind is to use JQuery and AJAX to post file on server so that i can avoid post-back, i tried my own way by posting file and returning partial view via AJAX but same issue was happening the partial view was rendering independently not on the same view, then i  searched on internet and found a way.

This method uses IFrame and do a fake async postback and it looks like that file uplaoding via ajax, as our view remains same.

How It Works

Main View

Here is my view code i have created a form using mvc Helper and after the form i added an iframe in which our form will be posted:

@{
    ViewBag.Title = "Ajax File Uploading";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Ajax File Uploading</h2>


<div>

    <div>
        <h1>Upload File</h1>
    </div>


    @using (Html.BeginForm("Upload", "Home", FormMethod.Post,
    new
    {
        enctype = "multipart/form-data",
        id = "ImgForm",
        name = "ImgForm",
        target = "UploadTarget"
    }))
    {
        
@* DataBase Record ID as Hidden Field against which we are uplaoding file  *@
         
        @Html.Hidden("ID", 65512)
        <div style="width: 100px; margin: auto; float: left; line-height: 30px; font-weight: bold;">File</div>
     
         
        <div style="width: 200px; float: left; margin: auto;">

            <input type="file" id="uploadFile" name="file" data-val="true" data-val-required="please select a file" />
            <span id="validityMessages" style="color: Red;"></span>
        </div>

         
        <div style="clear: both;"></div>
     
        <div style="width: auto; margin-top: 3%;">
            <div style="margin: 5% 18%;">
                <input id="upload" type="button" value="Upload" name="Upload" onclick="UploadImage()" />
                <span id="uploadLoader" style="display: none;">
                    <img id="searchLoader" src="@Url.Content("~/Content/Images/loader.gif")" />Uploading Please Wait</span>
            </div>
        </div>
           
     
    }
    <div id="uploadsContainer"></div>
    <iframe id="UploadTarget" name="UploadTarget" onload="UploadImage_Complete();" style="position: absolute; left: -999em; top: -999em;"></iframe>
</div>




@section Scripts{

    <script type="text/javascript">

        $(document).ready(function () {

            $('img.delUpload').live('click', function () {

                var Id = this.id;

                var url = '@Url.Action("DeleteFile","Home")';

                url = url + "?id=" + Id
                $.get(url, function (response) {

                    $('#uploadsContainer').html(response);


                });


            });

        });


    </script>



    <script type="text/javascript">
        var isFirstLoad = true;

        function UploadImage() {



            // check for size of file not greater than 1MB
            if ($("#uploadFile").val()) {


                var iSize = ($("#uploadFile")[0].files[0].size / 1024);


                iSize = (Math.round((iSize / 1024) * 100) / 100);

                if (iSize > 4) {

                    alert("File must be less than 4MB");

                    $('span#validityMessages').html("File must be less than 4MB");



                    return;

                }
                else {
                    // on form post showing Busy Indicator
                    $('#uploadLoader').show();
                    $("#ImgForm").submit(); // post form
                    console.log(iSize + "Mb");
                }
            }

                // check for no file selected for upload

            else {


                $('span#validityMessages').html("Please select a File of size less than 4MB!");


                return;
            }


        }

        function UploadImage_Complete() {
            //Check to see if this is the first load of the iFrame
            if (isFirstLoad == true) {
                isFirstLoad = false;

            }


            $('#uploadLoader').hide();


            //Reset the image form so the file won't get uploaded again
            document.getElementById("ImgForm").reset();

            // this call will get uploads if any exists on server against this id and after successfull upload refreshing partial view to get the latest uploads
            GetFiles();


        }


        function GetFiles() {

            var url = '@Url.Action("GetFiles","Home")';

            var Id = $('input#ID').val();
            url = url + "?id=" + Id
            $.get(url, function (response) {

                $('#uploadsContainer').html(response);


            });

        }

    </script>
}

 Uploads ViewModel

public class UploadsViewModel
    {
        public long ID { get; set; }
        public List Uploads { get; set; }

        public UploadsViewModel()
        {
            this.Uploads = new List();
        }
    }


    public class File
    {
        public string FilePath { get; set; }
        public long FileID { get; set; }
        public string FileName { get; set; }
    }

Upload Controller Method

Here is my controller method, i am taking two parameters input one is the posted form, in form i am posting some values in hidden fields required for DB updates and second parameter is posted file, i am simply saving the file in Uploads directory on server and updating a table in DB using Entity Framework and at the end returning partial view which will display the uploaded file name, thumbnail if its a image type file and button for deleting the file.

For this post i am storing the state in Session:

        [HttpPost]
        public ActionResult Upload(FormCollection form, HttpPostedFileBase file)
        {
            
            UploadsViewModel uploadsViewModel = Session["Uploads"] != null ? Session["Uploads"] as UploadsViewModel : new UploadsViewModel();


            uploadsViewModel.ID = long.Parse(form["id"]);

            File upload = new File();
            upload.FileID = uploadsViewModel.Uploads.Count + 1;
            upload.FileName = file.FileName;
            upload.FilePath = "~/Uploads/" + file.FileName;

            

            //if (file.ContentLength < 4048576)    we can check file size before saving if we need to restrict file size or we can check it on client side as well
            //{

                if (file != null)
                {
                    file.SaveAs(Server.MapPath(upload.FilePath));
                    uploadsViewModel.Uploads.Add(upload);
                    Session["Uploads"] = uploadsViewModel;
                }

                // Save FileName and Path to Database according to your business requirements

            //}


            return PartialView("~/Views/Shared/_UploadsPartial.cshtml", uploadsViewModel.Uploads);
        }

Uploads Partial View

Hi guys,

This Saturday i got in to situation, scenario was when we pass parameters to an action when we are calling action as get not post data is passed to the action parameters but if we see our application url, the values is shown in the url as query string this way:




which looks very awkward as its not a good approach to show database related ids in the urls, its unsafe, user just needs to play with numbers and can access the records that we dont want to be accesssible to him, so i needed a way so that my url be shown like this:





or like this:





When i go-ogled i came to know that we can configure the mvc application routes  in Global.asax file of our project which was very simple, but in my case it was not very simple, it was really weird and wasted my one day in achieving that i will explain why it happened. We can achieve the thing by writing this code for our particular Controller's action in Global.asax:

as in my case my Verification Controller's Index action was called and two parameters were paased to it and my url was looking like this:


and i dont't want the url to be like this, the solution is simple you have to write this code in Golobal.asax, i  am writing the code for the above controller's action:




But in my case i was developing application asp.net mvc 4 and i noticed that asp.net mvc4 adds some classes to the App_Start folder automatically at project creation by defaul, i was adding routing code in the Global.asax file but in the Application_Start method this line was written which i did'nt noticed before :



As you see for registering routes in Application_Start method RegisterRoutes method is called of class RouteConfig which is available in the App_Start folder of Solution, this was the issue i was  writing route code in Global.asax but in actual my that method was not calling method was called of class RouteConfig, when i realized i moved my route code to that class method, and things worked.