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.
Post your comments / questions
Recent Article
- Import "django.shortcuts" could not be resolved from source in Django Project
- How to add two numbers in Android Studio? | Source Code
- FindViewByID returns null in android studio -SOLVED
- Saving changes is not permitted in SQL SERVER - [SOLVED]
- Restore of database failed. File cannot be restored over the existing. -[SOLVED]
- One or more projects in the solution were not loaded correctly in Visual Studio 2019 | FIXED
- How to find Laptop's Battery Health?
- SOLVED-Related Field got invalid lookup: icontains error in Django
Related Article