C# + Dropzone js : Easy Way to Upload Images [Drag & Drop Feature]

 DropzoneJs +  This article explains how in C# using Dropzone js plugin we can upload bulk images. i.e. implement dropzone js plugin in C# Webform for uploading images. 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, which also provide an excellent User Interface (check the output screenshot given below). In this, tutorial we are going to provide dropzone.js 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 


Dropzone Js uplaod image in C# example.

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 copy from my source code, or 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 c#.

Code: Bulk Image upload using Dropzone Js 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=""></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>

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 
        url: "hn_SimpeFileUploader.ashx",
        addRemoveLinks: true,
        success: function (file, response) {
            var imgName = response;
            console.log(“Successfully uploaded :” + imgName);
        error: function (file, response) {

 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;

Yeah, it’s done now Hit F5 and enjoy 🙂

OutPut:Dropzone Js uplaod image in C# example.

Download Source Code ⇓

In my next article will show you how to upload multiple images in bootstrap dropzone js .

You can also check these articles:

  1. Upload and Resize image using Dropzone Js in
  2. Preview Image before upload it with jQuery in
  3. Profile photo change with drag drop using Dropzone JS in c#.

Hope you enjoyed this Dropzone.js C# tutorial. If you have any recommendations, please let us know what you think in the comment section below! See you again next time!

If You Liked It, could you do me a favour and tell your friends !! By sharing it on Facebook, Google+ or Twitter.

Satinder Singh

Hi all, am Founder and Author of, also atypical polyglot programmer from Bombay, India. I have a passion to create, solve, and deploy software applications.
       ForEach ( minute in MyLife ) { myExperience++ ; }

47 comments on “ C# + Dropzone js : Easy Way to Upload Images [Drag & Drop Feature]”

  1. Bench

    Hi Sir Satinder,
    I will retype my comment, it seems not reflected.
    I left my code working but now its not.
    It should call asmx file upon upload image but not working. i already tried to debug it but it really dont go through my asmx file..
    Is there any JS updates? Please help, it passed the testing already but now it has issue.

    • Satinder singh

      Hi Bench,
      Pls download the working solution from github , link provided in above article. Might be Dropzone JS have updated not sure, but the above source code is working for me on my server production

  2. Jose

    It only saves 3 files when I try to upload 4 or 5. The Dropzone shows with a check mark all 5 but only uploads 3 🙁
    Help! 🙂

    • Satinder singh

      You can set maximum size by using dropzonejs option maxFiles: 10. If you still facing same issue, then pls download the Sample Source code (provided above in article) and let me know.

  3. ajjawi

    could you please tell me how to pass the savepath string from httphandler to the code behind for each file uploaded ?
    thank you in advance

  4. Mark

    Hi Satinder,

    Thank you for such a great script! it works very well for me apart from the delete function. The delete function deletes the images (thumbnails) from the upload window but does not delete them from the folder.

    Should your script do this correctly or is there something else I need to do?

  5. Irshad

    Sir can you help me please..

    The process cannot access the file ~\MediaUploader\MyPHOTO_4.jpg’ because it is being used by another process.

    • Satinder singh

      Hi Irshad,
      Thanks for visiting, Well the error msg clearly means, that the file is already being used by another program. Have you got this error from the above code or you did some tweak in existing code ? Coz same code is working for me in my Production Version. Do let me know

  6. Maria

    Its a cakewalk with your code…
    Hats Off!!!

    Any extra settings to make it work within a usercontrol?
    The drag drop UI itself is not appearing in the user control (
    Please advice!

  7. mark

    Is there a way I could load initially my images to dropzone. My images is saved to SQL server as image and I just need to display it as thumb to dropzone

  8. hello


    How can i remove photos from server ? There are removedfile event but i couldnt trigger this event to work. Can you add sample please. Thanks

  9. Bhushan

    this article is really good for display images but i want to upload it to table in my sql database in single submit button

    • Satinder singh

      @Bhusan: I didn’t got it, can you elaborate it more? Do you want to save the Image (binary data ) into Database( MS SQL server ), or you just want to save the image path into your database

        • Bhushan

          Both images and ImagesPath save into database ….in single click of submit button…

          Thanks for replying me…

        • Satinder singh

          Hi Bhushan,
          You want to save image path into database, after image file gets saved, well without knowing your database structured, it difficult for me to answer. But you can do like by making a method which save the path into database and call that method above ‘context.Response.Write(str_image);’ . So you method would be something like this

          public void UpdateImagePath(string imagePath)
          SqlCommand cmd = new SqlCommand(“update myTable set [email protected], conn);
          cmd.CommandType = CommandType.Text;
          cmd.Parameters.AddWithValue(“@imagePath”, imagePath);
          int temp = cmd.ExecuteNonQuery();
          return temp;

          • Bhushan

            what you not understand …

            i used your dropzone code for display images .. (right) now i want to upload those images which are select from the dropzonejs code to the my sql server “table” table name is “ImagesUpload” (right) by clicking single submit button… and images will be display in the table by select * from[database]. [ImagesUpload]


            please see this link .. those images select it goes to the table in my database

          • Satinder singh

            Hi ajjawi,
            On server-side image uploading code is written using Generic Handler file .i.e (ashx file). You can download the source code and you will see handler file name as hn_SimpeFileUploader.ashx which i have used in my sample code

  10. jagruti

    Nice article

    i want the multiple images upload in sql server 2008 in c# & display as gallery

    can u help me


Post Comment

Your email address will not be published. Required fields are marked *

rs-4c53b76b1a3af76876d6c88526fd3169 2594 | get | from in-call cache | 38 | 0 | options | notoptions 2595 | get | from in-call cache | 240547 | 0 | options | alloptions 2596 | get | from in-call cache | 38 | 0 | options | notoptions 2597 | get | from in-call cache | 240547 | 0 | options | alloptions 2598 | get | from in-call cache | 38 | 0 | options | notoptions 2599 | get | from in-call cache | 240547 | 0 | options | alloptions Page Caching using disk: enhanced Page cache debug info: Engine: disk: enhanced Cache key: Creation Time: 1501029814.000s Header info: Content-Type: text/html; charset=UTF-8 X-Powered-By: W3 Total Cache/ X-Pingback: Link: ; rel="" Link: ; rel=shortlink Served from: @ 2017-07-26 00:43:34 by W3 Total Cache -->