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

//*
 <img id="imgProfile"  class="profilePic dropzone" src="default.png"  title="Change profile photo"  alt="pic" />
//*

This is my profile page markup looks

//*
    <div>
        <div class="fl-Left" style="width: 150px; margin-left: 30px; margin-right: 30px;">
            <img id="imgProfile" title="Change profile photo" class="profilePic dropzone" src="MediaUploader/MyPHOTO_7.png"
                alt="pic" />
            <div> Change profile photo</div>
        </div>
        <div class="fl-Left" style="width: 80%">
            <dl>
                <dt>Name: </dt>
                <dd>John Don</dd>
                <dt>Age: </dt>
                <dd>23</dd>
                <dt>Gender: </dt>
                <dd>Male</dd>
                <dt>Day of Birth:</dt>
                <dd>12th May 1986</dd>
            </dl>
        </div>
        <div class="fl-Left" style="width: 60%;">
            <p><strong>About Me : </strong>Lorem Ipsum is simply dummy text of the printing and
                typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever
                since the 1500s, when an unknown printer took a galley of type and scrambled it
                to make a type specimen book.
            </p>
        </div>
    </div>
//*

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

//*
$(document).ready(function () {
    Dropzone.autoDiscover = false;
    var arrOfImageName = [];
    $("#imgProfile").dropzone({
        url: "hn_SimpeFileUploader.ashx",
        addRemoveLinks: false,
        success: function (file, response) {
            alert("Successfully uploaded.");      
        },
        error: function () {
            alert("Woops something went worng !");
        },
        complete: function () {
            $(".dz-preview").remove();
        }
    });
});
//*

 

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

//*
 success: function (file, response) {
            var imgName = response;
            $("#imgProfile").attr("src", "MediaUploader/" + imgName);
        }
//*

 

Our full code looks like this

//*
$(document).ready(function () {
    Dropzone.autoDiscover = false;
    var arrOfImageName = [];
    $("#imgProfile").dropzone({
        url: "hn_SimpeFileUploader.ashx",
        addRemoveLinks: false,
        success: function (file, response) {
            var imgName = response;
            $("#imgProfile").attr("src", "MediaUploader/" + imgName);
             $(".profilePic").show();
        },
        error: function () {
            alert("Woops something went worng !");
        },
        complete: function () {
            $(".dz-preview").remove();
        }
    });
});
//*

 

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!

Sharing is Sexy:    
Satinder Singh

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


One comment on “Dropzonejs asp.net : Profile photo upload with drag drop features”

  1. Andrew

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


Post Comment


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