DropzoneJS + Asp.net: This article explains how in Asp.net C# using Dropzone js plugin we can upload bulk images. i.e. implement dropzone js plugin in Asp.net C# Webform for uploading images in bulk by just drag & drop. Also while, image uploading you can able to view progress bar, i.e. dropzone js progress bar.
I must say using this plugin, its very easy to upload multiple files or images in Asp.net, which also provide an excellent User Interface (check the output screenshot given below). In this, tutorial we are going to provide dropzone.js asp.net example.
You can also check, more dropzone-js related article, .i.e Profile photo upload with drag drop features, Upload and resize image using DropzoneJS with jQuery Ajax
Output:
Dropzone Js Intro:
DropzoneJS is an open source library that provides helpful features such as drag n drop file uploads with image previews. This awesome plugin is lightweight and is highly customizable. The time I am writing this article latest version on Dropzonejs is 4.0.1, so I used this latest version of in my web form.
Download File:
You can visit dropzonejs official website and get updated dropzone.js and dropzone.css file.
After downloading files let's put your hands into some coding :-) where we are going to save uploaded images using dropzone-js and server side coding in Asp.net c#.
Code: Bulk Image upload using Dropzone Js Asp.net C#
Open Visual Studio add new project, then add a Webpage (webform .aspx) in your application and named as DropzoneFileUpload.aspx.
In the head tag of Webpage include both files which you have downloaded .i.e dropzone.js and dropzone.css.
So your page header tag looks like this as written below
//*
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link href="dropzone/dropzone.css" rel="stylesheet" type="text/css" />
<script src="dropzone/dropzone.js" type="text/javascript"></script>
//*Html Markup:
Now add some HTML as written in below code.
Here we add a div tag with a class name dropzone as we have included dropzone.css, so adding this class will do some auto styling stuff ( good UI )
<div id="dZUpload" class="dropzone">
<div class="dz-default dz-message"></div>
</div>Dropzone.js Implementation :
Here's the nice piece of code for implementing dropzone Js. I am using it with jQuery. Here in dropzone Js javascript code on success method we added a console message which shows the uploaded image name this is how dropzone get server response .i.e dropzone JS get the file name.
Basically, on server-side we save and rename the image and returns image name back in response. Also, adding a class dz-success to it which indicates that the image was uploaded with a success tick marked over it.
As using dropzone.js we can upload bulk images at a time, so if you want to set some limit for the maximum file size. Then we can do it by setting dropzone js max file size attribute, this will allow us to set maximum file size. All you need to add this maxFiles: 10,
//*
$(document).ready(function () {
Dropzone.autoDiscover = false;
//Simple Dropzonejs
$("#dZUpload").dropzone({
url: "hn_SimpeFileUploader.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");
}
});
});
//*Note : Disabling autoDiscover, otherwise Dropzone will try to attach twice.
Server-side: Save & Rename filename.
Dropzone does not provide the server side implementation of handling the files.
For storing or saving the files we have to handle it with the server-side script, so here we adding a Generic Handler (ashx file) in our web project.
In Visual Studio add new item ⇒ Generic Handler ⇒ name as “hn_FileUpload.ashx”. Also create a new folder and named as Media Uploader, where we are going to save our uploaded files (images).
Code for saving uploaded files:
Now 1st add the namespace using System.IO in your generic handler file as we have to deal with files and data streams.
Below code will get the files, rename it and save it to our Media Uploader folder .i.e. ( MediaUploader ).
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
string dirFullPath = HttpContext.Current.Server.MapPath("~/MediaUploader/");
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];
// int fileSizeInBytes = file.ContentLength;
string fileName = file.FileName;
string fileExtension = file.ContentType;
if (!string.IsNullOrEmpty(fileName))
{
fileExtension = Path.GetExtension(fileName);
str_image = "MyPHOTO_" + numFiles.ToString() + fileExtension;
string pathToSave_100 = HttpContext.Current.Server.MapPath("~/MediaUploader/") + str_image;
file.SaveAs(pathToSave_100);
}
}
context.Response.Write(str_image);
}Yeah, it's done now Hit F5 and enjoy :)
In my next article will show you how to upload multiple images in bootstrap dropzone js .
You can also check these articles:
- Upload and Resize image using Dropzone Js in Asp.net.
- Preview Image before upload it with jQuery in Asp.net.
- Profile photo change with drag drop using Dropzone JS in Asp.net c#.
Thank you for reading, pls keep visiting this blog and share this in your network. Also, I would love to hear your opinions down in the comments.
PS: If you found this content valuable and want to thank me? 👳 Buy Me a Coffee
Post Comment
Your email address will not be published. Required fields are marked *