File Upload Without Page Refresh in ASP.NET MVC

• Download source code - 3.9 MB

Introduction

In this ASP.NET MVC example, we will see how we can upload file without page refresh. As we know, in MVC there is no server controller, this sample will be useful if we want to upload files without page refresh.

Background

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

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 makes the ajax post easy without making it complicated.

Follow these steps to do it.

View Page

1. Add the 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 clicks 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 the same.

Points of Interest

You can download the sample even at github.

You also can refer to dotnetpoints.

I answer a question long ago here. So, finally decided to write article.

That's all. Let me know if you have any questions or suggestions.