Drag & drop file upload in ASP.NET MVC

In one of my previous articles, I explained How to Upload Files Asynchronously using ASP.NET MVC application. Today I am going to show you how we can implement Drag & drop file upload in ASP.NET MVC application.

This is a very simple article today I am going to explain but Drag & drop file uploading is a very common requirement for any web application nowadays.  Drag and drop is a great HTML5 feature. So let Start implementing drag & drop file uploading in ASP.NET MVC application.


In this tutorial, we will see how to implement this using the FileDrop jQuery plugin.  jQuery FileDrop uses the HTML5 File API to allow users to drag multiple files from desktop to the browser, uploading each file to a user-specified URL.
Drop your files here

Uploaded files :

    Drag & drop file upload in ASP.NET MVC
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>@ViewBag.Title - My ASP.NET Application</title>
        <link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
        <link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
        <script src="~/Scripts/modernizr-2.6.2.js"></script>
    </head>
    <body>
        <div class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                    </ul>
                </div>
            </div>
        </div>
    
        <div class="container body-content">
            @RenderBody()
            <hr />
            <footer>
                <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
            </footer>
        </div>
    
        <script src="~/Scripts/jquery-1.10.2.min.js"></script>
        <script src="~/Scripts/bootstrap.min.js"></script>
        @RenderSection("Scripts", required:false)
    </body>
    </html>
    
    Posted By :