Implement drag and drop multiple files upload in Asp.net MVC using JQuery

Here I will explain How to Implement drag and drop multiple file upload in Asp.net MVC using JQuery. In this example we will use Dropzone JS library for uploading multiple files

Introduction:

Today in this article, I will explain How to Implement drag and drop multiple file upload in Asp.net MVC using Jquery.

In this example, we will use Dropzone JS library for uploading multiple files

Ok, let’s start to implement drag and drop file upload in asp.net MVC

Follow these steps in order to implement “Multiple files drag and drop file upload in Asp.net MVC using Jquery”

Step1: Create New Project.

 Go to File > New > Project > Web > Asp.net MVC web project > Enter Application Name > Select your project location > click to add button > It will show new dialog window for select template > here we will select empty project > then click to ok

Step2: Add Dropzone Libraries.

We need to add dropzone libraries like dropzone.min.js and dropzone.min.css in our project solutions.

 

<link href="~/Scripts/dropzone.min.css" rel="stylesheet" />

<script src="~/Scripts/dropzone.min.js"></script>

 

Step4: Create a controller.

Go to Solutions Explorer > right click on controller folder > Add Controller > Enter Controller name > Select template “empty MVC Controller   ” > Add.

Here I have created a controller “HomeController”

Now we will add a view for Index action where we will upload or drag and drop files.

 

Step6: Add new action method in a controller for upload files on the server.

Here I have created ‘uploade’ action method in HomeController, that looks like as follows   

 

Here I have to create ‘uplodeimg’ folder to save all files that we upload on View

 

public ActionResult uploade()

        {

            bool isSavedSuccessfully = true;

            string fname = "";

            try

            {

                foreach (string filename in Request.Files)

                {

                    HttpPostedFileBase file = Request.Files[filename];

                    fname = file.FileName;

                    if (file!=null && file.ContentLength > 0)

                    {

                        var path = Path.Combine(Server.MapPath("~/uploadeimg"));

                        string pathstring = Path.Combine(path.ToString());

                        string filename1 = Guid.NewGuid() + Path.GetExtension(file.FileName);

                        bool isexist = Directory.Exists(pathstring);

                        if (!isexist)

                        {

                            Directory.CreateDirectory(pathstring);

                        }

                        string uploadpath = string.Format("{0}\\{1}", pathstring, filename1);

                        file.SaveAs(uploadpath);

                    }

                }

            }

            catch (Exception)

            {

                isSavedSuccessfully = false;

            }

            if (isSavedSuccessfully)

            {

                return Json(new

                {

                   Message=fname

                });

            }

            else

            {

                return Json(new

                {

                    Message= "Error in Saving file"

                });

            }

        }

 

Entire HomeController look like as follows

 

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using System.IO;

namespace Dropdropfile.Controllers

{

    public class HomeController : Controller

    {

        //

        // GET: /Home/

 

        public ActionResult Index()

        {

            return View();

        }

 

        public ActionResult uploade()

        {

            bool isSavedSuccessfully = true;

            string fname = "";

            try

            {

                foreach (string filename in Request.Files)

                {

                    HttpPostedFileBase file = Request.Files[filename];

                    fname = file.FileName;

                    if (file!=null && file.ContentLength > 0)

                    {

                        var path = Path.Combine(Server.MapPath("~/uploadeimg"));

                        string pathstring = Path.Combine(path.ToString());

                        string filename1 = Guid.NewGuid() + Path.GetExtension(file.FileName);

                        bool isexist = Directory.Exists(pathstring);

                        if (!isexist)

                        {

                            Directory.CreateDirectory(pathstring);

                        }

                        string uploadpath = string.Format("{0}\\{1}", pathstring, filename1);

                        file.SaveAs(uploadpath);

                    }

                }

            }

            catch (Exception)

            {

                isSavedSuccessfully = false;

            }

            if (isSavedSuccessfully)

            {

                return Json(new

                {

                   Message=fname

                });

            }

            else

            {

                return Json(new

                {

                    Message= "Error in Saving file"

                });

            }

        }

    }

}

 

Step10: Add view for action in controller & design.

Right Click on Action Method > Add View > Enter View Name > Select View Engine (Razor) > Add.

It has fallowing code and design

@{

    Layout = null;

}

 

<!DOCTYPE html>

 

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <title>Index</title>

    <link href="~/Scripts/dropzone.min.css" rel="stylesheet" />

    <script src="~/Scripts/dropzone.min.js"></script>

</head>

<body>

    <div>

        <div id="mydrop">

            <form action="uploade" class="dropzone" id="dropzoneform" style="background-color:#00ff90"></form>

        </div>

    </div>

</body>

</html>

 

Step 11: Run Application.

We have done all steps, now it’s time to run the application