In this article I will explain with an example, how to Drag and Drop and upload files in ASP.Net MVC Razor.
Using the jQuery FileDrop plugin and HTML5, multiple files can be uploaded using the Drag and Drop feature in ASP.Net MVC Razor.
Note: For beginners in ASP.Net MVC, please refer my article ASP.Net MVC Hello World Tutorial with Sample Program example.
 
 
View
The following View consists of two HTML DIV elements and a Button. One DIV will be the area for dropping files and the other will display the list of uploaded files.
Configuring the Plugin
The jQuery FileDrop plugin has been applied to the dropSection DIV and the Button ID is set into the fallback_id property of the jQuery FileDrop plugin.
 
Plugin properties
url – URL of the Generic Handler.
paramname – Name of the parameter which will contain the File data in Request.Form collection. Not required when Generic Handler is used.
maxfiles – Maximum number of simultaneous upload of Files.
maxfilesize – Maximum allowed File size in MB.
 
Plugin events
dragOver – Raised when File is dragged into the Drop section.
dragLeave – Raised when the File of dragged out of the Drop section.
drop – Raised when the File is dragged and dropped.
uploadFinished – Raised when the upload of a file is completed.
afterAll – Raised when upload of all files dragged together are completed.
 
Plugin validations
allowedfileextensions – Only the Files with the specified extension will be allowed to be uploaded.
allowedfiletypes – Only the Files with the specified MIME type (Content Type) will be allowed to be uploaded.
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width"/>
    <title>Index</title>
    <style type="text/css">
        body {
            font-family: Arial;
            font-size: 10pt;
        }
 
        #dropSection {
            height: 300px;
            width: 600px;
            background-color: skyblue;
        }
 
        #btnUpload {
            display: none;
        }
 
        .active {
            background-color: yellow !important;
        }
    </style>
</head>
<body>
    <div id="dropSection">
    </div>
    <br/>
    Uploaded Files:
    <hr/>
    <div id="uploadedFiles">
    </div>
    <input type="button" id="btnUpload" value="Upload"/>
    <script type="text/javascript" src='https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js'></script>
    <script src="~/Scripts/filedrop.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#dropSection").filedrop({
                fallback_id: 'btnUpload',
                fallback_dropzoneClick: true,
                url: '@Url.Action("Upload")',
                //allowedfiletypes: ['image/jpeg', 'image/png', 'image/gif', 'application/pdf', 'application/doc'],
                allowedfileextensions: ['.doc', '.docx', '.pdf', '.jpg', '.jpeg', '.png', '.gif'],
                paramname: 'fileData',
                maxfiles: 5, //Maximum Number of Files allowed at a time.
                maxfilesize: 2, //Maximum File Size in MB.
                dragOver: function () {
                    $('#dropSection').addClass('active');
                },
                dragLeave: function () {
                    $('#dropSection').removeClass('active');
                },
                drop: function () {
                    $('#dropSection').removeClass('active');
                },
                uploadFinished: function (i, file, response, time) {
                    $('#uploadedFiles').append(file.name + '<br />')
                },
                afterAll: function (e) {
                    //To do some task after all uploads done.
                }
            })
        })
    </script>
</body>
</html>
 
 
Namespaces
You will need to import the following namespace.
using System.IO;
 
 
Controller
The Controller consists of two Action methods.
Action method for handling GET operation
Inside this Action method, simply the View is returned.
Action method for handling POST operation
This Action method handles the POST operation i.e. uploading of Files.
It accepts the fileData parameter which is a collection of type HttpPostedFileBase.
Note: The name of the HttpPostedFileBase parameter must be equal to the paramname property value of the jQuery FileDrop plugin.
 
A loop is executed over the HttpPostedFileBase collection and one by one each file is saved to the Directory (Folder).
public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        return View();
    }
 
    [HttpPost]
    public ActionResult Upload(List<HttpPostedFileBase> fileData)
    {
        string path = Server.MapPath("~/Uploads/");
        foreach (HttpPostedFileBase postedFile in fileData)
        {
            if (postedFile != null)
            {
                string fileName = Path.GetFileName(postedFile.FileName);
                postedFile.SaveAs(path + fileName);
            }
        }
 
        return Content("Success");
    }
}
 
 
Uploading Large files
In order to upload large files, you will need to set the following setting in the system.web section of the Web.Config file.
The executionTimeout value is set to 240 seconds while the maxRequestLength is set to the maximum size of the files in Bytes.
Note: These values can be changed as per your requirement.
 
<httpRuntime executionTimeout="240" maxRequestLength="1048576" />
 
 
Screenshot
Implement Drag and Drop File upload in ASP.Net MVC
 
 
Downloads
Download Code