Html5 drag and drop file upload in asp.net mvc

In this article, I will show you drag and drop file upload jQuery demo using the asp.net mvc application. I used dropzone.js file upload plugin, it provides a good user interface and also you can view the progress bar while uploading files or images.

Here, I used Generic handler (ashx file) for storing or saving the files, it was written with server-side coding. You should add namespace System.IO in the generic handler file as for we are dealing with files and data streams.

Step 1: Create an asp.net mvc project and right click on the controller folder and create a new controller and name it as HomeController. Inside the HomeController copy and paste the following code.

public ActionResult Index()
        {
            return View();
        }

Step 2: Right click on the index view and create a razor view named as index. Download jQuery multiple file upload plugin dropzone.js and dropzone.css and then include both files in the razor view or register as cdn. Copy and paste the Drag and drop Html code.

@{
    ViewBag.Title = "html5 file upload drag and drop";
}
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/min/dropzone.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/min/dropzone.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        Dropzone.autoDiscover = false;
        $("#dZUpload").dropzone({
            url: "GenericHandler.ashx",
            addRemoveLinks: true,
            success: function (file, response) {
                var imgName = response;
               file.previewElement.classList.add("dz-success");
                console.log("Successfully uploaded :" + imgName);
            },
            error: function (file, response) {
               file.previewElement.classList.add("dz-error");
            }
        });
    });
</script>
<h2>html5-file upload drag and drop</h2>
<div id="dZUpload" class="dropzone">
    <div class="dz-defaultdz-message"></div>
</div>

Step 3: Create a Generic Handler file in the application by the following steps. Right click on the project and select new item-- > Select Generic handler file and name it as GenericHandler.ashx. Also create a new folder and name it as UploadFiles. Copy and paste the following code on it,

public class GenericHandler : IHttpHandler
    {
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            string dirFullPath = HttpContext.Current.Server.MapPath("~/UploadFiles/");
            string[] files;
            int numFiles;
            files = System.IO.Directory.GetFiles(dirFullPath);
            numFiles = files.Length;
            numFiles = numFiles + 1;
            string str_image = "";
 
            foreach (string s in context.Request.Files)
            {
                HttpPostedFile file = context.Request.Files[s];
                string fileName = file.FileName;
                string fileExtension = file.ContentType;
 
                if (!string.IsNullOrEmpty(fileName))
                {
                    fileExtension = Path.GetExtension(fileName);
                    str_image = "file_" +numFiles.ToString() + fileExtension;
                    string pathToSave_100 = HttpContext.Current.Server.MapPath("~/UploadFiles/")+ str_image;
                   file.SaveAs(pathToSave_100);
                }
            }
            context.Response.Write(str_image);
        }

Description:The user just drag and drop the multiple images or files in the right place of website page as shown in the figure. You can view the progress bar while uploading files or images and  see the preview after uploaded. The uploaded files are saved in the project specified folder.