Click here to Skip to main content
15,868,016 members
Articles / Web Development / HTML

File Upload Without Page Refresh in ASP.NET MVC

Rate me:
Please Sign up or sign in to vote.
4.98/5 (44 votes)
24 Jun 2016CPOL1 min read 49.7K   1.8K   49   10
File upload without page refresh in ASP.NET MVC

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.

file-upload

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().

JavaScript
@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.

JavaScript
<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.

JavaScript
<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.

JavaScript
[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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Founder dotnetpoints.com
India India
4+ experience on web based applications using asp.net MVC, entity framework.

Specialties: C#.Net, ASP.Net MVC 5, MS Sql server, Jquery.

My Sites : Jugaaroo
dotnetpoints

Comments and Discussions

 
Praise5 Pin
Yoqueuris13-Jun-17 7:44
Yoqueuris13-Jun-17 7:44 
GeneralMy vote of 5 Pin
Humayun Kabir Mamun20-Aug-16 20:40
Humayun Kabir Mamun20-Aug-16 20:40 
GeneralMy vote of 5 Pin
Anurag Gandhi29-Jun-16 21:27
professionalAnurag Gandhi29-Jun-16 21:27 
GeneralMy vote of 5 Pin
_Pyl28-Jun-16 21:40
_Pyl28-Jun-16 21:40 
PraiseMuch needed! Thanks Pin
ilearncode28-Jun-16 4:33
ilearncode28-Jun-16 4:33 
Question+5! Pin
_Amy24-Jun-16 15:06
professional_Amy24-Jun-16 15:06 
AnswerRe: +5! Pin
Ashwini Verma24-Jun-16 18:08
Ashwini Verma24-Jun-16 18:08 
QuestionMy vote for 5 Pin
shibusen24-Jun-16 4:58
professionalshibusen24-Jun-16 4:58 
Hi this one is helpful.
GeneralVote of 5 Pin
Beginner Luck23-Jun-16 17:55
professionalBeginner Luck23-Jun-16 17:55 
GeneralMy vote of 5 Pin
Raje_23-Jun-16 7:37
Raje_23-Jun-16 7:37 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.