How to validate,upload,crop and store image in folder in asp.net using jQuery

ntroduction: In this article i am going to explain how to validate image type(extension) , upload image through asp.net fileupload control and then crop the image using jQuery plugin and save cropped image to folder.

Description: So basically this article covers the following:
  • How to validate image type before upload or we can say allowing only specified type of files to upload and restrict all other type of images.
  • How to upload image through file upload control.
  • How to crop uploaded image using jQuery
  • How to store cropped image in folder and display it.

mplementation:  Let's create a simple website page(default.aspx) and write the following :

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default"  %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
   
    <script src="Scripts/jquery.Jcrop.js" type="text/javascript"></script>
    <link href="CSS/jquery.Jcrop.css" rel="stylesheet" />
    <script language="javascript" type="text/javascript">
        $(document).ready(function () {
            $('#<%=imgToCrop.ClientID%>').Jcrop({
                onSelect: getAreaToCrop
            });
        });
        function getAreaToCrop(c) {
            $('#XCoordinate').val(parseInt(c.x));
            $('#YCoordinate').val(parseInt(c.y));
            $('#Width').val(parseInt(c.w));
            $('#Height').val(parseInt(c.h));
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div style="width: 540px">
        <fieldset>
            <legend>Upload, crop and save image in asp.net</legend>
            <table>
                <tr>
                    <td>
                        Select image to upload :
                    </td>
                    <td>
                        <asp:FileUpload ID="FileUpload1" runat="server" />
                    </td>
                    <td>
                        <asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="btnUpload_Click" />
                    </td>
                </tr>
                <tr>
                    <td colspan="3">
                        <asp:Image ID="imgCropped" runat="server" />
                    </td>
                </tr>
                <tr>
                    <td colspan="3">
                        <asp:Label ID="lblMsg" runat="server" ForeColor="Red" />
                    </td>
                </tr>
                <tr>
                    <td colspan="3">
                        <asp:Button ID="btnReset" runat="server" Text="Reset" Visible="false"OnClick="btnReset_Click" />
                    </td>
                </tr>
            </table>
            <asp:Panel ID="pnlCrop" runat="server" Visible="false">
                <table>
                    <tr>
                        <td>
                            <asp:Image ID="imgToCrop" runat="server" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Button ID="btnCrop" runat="server" Text="Crop & Save" OnClick="btnCrop_Click" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input id="XCoordinate" type="hidden" runat="server" />
                            <input id="YCoordinate" type="hidden" runat="server" />
                            <input id="Width" type="hidden" runat="server" />
                            <input id="Height" type="hidden" runat="server" />
                        </td>
                    </tr>
                </table>
            </asp:Panel>
        </fieldset>
    </div>
    </form>
</body>
</html>

Asp.Net C# code  to validate,upload,crop and store image to folder

In the Code file(default.aspx.cs) write the code as:

First of all add following namespaces

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;
using System.Drawing;

then write the code as:

protected void btnUpload_Click(object sender, EventArgs e)
    {
        string fileName = string.Empty;
        string filePath = string.Empty;
        string extension = string.Empty;
        try
        {
            //Check if Fileupload control has file in it
            if (FileUpload1.HasFile)
            {
                // Get selected image extension
                extension = Path.GetExtension(FileUpload1.FileName).ToLower();
                //Check image is of valid type or not
                if (extension == ".jpg" || extension == ".jpeg" || extension == ".png" || extension == ".gif" || extension == ".bmp")
                {
                    //Create unique name for the file
                    fileName = Guid.NewGuid().ToString() + extension;
                    //Create path for the image to store
                    filePath = Path.Combine(Server.MapPath("~/Images"), fileName);
                    //Save image in folder
                    FileUpload1.SaveAs(filePath);
                    //Show the panel and load the uploaded image in image control.
                    pnlCrop.Visible = true;
                    imgToCrop.ImageUrl = "~/Images/" + fileName;
                }
                else
                {
                    lblMsg.Text = "Please select jpg, jpeg, png, gif or bmp file only";
                }
            }
            else
            {
                lblMsg.Text = "Please select file to upload";
            }
        }
        catch (Exception ex)
        {
            lblMsg.Text = "Oops!! error occured : " + ex.Message.ToString();
        }
        finally
        {
            extension = string.Empty;
            fileName = string.Empty;
            filePath = string.Empty;
        }
    }

    protected void btnCrop_Click(object sender, EventArgs e)
    {
        string croppedFileName = string.Empty;
        string croppedFilePath = string.Empty;
        //get uploaded image name
        string fileName = Path.GetFileName(imgToCrop.ImageUrl);
        //get uploaded image path
        string filePath = Path.Combine(Server.MapPath("~/Images"), fileName);

        //Check if file exists on the path i.e. in the UploadedImages folder.
        if (File.Exists(filePath))
        {
            //Get the image from UploadedImages folder.
            System.Drawing.Image orgImg = System.Drawing.Image.FromFile(filePath);
            //Get user selected cropped area
            //Convert.ToInt32(String.Format("{0:0.##}", YCoordinate.Value)),

            Rectangle areaToCrop = new Rectangle(
                Convert.ToInt32(XCoordinate.Value),
                Convert.ToInt32(YCoordinate.Value),
                Convert.ToInt32(Width.Value),
                Convert.ToInt32(Height.Value));
            try
            {

                Bitmap bitMap = new Bitmap(areaToCrop.Width, areaToCrop.Height);
                //Create graphics object for alteration
                using (Graphics g = Graphics.FromImage(bitMap))
                {
                    //Draw image to screen
                    g.DrawImage(orgImg, new Rectangle(0, 0, bitMap.Width, bitMap.Height), areaToCrop,GraphicsUnit.Pixel);
                }

                //name the cropped image
                croppedFileName = "crop_" + fileName;
                //Create path to store the cropped image
                croppedFilePath = Path.Combine(Server.MapPath("~/Images"), croppedFileName);
                //save cropped image in folder
                bitMap.Save(croppedFilePath);
                orgImg.Dispose();
                bitMap = null;
                //Now you can delete the original uploaded image from folder               
                File.Delete(filePath);
                //Hide the panel
                pnlCrop.Visible = false;
                //Show success message in label
                lblMsg.ForeColor = Color.Green;
                lblMsg.Text = "Image cropped and saved successfully";

                //Show cropped image
                imgCropped.ImageUrl = "~/Images/" + croppedFileName;

                //Show Reset button
                btnReset.Visible = true;
            }
            catch (Exception ex)
            {
                lblMsg.Text = "Oops!! error occured : " + ex.Message.ToString();
            }
            finally
            {
                fileName = string.Empty;
                filePath = string.Empty;
                croppedFileName = string.Empty;
                croppedFilePath = string.Empty;
            }
        }

    }

    protected void btnReset_Click(object sender, EventArgs e)
    {
        imgCropped.ImageUrl = "";
        lblMsg.Text = string.Empty;
        btnReset.Visible = false;
    }

Comments

Post a Comment

Popular posts from this blog

SharePoint 2013 Keyword Query (KQL) Content Class Property Restrictions

Using property restrictions in your KQL queries, you can restrict your search to only pull back certain things like calendar events for instance. This is a very powerful way to limit search results  and get exactly what you are looking for. You can use these in your query like this: " lunch contentclass:STS_ListItem_Events " This will return only calendar events with the word "lunch" in them.  Pretty powerful and pretty simple. Here is a list of available content class items: STS_Site –  Site Collection STS_Web  –  Site (Web) STS_List_850  –  Page Library STS_ListItem_850  –  Page STS_List_DocumentLibrary  –  Document Library STS_ListItem_DocumentLibrary  –  Document Library Items STS_List  –  Custom List STS_ListItem  –  Custom List Item STS_List_Links  –  Links List STS_ListItem_Links  –  Links List Item STS_List_Tasks  –  Tasks List STS_ListItem_Tasks  –  Tasks List Item STS_List_Events  –  Events List STS_ListItem_Events 
Read more

Filtering the Sharepoint List Taxonomy Column using Rest API

I ran into a strange issue today when using the SharePoint 2013 REST API for Lists with Managed Metadata columns    but I just had a ‘clever workaround’ moment with SharePoint’s oData/REST implementation when it comes to filtering list items based on taxonomy (managed metadata) columns. Now I do not consider myself a developer, so this article is probably a little verbose for some readers, but should be helpful to power users or IT pros. 1. To filter the Taxonomy columns in SharePoint list using Rest API call we need to use the Post method. 2. The Rest API call will give errors some times when the Rest API Query string crosses limit 260 characters that time we will use the Query in the body. Those things are clearly explained in the below example clearly. 3. WE can use the CAMEL Query in the Rest API call this example come under that. < script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" ></ script > < script > $(do
Read more

SharePoint CSOM to Create Folders and Sub Folders based on Excel Data

Contents: 1. Reading data from the Excel sheet. 2. Connecting to SharePoint Online Site & Checking the SharePoint list is available or not. 3. Creating the SharePoint Library Folders and Sub Folders. 4. Conclusion. 1. Reading data from the Excel sheet: a. Open Visual Studio, Select New Project Creation and Select C# Console application and provide the appropriate Solution name. b. First add the required references like below.     I . using Microsoft.SharePoint.Client;     II. using System.Configuration; (Used to read the data from the App.config file)     III. using Microsoft.Office.Interop.Excel; (Excel supported file reference)     Note: If above references and not able to add please install the references from the NuGet Package  Manager Console. To Read the values from the App.config file use the below  and declare all the fields globally for re-usability.                 public   static   string  userName = ConfigurationManager.AppSettings[ "Username&qu
Read more