ASP.NET – Show image from database

One of my friends asks me for an example of reading image from database and showing it on web form in ASP.NET. I send him a link for such tutorial http://www.microsoft.com/germany/msdn/solve/knowhow/howto/allgemein/WieKannIchBilderInEineDatenbankSchreibenUndWiederAuslesen.mspx but it was written in German and he can not follow these steps therefore I decide to translate it to English. I don’t know if there is an English version of this tutorial, I just translate it for my friend in step by step tutorial. I only translate main idea so that you can make the example run. I do not translate word by word, I catch the concept and rewrite it according to my style. If you want to understand more details of this article, please use Google translate.

1. Create database
– Open Visual Studio 2008, create an ASP.NET Web application “ASPNET Show image from database”.
– In Solution Explorer, right click on solution, choose Add –> New Item –> Data –> SQL Server Database
– Click Yes to place database in “App_Data”. Open Server Explorer, right click on ImageDB.mdf and refresh until we have connection to it.
– In Server Explorer, on ImageDB.mdf, right click on Table and add new one “ImageTbl” with following structure

2. Add DataSet and create database connection
– In Solution Explorer, right click on solution, choose Add –> New Item –> Data –> DataSet “DataView.xsd”
– Drag and Drop table ImageTbl from Server Explorer to DataView.xsd.

3. Create GUI on Default.aspx
– Drag and drop three components from Toolbox to GUI: FileUpload, Button and Label and rename them to fuEngine, btnUpload and lblInformation
– Add handler for click event of btnUpload

if (fuEngine.HasFile)
{
	DataViewTableAdapters.ImageTblTableAdapter adapterImg = new ASPNET_Show_image_from_database.DataViewTableAdapters.ImageTblTableAdapter();
	adapterImg.Insert(fuEngine.FileName, fuEngine.PostedFile.ContentLength, fuEngine.PostedFile.ContentType, fuEngine.FileBytes);
	lblInformation.Text = "Image: " + fuEngine.FileName + " was uploaded successfully";
	this.DataBind();
}
else
{
	lblInformation.Text = "Please choose a file";
}

4. Read image from database
– To get image from our database, we need a SQL Query. Right click on ImageTblTableAdapter from DataView.xsd, choose Add –> New Query and choose options as suggested in images below

– In Solution Explorer, right click on solution, choose Add –> New Item –> new WebForm “ShowImage.aspx”.
– On code side of “ShowImage.aspx” add code for Page_Load event. This page works no more than a HTML page which gives image back in format of HTTP-Stream.

protected void Page_Load(object sender, EventArgs e)
{
	int nImageId;
	Response.Clear();
	if ( !int.TryParse(Request.QueryString["imageid"], out nImageId))
	{
		Response.End();
		return;
	}
	else
	{
		DataViewTableAdapters.ImageTblTableAdapter adapterImg = new ASPNET_Show_image_from_database.DataViewTableAdapters.ImageTblTableAdapter();
		DataView.ImageTblDataTable dtImage = adapterImg.GetDataBy(nImageId);
		if (dtImage.Rows.Count != 1)
		{
			Response.End();
			return;
		}
		else
		{
			Response.ContentType = dtImage[0].ImageContentType;
			Response.BinaryWrite(dtImage[0].ImageData);
			Response.End();
		}
	}
}

5. Show image on page

– Add new WebForm “ShowAllImages.aspx”, on Designer, drag and drop ObjectDataSource control into ShowAllImages.aspx and configure it as following- Add a DataList control to ShowAllImages.aspx, add DataSource to it and press Edit Templates. Add Image control at the end of DataList and edit its DataBindings
– Add a hyperlink control on Default.aspx called “Show All Images” and navigate it to ShowAllImages.aspx.
6. Test our application
– Run our web application and upload some images through our Default.aspx
– Get image back by tipping ShowImage.aspx?imageid=1 to test.
– Click on Show All Images hyperlink to see all available images.
The complete source code you can download here “ASPNET Show image from database”