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

Our Reader Score
[Total: 1 Average: 5]
 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

 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 )

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,

 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 ).

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.

Get your Printable Copy


  1. 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! 🙂

    • Hi,
      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.

  2. 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

  3. 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?

  4. Sir can you help me please..

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

    • 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

  5. 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!

  6. 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

  7. 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

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

    • @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

        • 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;

          • 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

          • 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

  9. Nice article

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

    can u help me