Dropzonejs asp.net : Profile photo upload with drag drop features



Dropzonejs Photo upload: In my previous article have demonstrated simple use of dropzonejs with Asp.net c#  where we upload image and save it on the server  at Media folder. Here in this article will explain another good use of Dropzonejs to upload the image. The scenario is mostly in every web application we have an Account setting page, where the user changes his / her profile photo.

So in this article will update profile photo by using awesome dropzonejs library in asp.net c#.

Implementation of dropzoneJs:

First pls refer my previous article and download both the file .i.e dropzone.js and dropzone.css so you can include these files in your web form. After downloading respected file, here we go for code ride 🙂

# Html Markup:

As we have to update profile photo, so we added an image tag with default image src. Add class ‘dropzone’ to your image tag so now your code look like given below

This is my profile page markup looks

# Jquery :

Code to implement dropzonejs , this piece of jQuery code will upload and save selected image on the server. On the server side, we have  hn_SimpeFileUploader.ashx  generic handler by which we save uploaded file at MediaFolder.


Now we are able to save the uploaded image on the server, but it didn’t update your image tag. Don’t worry jQuery is here to do all this client side stuff.  Below small piece of jQuery code will update our image source with newly uploaded image src, On success we get image name so set img attr code look like this


Our full code looks like this


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


  1. I have tried Dropzone js snippet in my asp .net c# project. Its working good in Chrome and Firefox. But its not working in safari. Do you have any idea where i am making mistake ? Or is it dropzone js issue ?

    Thanks Nice article ..