Implement drag and drop multiple files upload in Asp.net MVC using JQuery
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
