Total Pageviews

Monday 5 October 2015

How to use dropzone and cropper in asp.net






Include scripts (inside head tag and get bootstrap links from getbootstrap.com)
--------------------
 <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <link rel="stylesheet" href="http://localhost:1202/code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />

    <script src="Jquery/bootstrap.min.js"></script>
    <link href="Jquery/bootstrap.min.css" rel="stylesheet" />



    <link href="https://cdn.rawgit.com/fengyuanchen/cropper/v0.11.1/dist/cropper.min.css" rel="stylesheet">
    <script src="https://cdn.rawgit.com/fengyuanchen/cropper/v0.11.1/dist/cropper.min.js"></script>

    <script src="https://rawgit.com/enyo/dropzone/master/dist/dropzone.js"></script>
    <link rel="stylesheet" href="https://rawgit.com/enyo/dropzone/master/dist/dropzone.css" />

//Script for dropzone
-------------------------
<script>

        $(document).ready(function () {
            Dropzone.autoDiscover = false;
            //Simple Dropzonejs
            $("#dZUpload").dropzone({
                url: "profile_pic.ashx",
                addRemoveLinks: true,
                maxFiles: 1,
                maxFilesize: 5,

                //previewsContainer: "#previews",

                dictDefaultMessage: "Drag or click to add profile image",


                success: function (file, response) {
                    var imgName = response;
                    file.previewElement.classList.add("dz-success");
                    console.log('Successfully uploaded :' + imgName);



                    var imgName = response;
                    d = new Date();
                    $("#imgcrop").attr("src", "");

                    $(".photo_to_crop1").attr("src", "dump_images/" + imgName + "?" + d.getTime());



                    $("#img_name").attr("value", imgName);



                    intialize();
                },
                error: function (file, response) {
                    file.previewElement.classList.add("dz-error");
                },

                sending: function (file, xhr, formData) {



                    formData.append('name', $("input[name=name]").val());



                },
                complete: function (response) {

                }



            });
        });
    </script>


//Script for cropper
-----------------------

    <script>



        function intialize() {

            var imageURL = $(".photo_to_crop1").attr("src");
            var imageBox = $('.photo_to_crop');


            var options = {
                aspectRatio: 1,

                movable: true,
                zoomable: true,
                responsive: true,
                center: true,
                scalable: true,
                crop: getcroparea
            };

            if (imageURL != null) {
                console.log("It's not empty, building dedault box!");
                var DefaultCropBoxOptionObj = {
                    height: 25,
                    width: 25
                };
                console.log(DefaultCropBoxOptionObj);
                imageBox.cropper(options);
                imageBox.cropper('setData', DefaultCropBoxOptionObj);
                imageBox.cropper('replace', imageURL);

            }
        }


        function getcroparea(c) {
            $('#hdnx').val(parseInt(c.x));
            $('#hdny').val(parseInt(c.y));
            $('#hdnw').val(parseInt(c.width));
            $('#hdnh').val(parseInt(c.height));
            $('#hdnr').val(parseInt(c.rotate));
            $('#hdnsx').val(parseInt(c.scaleX));
            $('#hdnsy').val(parseInt(c.scaleY));
        };




    </script>




cropper.aspx
-------------------

<form id="form1" runat="server">

        <div id="dZUpload" class="dropzone">
            <div class="dz-default dz-message">

                <p style="font-family: 'Open Sans'">Drop a photo here or click to add profile photo</p>
            </div>
        </div>
        <div>
            <input id="username" type="text" name="name" value="<% =ServerValue %>" style="display: none;" />

            <img id="img1" alt="sample image" src="" class="photo_to_crop1" style="display: none;" />
              <div style="padding-bottom: 5px; padding-top: 5px; width: 300px">

                <img id="imgcropped" runat="server" visible="false" class="img-responsive" />

                <h5>
                    <asp:Label ID="my_ad_err_lbl" runat="server" Text=""></asp:Label></h5>
            </div>
            <div class="container cropcontainer">
                <img id="imgcrop" alt="sample image" src="" class="photo_to_crop" />
                <input type="text" style="display: none" id="img_name" name="img_name" value="user.png" />
            </div>

            <input type="hidden" id="hdnx" runat="server" />
            <input type="hidden" id="hdny" runat="server" />
            <input type="hidden" id="hdnw" runat="server" />
            <input type="hidden" id="hdnh" runat="server" />
            <input type="hidden" id="hdnr" runat="server" />
            <input type="hidden" id="hdnsx" runat="server" />
            <input type="hidden" id="hdnsy" runat="server" />

            <asp:Button ID="btncrop" runat="server" OnClick="btncrop_Click" Text="Crop and Save" CssClass="button3" OnClientClick="reload()" />
            <asp:Button ID="save_original" runat="server" OnClick="btnsave_original_Click" Text="Save original" CssClass="button3" OnClientClick="reload()" Style="display: none;" />
            <asp:Button ID="pic_delete" runat="server" OnClick="btndelete_Click" Text="Delete Photo" OnClientClick="deletepic()" CssClass="button3" />

          




        </div>



    </form>


Code behind
----------------

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.IO;
using Image = System.Drawing.Image;
using System.Drawing;
using System.Data.SqlClient;
using System.Configuration;

public partial class cropper : System.Web.UI.Page
{

