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

/ / 1 Comments

Dropzonejs Photo upload: In my previous article have demonstrated the simple use of dropzone js with Asp.net c#  where we upload an 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 the profile photos by using the awesome dropzone js library in asp.net c#.

Implementation of dropzoneJs:

First pls refer to 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 the respected file, here we go for a code ride :-)

# Html Markup:

As we have to update the profile photos, 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 images on the server. On the server-side, we have  hn_SimpeFileUploader.ashx generic handler by which we save uploaded files 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 looks 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();
        }
    });
});
//*

Conclusion: Using dropzonejs in asp.net we can upload images with drag-drop functionality.

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 Comments

  1. Andrew 05/12/2015 11:05:39
    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 ..