How to Show Uploaded Images in Grid View?


In this article I have explained about how to show uploaded images in grid view control and also I have explained about how to use file upload control in this grid view row editing. For example if user uploaded image save that image in the server path and display in grid view with use image control, after that editing that image using file upload control in grid view edit item template. Learn How to Show Uploaded Images in Grid View?

How to Show Uploaded Images in Grid View?


Description
In my previous article http://www.dotnetspider.com/resources/42953-How-show-uploaded-images-Grid-view.aspx I have explained about how to store images in SQL SERVER table image field and display in the Grid view. Now in this article I have store image in the server path and store Path URL in the database table. This one is fast compare to storing image bytes in database. After bind if we need edit description or image using edit operation. In this example code I have retrieve image URL previously stored in SQL server table and get image from the server path "Uploaded folder".

Client Side

<%@ 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 runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<table width="1000" align="center">
<tr>
<td colspan="2">
<asp:Label ID="Label1" runat="server" Text=""></asp:Label>
</td>
</tr>
<tr>
<td>
Select File to be upload
</td>
<td>
<asp:FileUpload ID="FileUpload1" runat="server" />
</td>
</tr>
<tr>
<td>
Description of the file
</td>
<td>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td colspan="2" align="center" class="style1">
<asp:Button ID="Button1" runat="server" Text="Upload" OnClick="Button1_Click" />
</td>
</tr>
<tr>
<td colspan="2" height="250" align="center">
<asp:GridView ID="GridView1" runat="server" DataKeyNames="ID" AutoGenerateColumns="false"
OnRowCancelingEdit="GridView1_RowCancelingEdit" OnRowDeleting="GridView1_RowDeleting"
OnRowEditing="GridView1_RowEditing" OnRowUpdating="GridView1_RowUpdating">
<Columns>
<asp:TemplateField HeaderText="File Name">
<ItemTemplate>
<asp:Image ID="Image1" runat="server" ImageUrl='<%#Eval("fpath")%>' />
</ItemTemplate>
<EditItemTemplate>
<asp:FileUpload ID="FileUpload2" runat="server" />
</EditItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Description">
<ItemTemplate>
<%#Eval("desc1")%>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtdesc" runat="server" Text='<%#Eval("desc1")%>'></asp:TextBox>
</EditItemTemplate>
</asp:TemplateField>
<asp:CommandField HeaderText="Modify" ShowEditButton="true" EditText="Edit">
<ControlStyle Width="50" />
</asp:CommandField>
<asp:TemplateField HeaderText="Delete">
<ItemTemplate>
<asp:LinkButton ID="lnkDelete" CommandName="Delete" runat="server" OnClientClick="return confirm('Are you sure you want to delete this record?');">Delete</asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>

Server side

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