    string con = ConfigurationManager.ConnectionStrings["myconnection"].ConnectionString;
    public string ServerValue = String.Empty;
    public string photo_loc = String.Empty;
    public string db_photo_name = String.Empty;
    public string db_photo_loc = String.Empty;
    public string db_photo_ext = String.Empty;
    protected void Page_Load(object sender, EventArgs e)
    {

        if (Request.Cookies["userdata"] != null)
        {
            HttpCookie login = Request.Cookies["userdata"];
            string user = login["username"];

            ServerValue = user;

            //load_profile_pic();

        }

    }


    protected void btncrop_Click(object sender, EventArgs e)
    {
        try
        {

            //string photo_path = imgcrop.Src;

            string photo_name = Request.Form["img_name"];

            string fname = photo_name;
            string fpath = Path.Combine(Server.MapPath("~/dump_images"), fname);
            Image oimg = Image.FromFile(fpath);
            Rectangle cropcords = new Rectangle(
            Convert.ToInt32(hdnx.Value),
            Convert.ToInt32(hdny.Value),
            Convert.ToInt32(hdnw.Value),
            Convert.ToInt32(hdnh.Value)
            

            
            );
            string cfname, cfpath;
            Bitmap bitMap = new Bitmap(cropcords.Width, cropcords.Height, oimg.PixelFormat);
            Graphics grph = Graphics.FromImage(bitMap);
            grph.DrawImage(oimg, new Rectangle(0, 0, bitMap.Width, bitMap.Height), cropcords, GraphicsUnit.Pixel);
            cfname = "crop_" + fname;
            cfpath = Path.Combine(Server.MapPath("~/profile_images"), cfname);
            bitMap.Save(cfpath);
            imgcropped.Visible = true;
            imgcropped.Src = "~/profile_images/" + cfname;
            db_photo_loc = "profile_images/" + cfname;
            db_photo_name = cfname;





            string id = db_photo_name;

            //UPDATE THE IMAGE IN DB
            try
            {


                SqlConnection conn = new SqlConnection(con);
                SqlCommand sqlcomm = new SqlCommand(" write your query for update", conn);
                conn.Open();
                sqlcomm.ExecuteNonQuery();
                conn.Close();
                my_ad_err_lbl.Text = "Profile photo cropped and saved.";


                if (my_ad_err_lbl.Text == "Done")
                {


                }

            }
            catch (Exception ex)
            {
                my_ad_err_lbl.Text = ex.Message;


            }
            finally
            {

            }



        }
        catch (Exception ex)
        {
            throw ex;
        }
    }



    protected void btndelete_Click(object sender, EventArgs e)
    {

        delete_photo();
    }


    public void delete_photo()
    {


        //DELETE THE IMAGE BEFORE UPDATE
        try
        {
            SqlConnection conn = new SqlConnection(con);
            conn.Open();
            SqlCommand cmd = new SqlCommand("  write your query to delete    '", conn);
            SqlDataReader dr = cmd.ExecuteReader();


            while (dr.Read())
            {
                string imageurl = dr["profile_img_loc"].ToString();
                string imageFilePath = HttpContext.Current.Server.MapPath("~/" + imageurl);
                System.IO.File.Delete(imageFilePath);

            }
        }
        catch (Exception ex)
        {
            my_ad_err_lbl.Text = ex.Message;
        }
        finally
        {

        }


    }

    protected void btnsave_original_Click(object sender, EventArgs e)
    {
        string id = db_photo_name;

        //UPDATE THE IMAGE IN DB
        try
        {


         

        }
        catch (Exception ex)
        {
           


        }
        finally
        {

        }

    }
}


profile_pic.ashx
---------------------
<%@ WebHandler Language="C#" Class="profile_pic" %>

using System;
using System.Web;
using System.IO;

using System.Data.SqlClient;
using System.Configuration;
using System.Data;

public class profile_pic : IHttpHandler {
    
    public void ProcessRequest (HttpContext context) {


        string con = ConfigurationManager.ConnectionStrings["prayermeeting_mdf"].ConnectionString;
        SqlConnection sqlconn = new SqlConnection(con);
        context.Response.ContentType = "text/plain";
        //context.Response.Write("Hello World");
        
        
        
        
        
        context.Response.ContentType = "text/plain";
            string dirFullPath = HttpContext.Current.Server.MapPath("~/profile_images/");
            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);


                    if (fileExtension == ".jpeg" || fileExtension == ".JPEG" || fileExtension == ".png" || fileExtension == ".PNG" || fileExtension == ".jpg" || fileExtension == ".JPG")
                    {
                        string user = context.Request["name"];
                        //context.Response.Write("your username: " + user + fileExtension);




                     

                        string profile_pic_id = DateTime.Now.ToString("yyyy_MM_dd_HH_mm_ss");

                        str_image = profile_pic_id + user + fileExtension;


                       
                        
                        string id=profile_pic_id + user;

                        string pathToSave = HttpContext.Current.Server.MapPath("~/dump_images/") + str_image;
                        

                        //context.Response.Write(str_image);

                        string loc = "dump_images/" + str_image;


                        //DELETE THE IMAGE BEFORE UPDATE
                  
                        
                        //SAVE THE IMAGE
                        file.SaveAs(pathToSave);



                        // UPDATE THE IMAGE IN DB
                   
                    
                    }
                    
                    
                    
                }
            } 
            context.Response.Write(str_image);
    }
    
    public bool IsReusable {
        get {
            return false;
        }
    }