File upload without page refresh in MVC


In MVC even html input type "file" is used to upload files but if we want to upload without page refresh then either we can use Ajax.BeginForm or ajax post. There is a jquery plugin called jquery.form.js which make the ajax post easily without making it complicate.

If you already know normal file upload just adding jquery.form.js plugin and few lines of code will do the trick.

Follow these steps to do it.

View Page

1. Add required jquery and form library into your page.

@section Scripts {
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
}

2. Add file input type inside Html.BeginForm().

@using (Html.BeginForm("FileUpload", "Home"))
{
@Html.AntiForgeryToken()
<input type="file" name="files"><br>
<input type="submit" value="Upload File to Server">
}

Showing progress bare: This is an optional, you can skip this part if you don't want to show the progress bar.

<div class="progress progress-striped">
<div class="progress-bar progress-bar-success">0%</div>
</div>

3. Add ajaxForm to the page. Once user click on submit button post is sent via ajax request instead of http post.

<script>
    (function () {
        var bar = $('.progress-bar');
        var percent = $('.progress-bar');
        var status = $('#status');

        $('form').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) {
                status.html(xhr.responseText);
            }
        });

    })();
</script>

Action Method

Posted file request will be sent to FileUpload action method. In MVC, HttpPostedFileBase class is used to retrieve posted files. Below is the example of FileUplaod action method.

	[HttpPost]
        [ValidateAntiForgeryToken]
        public void FileUpload(IEnumerable files)
        {
            if (files != null)
            {
                foreach (var file in files)
                {
                    // Verify that the user selected a file
                    if (file != null && file.ContentLength > 0)
                    {
                        // extract only the fielname
                        var fileName = Path.GetFileName(file.FileName);
                        // TODO: need to define destination
                        var path = Path.Combine(Server.MapPath("~/Upload"), fileName);
                        file.SaveAs(path);
                    }
                }
            }
        }
    

Note: input file name (name="files") and object of HttpPostedFileBase in action method parameter should be same.

You can download the sample at github

That's all. Let me know if you have any question or suggestion.


posted on : 6/23/2016 12:00:00 AM viewed : 2970
Latest News