System.Byte[] shows in gridview instead of an image?

Question

Hi I have a page that allows me to upload photo. Then when i click upload...the photo has been approved. But when i want to display it in gridview. The column that the image must appear it gives me "System.Byte[]" instead of an image. Help :)

Here's my code:

<%@ Page Language="C#" Debug="true" %>
<%@ Import Namespace="System" %>
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace = "System.Data.SqlClient" %>
<%@ Import Namespace= "System.Data.OleDb" %>


<script runat="server" type="text/c#">
protected void btnUpload_Click(object sender, EventArgs e)


{
    {
   byte[] imageSize = new byte
                 [FileUpload1.PostedFile.ContentLength];
  HttpPostedFile uploadedImage = FileUpload1.PostedFile;
  uploadedImage.InputStream.Read
     (imageSize, 0, (int)FileUpload1.PostedFile.ContentLength);
 // Create SQL Connection 
  OleDbConnection con = new OleDbConnection();
  con.ConnectionString = ConfigurationManager.ConnectionStrings["recordsConnectionString"].ConnectionString;
 // Create SQL Command 
 OleDbCommand cmd = new OleDbCommand();
 cmd.CommandText = "INSERT INTO PendingRecords([Image])" + " VALUES (@Image)";
 cmd.CommandType = CommandType.Text;
 cmd.Connection = con;

 OleDbParameter UploadedImage = new OleDbParameter
              ("@Image", OleDbType.VarBinary, imageSize.Length);

 UploadedImage.Value = imageSize;
 cmd.Parameters.Add(UploadedImage);
 con.Open();
 cmd.ExecuteNonQuery();  
 GridView1.DataSourceID = "";
 GridView1.DataSource = SqlDataSource1;
 GridView1.DataBind();
 con.Close();
 }
}
</script>

<form id="form1" runat="server">
<div>
<asp:FileUpload ID="FileUpload1" runat="server"/>
<asp:Label ID="lblMessage" runat="server">
</asp:Label>
<asp:Button ID="btnUpload" runat="server" 
            OnClick="btnUpload_Click" Text="Upload"/>
</div>
<asp:GridView runat="server" id="GridView1" AutoGenerateColumns="False" DataSourceID="SqlDataSource1" DataKeyNames="ID">
        <Columns>
            <asp:boundfield DataField="ID" HeaderText="ID" ReadOnly="True" InsertVisible="False" SortExpression="ID">
            </asp:boundfield>
            <asp:boundfield DataField="Image" DataFormatString="{0}" HeaderText="Image" SortExpression="Image">
            </asp:boundfield>
            <asp:boundfield DataField="FirstName" HeaderText="FirstName" SortExpression="FirstName">
            </asp:boundfield>
        </Columns>
</asp:GridView>
<asp:SqlDataSource runat="server" id="SqlDataSource1" ProviderName="<%$ ConnectionStrings:recordsConnectionString.ProviderName %>" ConnectionString="<%$ ConnectionStrings:recordsConnectionString %>" SelectCommand="SELECT * FROM [PendingRecords]" DeleteCommand="DELETE FROM [PendingRecords] WHERE [ID] = ?" InsertCommand="INSERT INTO [PendingRecords] ([Username], [Password], [FirstName], [LastName], [MiddleName], [Address], [Gender], [ContactNumber], [PlateNumber], [Color], [Brand], [LiscensedNumber]) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)" UpdateCommand="UPDATE [PendingRecords] SET [Username] = ?, [Password] = ?, [FirstName] = ?, [LastName] = ?, [MiddleName] = ?, [Address] = ?, [Gender] = ?, [ContactNumber] = ?, [PlateNumber] = ?, [Color] = ?, [Brand] = ?, [LiscensedNumber] = ? WHERE [ID] = ?">
    <DeleteParameters>
        <asp:parameter Name="ID" Type="Int32" />
    </DeleteParameters>
    <UpdateParameters>
        <asp:parameter Name="Username" Type="String" />
        <asp:parameter Name="Password" Type="String" />
        <asp:parameter Name="FirstName" Type="String" />
        <asp:parameter Name="LastName" Type="String" />
        <asp:parameter Name="MiddleName" Type="String" />
        <asp:parameter Name="Address" Type="String" />
        <asp:parameter Name="Gender" Type="String" />
        <asp:parameter Name="ContactNumber" Type="String" />
        <asp:parameter Name="PlateNumber" Type="String" />
        <asp:parameter Name="Color" Type="String" />
        <asp:parameter Name="Brand" Type="String" />
        <asp:parameter Name="LiscensedNumber" Type="String" />
        <asp:parameter Name="ID" Type="Int32" />
    </UpdateParameters>
    <InsertParameters>
        <asp:parameter Name="Username" Type="String" />
        <asp:parameter Name="Password" Type="String" />
        <asp:parameter Name="FirstName" Type="String" />
        <asp:parameter Name="LastName" Type="String" />
        <asp:parameter Name="MiddleName" Type="String" />
        <asp:parameter Name="Address" Type="String" />
        <asp:parameter Name="Gender" Type="String" />
        <asp:parameter Name="ContactNumber" Type="String" />
        <asp:parameter Name="PlateNumber" Type="String" />
        <asp:parameter Name="Color" Type="String" />
        <asp:parameter Name="Brand" Type="String" />
        <asp:parameter Name="LiscensedNumber" Type="String" />
    </InsertParameters>
</asp:SqlDataSource>
</form>

Answer 1

I might have a little solution for you that won't require much changes. A bit messy IMHO.

replace your image bound field this this template field below.

   <asp:TemplateField>
            <HeaderTemplate>Image</HeaderTemplate>
            <ItemTemplate>
                <img src='data:image/jpg;base64,<%# Eval("Image") != System.DBNull.Value ? Convert.ToBase64String((byte[])Eval("Image")) : string.Empty %>' alt="image" height="100" width="200"/>
            </ItemTemplate>
        </asp:TemplateField>