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 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, 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 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 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 :)

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

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

Subscribe to our newsletter

Get the latest and greatest from Codepedia delivered straight to your inbox.

Post Comment

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


  1. pxov 05/05/2015 16:52:55
    Amazing, this worked like a charm! Cheers!
  2. Satinder singh 05/22/2015 18:15:59
    Thanks for the comment :-)
  3. ade 06/19/2015 07:24:20
    Nice Share, thanks
  4. Satinder singh 06/19/2015 08:52:56
    @ade: Am glad you find this usefull. do check the solution file of DropzoneJs C# example, you can download it from GitHub"
  5. jagruti 06/26/2015 12:45:12
    Nice article i want the multiple images upload in sql server 2008 in c# & display as gallery can u help me thanks
  6. Satinder singh 06/26/2015 21:19:05
    @jagruti: Thanks, Well here in this post using dropzone.js already multiple images are getting upload. For display Image gallery you can use Repeater Control with an Image tag inside it, Later you can apply lightbox jQeury Plugin to make your gallery fancy"
  7. Bhushan 07/03/2015 08:44:21
    this article is really good for display images but i want to upload it to table in my sql database in single submit button
  8. Satinder singh 07/03/2015 11:11:29
    @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
  9. Bhushan 07/04/2015 10:11:45
    yes i want save images to the sql server database...
  10. Bhushan 07/04/2015 10:15:19
    Both images and ImagesPath save into database single click of submit button... Thanks for replying me...
  11. Bhushan 07/06/2015 11:39:06
    reply sir, its really help me to complete to project..
  12. Bhushan 07/06/2015 11:39:30
    reply sir, its really help me to complete a project..
  13. Satinder singh 07/07/2015 06:50:03
    First of all dropzonejs is not for dispalying image (Not a image gallery), Its for uploading image to the server. Check the tutorial properly here in above tutorial inside MediaUploader folder images get uploaded. Just download the working project file from github
  14. hello 10/05/2015 17:51:40
    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
  15. Tim Kochanski 10/16/2015 01:14:42
    Any advice on implementing in Razor Webpages, not web forms, or mvc? --Tim
  16. mark 11/03/2015 06:37:30
    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
  17. Maria 11/23/2015 18:23:43
    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!
  18. Majdi Al-Sharif 12/12/2015 15:45:14
    Thank you singh, but i have a problem with my page!, I've Blank Div
  19. Satinder singh 12/14/2015 15:30:37
    Hi Majdi Al-Sharif, I think you have missed the CSS file, pls download the solution copy and add CSS file in your webpage. Hope this could solve your problem
  20. Irshad 01/02/2016 09:44:24
    Sir can you help me please.. The process cannot access the file ~\MediaUploader\MyPHOTO_4.jpg' because it is being used by another process.
  21. Satinder singh 01/09/2016 12:50:29
    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
  22. Mark 01/20/2016 12:33:12
    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?
  23. hurel 02/15/2016 13:20:10
    Thank you......
  24. ajjawi 02/24/2016 19:08:17
    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
  25. ajjawi 02/28/2016 10:01:59
    sir where did you put this function in http handler or page ?
  26. Satinder singh 03/01/2016 15:19:57
    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
  27. Satinder singh 03/01/2016 15:21:33
    Pls check the article properly, have tried to explain step by step. Its good if you download the source file and debug it Happy Coding :)
  28. Shree 04/24/2016 20:17:03
    context.Request.Files always returns null for me. please help me in this.
  29. Satinder singh 04/26/2016 06:01:38
    Hi Shree, I never face this issue, pls download the source code and let me know if still u have same problem
  30. Jack C 07/21/2016 21:13:38
    WOW thank you so much been working on this for hours !!
  31. Satinder singh 07/27/2016 12:18:38
    Great to hear! Thanks Jack!
  32. Lucy Parry 08/11/2016 10:55:09
    This worked like a dream! Thanks so much for the tutorial
  33. Satinder singh 08/11/2016 11:40:13
    Thank you Lucky!
  34. Jose 08/30/2016 03:04:57
    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! :)
  35. Jose 08/30/2016 03:12:58
    It only uploads the number of files I dropped minus 2... Any help?
  36. Satinder singh 08/30/2016 05:13:27
    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.
  37. Humberto 09/27/2016 05:17:05
    Very easy, work fine
  38. Satinder singh 10/13/2016 06:45:14
    You welcome Humberto and keep visiting
  39. Jugraj Singh 12/05/2016 11:57:18
    Can we Upload Image on Button Click
  40. Satinder singh 12/06/2016 06:04:18
    Yes drozone js allow to upload on click, all you need to use processQueue(); on your button click
  41. Bench 12/12/2016 06:25:11
    Hi Sir Satinder, I left my code working but recently its not working. I can see this blog is updated October 26, I think the code dont work some time around those dates too. Is it related to some JS updates? dropzone dont call the .asmx anymore when im uploading file.
  42. Bench 12/12/2016 06:36:30
    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.
  43. Satinder singh 12/18/2016 18:03:19
    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
  44. Jhon Vicent 01/15/2017 23:06:40
    Works great, you're the best
  45. Satinder singh 01/16/2017 10:12:43
    Thanks for reading Jhon :)
  46. Widia 06/06/2017 09:07:07
    Hi, Thanks for the tutorial. I tried to download the code, however I got problem to run the solution. I got this error One or more Projects in the solution were not loaded correctly..". Could you help me to get off this error? Many thanks"
  47. Marcelo 08/11/2017 14:40:26
    Hi, there is a way to block the control to the maxfiles?
  48. Alfonso Arias 08/15/2017 03:22:53
    Good Day, read the article and it was wonderful! But was wondering how could I upload other files like document files? Thanks!
  49. charles 09/05/2017 03:12:55
    hola Satinder, felicitaciones por este excelente tutorial. el codigo me funciono perfecto. pero revisando un poco al momento de remover las imagenes cargadas esta solo remueve de la pantalla, pero no elimina de la ruta donde se guardó(MediaUploader). como podria eliminar la imagen subida de la ruta especificada dando clic en remover. saludos, Charles
  50. Satinder singh 10/26/2017 07:02:10
    Hi Widia, Pls download file from GitHub, its working for me
  51. Satinder singh 10/26/2017 07:11:11
    Yes, that might be due to updated JS files.
  52. pratik 03/26/2018 10:30:42
    hi, i use this Dropzone.autoDiscover = false; line but still its open twice in my project. can you help me please.
  53. pietro 07/17/2021 15:19:57
    Hi, this code is great! Is possibile to intercept the "remove file" click in order to remove it form the uplad folder and/or from database? thanks!
  54. Avinash 11/19/2021 06:10:12
    Hello, Nice Article, it works like charm. Few Questions: 1) Can in reorder the uploaded images? 2) Can i upload videos and play?
  55. C Renee 02/04/2022 06:07:26
    You saved my butt. Thank you!