Multiple image upload with thumbnails example in asp .net

 In this asp .net tutorial we will learn how to use Ajax Control Toolkit's AjaxFileUpload control to upload multiple images with thumbnails. We will also save information of uploaded images and thumbnails to SQL Server database. Then we will show uploaded thumbnails using Datalist control. 

Step1: Create table in MS SQL Server.

CREATE TABLE [dbo].[ImageUpload]( 	[Id] [int] IDENTITY(1,1) NOT NULL, 	[ImageName] [nvarchar](100) NULL, 	[ImageThumbnail] [nvarchar](100) NULL,  CONSTRAINT [PK_ImageUpload] PRIMARY KEY CLUSTERED  ( 	[Id] ASC )WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY] ) ON [PRIMARY] GO 

Step2: Create a new asp .net website.


Step3: Create two new folders inside your website.

Step4: Add Ajax control toolkit to your website.

You can refer this article about how to add ajax control toolkit in asp .net: 3 Different ways to add AjaxControlToolkit in Asp .Net Website.

Step5: Add this code to your aspx page.

 
   
    

                          " alt="" />              

Step6: Add Connection string to web. config file.

Step7: Add following namespaces.

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

Step8: AjaxFileUpload's UploadComplete event to upload files and generate thumbnails.

 protected void AjaxFileUpload1_UploadComplete(object sender, AjaxControlToolkit.AjaxFileUploadEventArgs e)
    {
        string fileNameWithPath = Server.MapPath("~/UploadedImages/") + e.FileName.ToString();
        AjaxFileUpload1.SaveAs(fileNameWithPath);

        //===== Generate thumbnail
        GenerateThumbNail(e.FileName, "UploadedThumbs", 100);

        //---- Store image and image thumbnail information to database.
        //====== Getting connection string defined in the web.config file. Pointed to the database we want to use.
        SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["myConnection"].ConnectionString);

        //======= Insert Query.
        string cmdText = "INSERT INTO ImageUpload (ImageName,ImageThumbnail) VALUES (@ImageName,@ImageThumbnail)";

        //====== Providning information to SQL command object about which query to 
        //====== execute and from where to get database connection information.
        SqlCommand cmd = new SqlCommand(cmdText, con);

        //===== Adding parameters/Values.
        cmd.Parameters.AddWithValue("@ImageName", e.FileName);
        cmd.Parameters.AddWithValue("@ImageThumbnail", e.FileName);

        //===== To check current state of the connection object. If it is closed open the connection
        //===== to execute the insert query.
        if (con.State == ConnectionState.Closed)
        {
            con.Open();
        }

        //===== Execute Query.
        cmd.ExecuteNonQuery();

        //===== close the connection.
        con.Close();

       
    }

Step9: Generate Thumbnails Method.

//---- Method to generate Thumbnails
    public string GenerateThumbNail(string imageName, string thumbNailFolder, int width)
    {
        System.Drawing.Image image =
      System.Drawing.Image.FromFile(Server.MapPath("UploadedImages/" + imageName.ToString()));
        int srcWidth = image.Width;
        int srcHeight = image.Height;
        int thumbWidth = width;
        int thumbHeight;
        Bitmap bmp;
        if (srcHeight > srcWidth)
        {
            thumbHeight = (srcHeight / srcWidth) * thumbWidth;
            bmp = new Bitmap(thumbWidth, thumbHeight);
        }
        else
        {
            thumbHeight = thumbWidth;
            thumbWidth = (srcWidth / srcHeight) * thumbHeight;
            bmp = new Bitmap(thumbWidth, thumbHeight);
        }

        System.Drawing.Graphics gr = System.Drawing.Graphics.FromImage(bmp);
        gr.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;
        gr.CompositingQuality = System.Drawing.Drawing2D.CompositingQuality.HighQuality;
        gr.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.High;
        System.Drawing.Rectangle rectDestination =
               new System.Drawing.Rectangle(0, 0, thumbWidth, thumbHeight);
        gr.DrawImage(image, rectDestination, 0, 0, srcWidth, srcHeight, GraphicsUnit.Pixel);
        string aa = Server.MapPath("~/" + thumbNailFolder + "/" + imageName);

        bmp.Save(HttpContext.Current.Server.MapPath("~/" + thumbNailFolder + "/" + imageName));
        bmp.Dispose();
        image.Dispose();
        return aa;

    }

Step10: Bind Images Method to bind image thumbnails to Datalist.

 //===== Method to bind employee records to repeater control.
    void bindImages()
    {
        //====== Getting connection string defined in the web.config file. Pointed to the database we want to use.
        SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["myConnection"].ConnectionString);

        //======= Select Query.
        string cmdText = "SELECT * FROM ImageUpload";

        //====== Providning information to SQL command object about which query to 
        //====== execute and from where to get database connection information.
        SqlCommand cmd = new SqlCommand(cmdText, con);

        //===== To check current state of the connection object. If it is closed open the connection
        //===== to execute the insert query.
        if (con.State == ConnectionState.Closed)
        {
            con.Open();
        }

        //===== Execute Query and bind data to Datalist.
        dtlstImageGallery.DataSource = cmd.ExecuteReader();
        dtlstImageGallery.DataBind();
    }

Step11: Page Load Method.

 protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            bindImages();
        }
    }

Final Output