This tutorial will demonstrate how to store and display binary images in a SQL database using ASP.NET 4.0 and C#.

Adding the Database

To demonstrate how to store and retrieve images as binary data in a database, we will first need to setup a database to store the appropriate values. There are three key pieces of information associated with an image that we will need to store in the database:

  • Image Binary Data – The actual binary data of the image.
  • Image Type – The type of the image.
  • Image Size – The actual number of bytes of the image.

At this point in the tutorial I have created a new ASP.NET Empty Web Site. To add our database:

  1. Right click the project in your solution explorer.
  2. Select add ASP.NET folder.
  3. Select App_Data.
  4. Right click the App_Data folder.
  5. Select add new item…
  6. Select a SQL Database.
  7. Name it ‘Database.mdf’.
  8. Click add.
  9. Expand Database.mdf in your server/database explorer.
  10. Right click the Tables folder.
  11. Select add new table.
  12. Add the following columns with their respective types to the table:
    Column Name Data Type
    ImgId int
    ImgBin image
    ImgType nvarchar(50)
    ImgSize bigint
  13. Right click the ImgId column and select Set Primary Key.
  14. Change the IsIdentity property of the ImgId column to ‘Yes’.
  15. Save the table as ‘Images’.

Adding the ConnectionString

Now that we have our database setup, we need to add in our connection string to it. To do this, open up the Web.Config file for editing and add in the following code between the and tags:

This will simply allow us to connect to our database.

Creating the Form

To demonstrate and test this stuff out we will need to create a simple web form. To do this:

  1. Right click the project in your solution explorer.
  2. Select add new item…
  3. Select a web form.
  4. Name it ‘Default.aspx’.
  5. Click add.
  6. Open Default.aspx up to design mode.
  7. Drag and drop a fileupload control onto the web form.
  8. Add a break line.
  9. Drag and drop a button under the break line.
  10. Change the ID property to ‘btnSave’.
  11. Change the Text property to ‘Save Image’.
  12. Add 3 break lines.
  13. Drag and drop an image control under the break lines.
  14. Add a break line.
  15. Drag and drop a button under the break line.
  16. Change the ID property to ‘btnDisplay’.
  17. Change the Text property to ‘Display’.

You should now have a simple form that looks like this:
http://old.aspnettutorials.com/images/database/store-bin-images-db/ss1.gif

Storing Binary Images in the Database

Now that we have our form all setup, we can add the functionality to it which will actually save the binary image data into our database. To do this:

  1. Open Default.aspx up to design mode.
  2. Double click btnSave to generate the btnSave_Click event method in our Default.aspx.cs.
  3. Add the following using statements to the top of the class:

Let’s review what this code actually does. First, it checks to make sure that a file has been selected via the file upload control. Then, it takes the selected file and stores it in memory as binary data. Then, we execute a SQL query to store the appropriate data in our database.

Displaying Binary Images from the Database

Next, we are going to add in the functionality that will actually display the binary image in an image control on our page. However, this is a bit tricky due to the limitations we have working with files on our web site. Because we cannot use a memory stream to rebuild our image here, we must use a workaround that involves using the Response object to ouput the binary stream of data to a web page. This causes problems because this method allows for a web page with the image and only the image to be displayed on it. The simple workaround we use here requires us to set our image URL to a new page that displays only the image. To begin:

  1. Right click the project in your solution explorer.
  2. Select add new item…
  3. Select a web form.
  4. Name it ‘Image.aspx’.
  5. Click add.
  6. Open up Image.aspx.cs for editing.
  7. Add the following using statements at the top of the class: 
  8. Add the following code to the Page_Load event method:

    Let’s review what this code does. When the Image.aspx page is loaded it will use a SQL query to retrieve the image in our database with the corresponding id of ‘1’, and then display that image on the page. Next, we need to get that image from the new page to display in our image control on the Default.aspx page. To do this:

  1. Open Default.aspx up to design mode.
  2. Double click btnDisplay to generate the btnDisplay_Click event method.
  3. Add the following code to the btnDisplay_Click event method:

What this has done is set our image URL to the Image.aspx page that displays the image retrieved from the database. This method of displaying the image can easily be modified to be dynamic by passing the image’s id as a query string to the Image.aspx page and setting up the image URL to correspond with that change.

Testing

Now that we have our functionality all setup, we can test this out to ensure that it works. To do this:

You should now be viewing the image that you saved to the database as binary in our image control. This method of saving images allows you to store images inside of your database as opposed to somewhere in the file structure of your web site. Furthermore, this method of storing images can be easily modified to associate any extra data with the images.

The Default.aspx source looks like:

Download Source Files