locked
How to display an image that is stored in a table using OleDb? RRS feed

  • Question

  • User1855821604 posted

    Hello everyone,

     I have been trying to make this work for about a week now. I have a simple, one table access.mdb that looks like this.

    img_id : Data Type (AutoNumer) : PK

    img_title : Data Type (Text)

    img_type : Data Type (Text)

    img_stream : Data Type (OLE Object)

    Goal:

     I have a asp.net page that has a GridView on it that is not databound. I have a button even that when clicked, should populate the GridView with the image that is stored in the table.

     The code that I have functions correctly for uploading a BLOB to my table. However, the code to retreive and display it in the GridView is the problem.

    Here is my code thus far.

    UDPage.aspx code

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="UDPage.aspx.cs" Inherits="UDPage" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
             <div>  
    
       <table>
    
        <tr>
    
        <td> 
    
            Select File
    
            </td>
    
            <td>
    
            <asp:FileUpload ID="FileUpload1" runat="server" ToolTip="Select Only Excel File" />
    
            </td>
    
            <td> 
    
            <asp:Button ID="btnUpload" runat="server" Text="Upload" onclick="btnUpload_Click" />
    
            </td>
    
            <td>
     
    
                <asp:Button ID="btnViewFiles" runat="server" Text="View Files" onclick="btnViewFiles_Click" />
    
                   </td>
    
            </tr>
     
    
    </table>
    
    <table><tr><td><p><asp:Label ID="lblInfo" runat="server" Text="label"></asp:Label>  </p>
        </td></tr></table>
    
     
        </div>
    
        </div>
            <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
            </asp:GridView>
        </form>
    </body>
    </html>

    UDPage.aspx.cs code

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    //IO is used to create the memory stream variable that can store the binary format of the image content.
    using System.IO;
    using System.Data;
    //OleDb is used to connect the web site forms with MS Access Database using Microsoft.Jet.OLEDB.4.0
    using System.Data.OleDb; 
    public partial class UDPage : System.Web.UI.Page
    {
    
    
        protected void Page_Load(object sender, EventArgs e)
        {
            lblInfo.Text = "";
        }
    
    
        protected void btnUpload_Click(object sender, EventArgs e)
        {
            if (FileUpload1.HasFile)
            {
                Stream fileStream = FileUpload1.PostedFile.InputStream;
                int fileLength = FileUpload1.PostedFile.ContentLength;
                string fileMime = FileUpload1.PostedFile.ContentType;
                string fileName = Path.GetFileName(FileUpload1.PostedFile.FileName);
                byte[] fileData = new byte[fileLength];
                fileStream.Read(fileData, 0, fileLength);
    
                string qry = "INSERT INTO imgupload (img_title, img_type, img_stream) VALUES (?, ?, ? )";
                string connect = "Provider = Microsoft.Jet.OleDB.4.0; Data Source = |DataDirectory|TPS_DB.mdb";
    
                using (OleDbConnection conn = new OleDbConnection(connect))
                {
                    OleDbCommand cmd = new OleDbCommand(qry, conn);
                    cmd.Parameters.AddWithValue("", fileName);
                    cmd.Parameters.AddWithValue("", fileMime);
                    cmd.Parameters.AddWithValue("", fileData);
                    conn.Open();
                    cmd.ExecuteNonQuery();
                    lblInfo.Text = "File Uploaded";
                }
    
            }
        }
    
        protected void btnViewFiles_Click(object sender, EventArgs e)
        {
    
    
            string connect = "Provider = Microsoft.Jet.OleDB.4.0; Data Source = |DataDirectory|DB.mdb";
            string qry = "SELECT * FROM imgupload WHERE ID = @img_id";
    
                    
            OleDbConnection conn = new OleDbConnection(connect);
            OleDbCommand cmd = new OleDbCommand(qry, conn);
    
            // Mark the Command as a Text
            cmd.CommandType = CommandType.Text;
    
            // Add Parameters to Command
            OleDbParameter img_id = new OleDbParameter("@img_id", OleDbType.Integer);
            img_id.Value = ID;
            cmd.Parameters.Add(img_id);
    
            OleDbDataAdapter myAdapter = new OleDbDataAdapter(cmd);
            DataSet myDataSet = new DataSet();
            //myAdapter.Fill(myDataSet);
            GridView1.DataSource = myDataSet;
            GridView1.DataBind();
    
            try
            {
    
                foreach (DataRow dRow in myDataSet.Tables[0].Rows)
                {
                    Response.ContentType = dRow["img_type"].ToString();
                    byte[] imageContent = (byte[])((dRow["img_stream"]));
                    Response.BinaryWrite(imageContent);
                }
            }
    
    
            catch (Exception exc)
            {
                Response.Write("Data Retrival Failure. Error Dtails : " + exc.Message.ToString());
            }
            
        }
    }

    Wednesday, June 25, 2014 5:35 PM

Answers

  • User-1199946673 posted

    Mr Xeon

    I've seen that article. However, my end goal is to be able to display a data set in a row in gridview with the image. So, I need to be able to use gridview.

    You still need to use the handler. In the dataset, you only need to retrieve the img_id.  In the GridView, you need to use an ImageField like:

    <asp:ImageField DataImageUrlField="img_id" DataImageUrlFormatString="images.ashx?id={0}" />

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, June 26, 2014 5:21 PM

All replies

  • User-760709272 posted

    Use a handler

    http://www.c-sharpcorner.com/UploadFile/0c1bb2/uploading-and-displaying-images-from-database-using-Asp-Net/

    To show images you then use img tags like

    <img src="images.ashx?id=123"/>

    where your ashx handler will do the binarywrite (or whatever) of the image with the id of 123.  What you can't do is the binary write in the click event the way you're doing.

    Wednesday, June 25, 2014 6:10 PM
  • User1855821604 posted

    I've seen that article. However, my end goal is to be able to display a data set in a row in gridview with the image. So, I need to be able to use gridview.

    Thursday, June 26, 2014 9:24 AM
  • User-1199946673 posted

    Mr Xeon

    I've seen that article. However, my end goal is to be able to display a data set in a row in gridview with the image. So, I need to be able to use gridview.

    You still need to use the handler. In the dataset, you only need to retrieve the img_id.  In the GridView, you need to use an ImageField like:

    <asp:ImageField DataImageUrlField="img_id" DataImageUrlFormatString="images.ashx?id={0}" />

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, June 26, 2014 5:21 PM
  • User-760709272 posted

    I've seen that article. However, my end goal is to be able to display a data set in a row in gridview with the image. So, I need to be able to use gridview.

    As the other poster said, you stll use a grid view but where you need the image you write out an img tag that passes the right data to your handler.  When you are generating your page with the gridview etc all you're doing is generating the html.  When the browser gets the html it then downloads any resources you have referenced seperately.  You don't embded the image into the html itself.

    Thursday, June 26, 2014 5:26 PM