Image Gallery Using Fileupload Control and DataList in ASP.Net

This article explains how to create an image gallery in ASP.NET using the FileUpload control and a DataList.

I have designed the form and added the following two controls:

  1. Fileupload control: control to upload the image file to a folder and the information is saved into a SQL Server database table.
  2. DataList: to display the image in a repeating column row.

The following is the step-by-step procedure to create an Image Gallery in ASP.NET C# using a FileUpload control and a DataList.

Step 1: Create a table in your database as below:

table

The Image id is the identity column.

Step 2: Design the form as follows:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ImageGallery.aspx.cs" Inherits="Image_Library.ImageGallery" %>

 

<!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 runat="server">

    <title></title>

</head>

<body>

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

    <div>

        <table>

            <tr>

                <td colspan="3">

                    <h2>

                        Image Gallery</h2>

                </td>

            </tr>

            <tr>

                <td>

                    Upload Image

                </td>

                <td>

                    <asp:FileUpload ID="imgFileUpload" runat="server" />

                </td>

                <td>

                    <asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="btnUpload_Click" />

                </td>

            </tr>

        </table>

    </div>

    <div id="divImageList" runat="server">

        <asp:DataList ID="dtListImageGallery" runat="server" RepeatColumns="3" RepeatDirection="Horizontal"

            Width="50%" BorderColor="#336699" BorderStyle="Solid" BorderWidth="2px">

            <ItemTemplate>

                <asp:Label ID="Label1" runat="server" Text='<%# Eval("ImageName") %>' Font-Bold="True"

                    Font-Size="10pt" ForeColor="#336699" Width="100%" />

                <br />

                <asp:Image Width="100" ID="imgGallery" ImageUrl='<%# Bind("ImagePath", "~/ImageGallery/{0}") %>'

                    runat="server" />

            </ItemTemplate>

            <ItemStyle HorizontalAlign="Center" VerticalAlign="Top" />

        </asp:DataList>

    </div>

    </form>

</body>

</html>

Step 3: Add the following code on the click of the button.

SqlConnection conn = new SqlConnection(@"Data Source=.\sqlexpress;Initial Catalog=LMS;Integrated Security=True");

if (imgFileUpload.PostedFile != null)

{

        string imagename = Path.GetFileName(imgFileUpload.PostedFile.FileName);

        imagename = imagename.Split('.')[0].ToString();

        string pathname;

        pathname = Server.MapPath("~\\ImageGallery\\") + DateTime.Now.ToString("ddMMyyhhmmsstt") + imgFileUpload.FileName;

        imgFileUpload.PostedFile.SaveAs(pathname);

        try

        {

                conn.Open();

                string insquery = "Insert into MyImageGallery(ImageName,ImagePath) values('" + imagename + "','"+DateTime.Now.ToString("ddMMyyhhmmsstt") + imgFileUpload.FileName.ToString() + "')";

                SqlCommand cmd = new SqlCommand(insquery, conn);

                cmd.ExecuteNonQuery();

                conn.Close();

                BindDataList();

        }

        catch (Exception ex)

        {

            Response.Write(ex.Message);

        }
}

Step 4: Call a method BindDataList on page load and write the following code inside the method:

private void BindDataList()

{

    SqlConnection conn = new SqlConnection(@"Data Source=.\sqlexpress;Initial Catalog=LMS;Integrated Security=True");

    conn.Open();

    sqlda = new SqlDataAdapter("SELECT * FROM MyImageGallery", conn);

    dt = new DataTable();

    sqlda.Fill(dt);

    sqlda.Dispose();

    dtListImageGallery.DataSource = dt;

    dtListImageGallery.DataBind();

    conn.Close();

}

Step 5: Run the application, the Image gallery will be shown as below:

Run

Conclusion

In this article I explained how to design and develop the image gallery in ASP.NET C#.