public partial class _Default : System.Web.UI.Page
{
SqlConnection sqlcon = new SqlConnection(ConfigurationManager.ConnectionStrings["Con"].ConnectionString);
SqlCommand sqlcmd = new SqlCommand();
SqlDataAdapter da = new SqlDataAdapter();
DataTable dt = new DataTable();
String fname, fpath, desc;
String spath;
protected void Page_Load(object sender, EventArgs e)
{
Label1.Text = "";
if (!Page.IsPostBack)
{
LoadGrid();
}
}
protected void Button1_Click(object sender, EventArgs e)
{
if (FileUpload1.HasFile)
{
//Check File is available in Fileupload control and then upload to server path
fname = FileUpload1.FileName;
spath = @"~\Uploaded\" + FileUpload1.FileName;
fpath = Server.MapPath("Uploaded");
fpath = fpath + @"\" + FileUpload1.FileName;
desc = TextBox2.Text;
if (System.IO.File.Exists(fpath))
{
Label1.Text = "File Name already exists!";
return;
}
else
{
FileUpload1.SaveAs(fpath);
}
//Store details in the SQL Server table
StoreDetails();
TextBox2.Text = "";
LoadGrid();
}
else
{
Label1.Text = "Please select file!";
}
}
void StoreDetails()
{
String query;
query = "insert into fileDet(fname,fpath,desc1) values('" + fname + "','" + spath + "','" + desc + "')";
sqlcon.Open();
sqlcmd = new SqlCommand(query, sqlcon);
sqlcmd.CommandType = CommandType.Text;
sqlcmd.ExecuteNonQuery();
sqlcon.Close();
LoadGrid();
}
void LoadGrid()
{
sqlcon.Open();
sqlcmd = new SqlCommand("select * from fileDet", sqlcon);
da = new SqlDataAdapter(sqlcmd);
dt.Clear();
da.Fill(dt);
if (dt.Rows.Count > 0)
{
GridView1.DataSource = dt;
GridView1.DataBind();
}
else
{
GridView1.DataBind();
}
sqlcon.Close();
}
protected void GridView1_RowEditing(object sender, GridViewEditEventArgs e)
{
GridView1.EditIndex = e.NewEditIndex;
LoadGrid();
}
protected void GridView1_RowCancelingEdit(object sender, GridViewCancelEditEventArgs e)
{
GridView1.EditIndex = -1;
LoadGrid();
}
protected void GridView1_RowDeleting(object sender, GridViewDeleteEventArgs e)
{
String ID;
ID = GridView1.DataKeys[e.RowIndex].Value.ToString();
sqlcmd = new SqlCommand("select * from fileDet where ID='" + ID + "'", sqlcon);
sqlcon.Open();
da = new SqlDataAdapter(sqlcmd);
da.Fill(dt);

if (dt.Rows.Count > 0)
{
if (System.IO.File.Exists(Server.MapPath(dt.Rows[0][2].ToString())))
{
System.IO.File.Delete(Server.MapPath(dt.Rows[0][2].ToString()));
}
}
sqlcmd = new SqlCommand("delete from fileDet where ID='" + ID + "'", sqlcon);
sqlcmd.ExecuteNonQuery();
sqlcon.Close();
LoadGrid();
}
protected void GridView1_RowUpdating(object sender, GridViewUpdateEventArgs e)
{
GridViewRow row = GridView1.Rows[e.RowIndex];
string ID;

ID = GridView1.DataKeys[e.RowIndex].Value.ToString();

FileUpload flname = (FileUpload)row.FindControl("FileUpload2");

if (flname.HasFile)
{

fname = flname.FileName;
spath = @"~\Uploaded\" + flname.FileName;
fpath = Server.MapPath("Uploaded");
fpath = fpath + @"\" + flname.FileName;
if (System.IO.File.Exists(fpath))
{
Label1.Text = "File Name already exists!";
return;
}
else
{
flname.SaveAs(fpath);
}
}
else
{
Label1.Text = "Please select file!";
}

TextBox desc1 = (TextBox)row.FindControl("txtdesc");
string query;
query = "update fileDet set fname='" + fname + "',fpath='" + spath + "',desc1='" + desc1.Text + "' where ID='" + ID + "'";
sqlcon.Open();
sqlcmd = new SqlCommand(query, sqlcon);
sqlcmd.CommandType = CommandType.Text;
sqlcmd.ExecuteNonQuery();
sqlcon.Close();
GridView1.EditIndex = -1;
LoadGrid();
}
}

Output:
Output of the above code look like below image
Output

Source code:
I have attached source code in this article please check below.

Download it and try to upload image and see in grid view.
Front End: ASP.NET
Code Behind: C#

Conclusion:
I hope this article is help to know about display images in grid view.


Attachments

  • GridView_img_url_Source_Code (43265-18648-GridImgDisplay.rar)
  • Comments

    Author: rawan eisheh24 Sep 2011 Member Level: Bronze   Points : 0

    thanks amazing project

    Guest Author: vipin gupta19 Jan 2012

    Hi
    I am Vipin Gupta.
    this article is so helpful . by this i got more of knowledge about display images in a grid view and working well

    Author: lily27 Jan 2012 Member Level: Gold   Points : 0

    nice program

    Author: Ravindran28 Jan 2012 Member Level: Diamond   Points : 0

    thanks rawan and lily

    Guest Author: swaroopa01 Feb 2012

    I Tried Hoe to show uploaded images in grid view,but there are some errors like "conversion failed when converting Date Time from character string" so please give solution or give correct code.
    Thank U

    Author: han nguyen12 Feb 2012 Member Level: Silver   Points : 0

    thanks ravindran. i have question. if i have datatype of image is: image.

    how can i save it?

    Author: Ravindran12 Feb 2012 Member Level: Diamond   Points : 1

    han I have explained in details about database image field insertion in this resource check it

    http://www.dotnetspider.com/resources/42953-How-show-uploaded-images-Grid-view.aspx

    Source code available in the same page bottom download it and try it..

    Author: han nguyen12 Feb 2012 Member Level: Silver   Points : 0

    i'm sorry. that's my mistake. so sorry. thanks advance

    Guest Author: Poonam Marathe09 Apr 2012

    Thanks...... Nice Program

    Author: bharati21 Jan 2014 Member Level: Bronze   Points : 0

    where is source code?



  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name:
    Email: