Multiple Files Upload Using DropZone In Asp.net MVC

In this blog, we will see how to upload multiple files using DropZone In Asp.net MVC

What is DropZone?

DropZone is an open-source library that provides drag’n’drop file uploads with image previews. This library is independent and does not require a jQuery library. It is a very lightweight library. In this block, users can Upload Multiple Files for example images, documents, videos, and other types of files. Using this dropzone the user can also save uploaded files in different folders for that extension.

Implementation:

Step1: First of all create one MVC application.

Multiple-Files-Upload-Using-DropZone-In-Asp.net-MVC-1

Step2: then install the DropZone package in your application and Create One Folder Uploaded_Files.

Step3: Then Write the below code in the controller.

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace UplodMultipalFile_Using_DropZone.Controllers
{
    public class HomeController: Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult About()
        {
            ViewBag.Message = "Your application description page.";

            return View();
        }

        public ActionResult Contact()
        {
            ViewBag.Message = "Your contact page.";

            return View();
        }

        public ActionResult Upload()
        {
            bool isSavedSuccessfully = true;
            string fName = "";
            var fileExtension = "";
            var supportedTypesVideos = new[] { "mp4", "mov", "wmv", "avi", "avchd", "flv", "f4v", "swf", "mkv", "webm", "html5" };
            var supportedTypesFiles = new[] { "txt", "doc", "docx", "pdf", "xls", "xlsx","xml" };
            var supportedTypesImages = new[] {"jpeg","png","gif","jpg" };
            var supportedTypesOtheres = new[] { "tiff", "psd", "eps", "ai", "indd", "raw" };
            
            try
            {
                foreach (string fileName in Request.Files)
                {
                    HttpPostedFileBase file = Request.Files[fileName];
                    fName = file.FileName;  
                    fileExtension =  System.IO.Path.GetExtension(file.FileName).Substring(1);

                    if (file != null && file.ContentLength > 0) 
                    {
                        if (supportedTypesFiles.Contains(fileExtension))
                        {
                                var path = Path.Combine(Server.MapPath("~/Upload_Files/Pdf_Doc_Files"));
                                Download(path,file);
                        }
                        else if (supportedTypesImages.Contains(fileExtension))
                        {
                                var path = Path.Combine(Server.MapPath("~/Upload_Files/Image_Files"));
                                Download(path, file);
                        }
                        else if (supportedTypesOtheres.Contains(fileExtension))
                        {
                                var path = Path.Combine(Server.MapPath("~/Upload_Files/Others_Files"));
                                Download(path, file);
                        }
                        else if (supportedTypesVideos.Contains(fileExtension))
                        {
                                var path = Path.Combine(Server.MapPath("~/Upload_Files/Videos"));
                                Download(path, file);
                        }
                        else
                        {
                                var path = Path.Combine(Server.MapPath("~/Upload_Files/Dummy"));
                                Download(path, file);
                                return Json(new
                                {
                                    Message = "Invalid File Extension Please Select Valid File"
                                });
                        }
                    } 
                    else 
                    {
                        Console.WriteLine("File Not Found!");
                    }

                }
            }
            catch (Exception ex)
            {
                Console.WriteLine(ex);
                isSavedSuccessfully = false;
            }

            if (isSavedSuccessfully)
            {
                return Json(new
                {
                    Message = fName
                });
            }
            else
            {
                return Json(new
                {
                    Message = "Error in saving file"
                });
            }
        }

        public ActionResult Download(string path,HttpPostedFileBase file)
        {
            string pathString = System.IO.Path.Combine(path.ToString());
            var fileName1 = Path.GetFileName(file.FileName);
            bool isExists = System.IO.Directory.Exists(pathString);
            if (!isExists) System.IO.Directory.CreateDirectory(pathString);
            var uploadpath = string.Format("{0}\\{1}", pathString, file.FileName);
            file.SaveAs(uploadpath);
            return null;
        }

    }
}

Step4: Then select the images.

Write The below Code For the cshtml Page.

@{
    ViewBag.Title = "Home Page";
}

<script src="~/Scripts/dropzone/dropzone.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<link href="~/Scripts/dropzone/dropzone.min.css" rel="stylesheet" />

<div class="jumbotron" style="margin-top:5%;">
    <form action="~/Home/Upload" class="dropzone " id="dropzoneJsForm" style="background-color: #7dc1d8">
        <div></div>
    </form>
</div>

<script type="text/javascript">
    Dropzone.options.dropzoneJsForm =
    {
        init: function ()
        {
            this.on("addedfile", function (file)
            {
                var removeButton = Dropzone.createElement("<button class='btn btn-danger' style='margin-top:4%;border-radius: 12px;'>Remove</button>");
                var _this = this;
                removeButton.addEventListener("click", function (e)
                {
                    e.preventDefault();
                    e.stopPropagation();
                    _this.removeFile(file);
                });
                file.previewElement.appendChild(removeButton);
            });
        }
    };
</script>