Display image in gridview using file path and file upload control in asp.net

Description:-

In this article, I am explaining how to store images and pictures on disk and their path in the database with the help of FileUpload Control and also how to display those images in asp.net GridView Control. The concept behind this technique is to store the images on disk in a folder that resides in the WebSite root directory while the relative path of the images along with filename is stored in SQL Server database. First we will start with creating database table that will store the image path. The figure below describes the table structure. 

Now Create Images or Files Folder in your project so we can store images in that folder and retrieve from that folder and with path we can store it on database.

Here is the demo example to store image file path in Database and retrieve from database and display it on Gridview control.

Create Table:-

CREATE TABLE [dbo].[Image_Mst](
 [ID] [int] IDENTITY(1,1) NOT NULL,
 [ImageFile] [nvarchar](max) NOT NULL,
 [ImageFilePath] [nvarchar](max) NOT NULL,
 CONSTRAINT [PK_Image_Mst] 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

Default.aspx:-

    <div>
        <asp:FileUpload ID="FileUpload1" runat="server" />
        <asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="btnUpload_Click" />
    </div>
    <div>
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" Font-Names="Arial">
            <Columns>
                <asp:BoundField DataField="ID" HeaderText="ID" />
                <asp:BoundField DataField="ImageFile" HeaderText="Image Name" />
                <asp:TemplateField HeaderText="Image Preview">
                    <ItemTemplate>
                        <asp:Image ID="Image1" Height="80px" Width="100px" runat="server" ImageUrl='<%# Eval("ImageFilePath", GetUrl("{0}"))%>' />
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
    </div>

Default.aspx.cs:-

protected void Page_Load(object sender, EventArgs e)
{
    DataTable dt = new DataTable();
    String strConnString = System.Configuration.ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString;
    string strQuery = "select * from Image_Mst order by ID";
    SqlCommand cmd = new SqlCommand(strQuery);
    SqlConnection con = new SqlConnection(strConnString);
    SqlDataAdapter sda = new SqlDataAdapter();
    cmd.CommandType = CommandType.Text;
    cmd.Connection = con;
    try
    {
        con.Open();
        sda.SelectCommand = cmd;
        sda.Fill(dt);
        GridView1.DataSource = dt;
        GridView1.DataBind();

    }
    catch (Exception ex)
    {
        Response.Write(ex.Message);
    }
    finally
    {
        con.Close();
        sda.Dispose();
        con.Dispose();
        dt.Dispose();
    }
}

protected void btnUpload_Click(object sender, EventArgs e)
{
    if (FileUpload1.PostedFile != null)
    {
        string FileName = Path.GetFileName(FileUpload1.PostedFile.FileName);

        //Save files to disk
        FileUpload1.SaveAs(Server.MapPath("Files/" + FileName));

        //Add Entry to DataBase
        String strConnString = System.Configuration.ConfigurationManager
            .ConnectionStrings["DBCS"].ConnectionString;
        SqlConnection con = new SqlConnection(strConnString);
        string strQuery = "insert into Image_Mst (ImageFile, ImageFilePath)" +
            " values(@ImageFile, @ImageFilePath)";
        SqlCommand cmd = new SqlCommand(strQuery);
        cmd.Parameters.AddWithValue("@ImageFile", FileName);
        cmd.Parameters.AddWithValue("@ImageFilePath", "Files/" + FileName);
        cmd.CommandType = CommandType.Text;
        cmd.Connection = con;
        try
        {
            con.Open();
            cmd.ExecuteNonQuery();
        }
        catch (Exception ex)
        {
            Response.Write(ex.Message);
        }
        finally
        {
            con.Close();
            con.Dispose();
        }
    }
}

<connectionStrings>
    <add connectionString="ConnectionString" name="DBCS" providerName="System.Data.SqlClient"/>   
</connectionStrings>

Author : Umesh Patel

Related Posts