Storing and Retrieving Image From SQL Server Database in WPF

In this article we will see how to store an image into a database and retrieve the image from the database. In this article I will show how to store an image into a database in the form of an array of bytes and retrieve the array of bytes stored as an image from the database. Now we will look into the System Requirements.

System Requirements

The System Requirements are:

• Microsoft Visual Studio 2010.
• SQL Server 2008 R2.

First, we will look into the design part first. The following snapshot shows the design of the application.



In this article I used the Code First approach to creating the database. I have taken only one class named Image Class as shown below:

public class ImageClass

{

   public int Id { get; set; }

   public string ImagePath { get; set; }

   public byte[] ImageToByte { get; set; }

}

In the preceding class, the Id property is the primary key, the Image Path property will take the path of the image from the system that you will browse and the ImageToByte property will store the image in the form of an array of bytes.

Procedure

In total, there are three button events occurring, namely browse event, store image event and retrieve image event as shown in the above snapshot. We will see how all three events work one by one.

1. Browse Button Event

When you click on the browse button, an Open Dialog Box will open to select the image file, the path of the image file will be copied into the text box. The code behind for the browse button is as shown below.

private void Browse_Click(object sender, RoutedEventArgs e)

{

   Database DB = new Database();

   ImageClass images = new ImageClass();

   OpenFileDialog openFileDialog1 = new OpenFileDialog();

   openFileDialog1.ShowDialog();

   openFileDialog1.Filter = "JPEG Files (*.jpeg)|*.jpeg|PNG Files(*.png)|*.png|JPG"

   openFileDialog1.DefaultExt = ".jpeg";

   textBox1.Text = openFileDialog1.FileName;

   ImageSource imageSource = new BitmapImage(new Uri(textBox1.Text));

   image1.Source = imageSource;

}

In the code above I am creating an object for an open dialog class (the namespace is Microsoft.Win32), then I am calling a show dialog method of the Open Dialog class. The URI of the browsed image is ed to the image source property using the Bitmap Image class. The Open Dialog box is as shown in the following snapshot.



After selecting the image, when you click on the "Open" button the system path of the image file is stored in the text box and a preview of the image will be shown in the image control_1 as shown in the following snapshot.



2. Store Button Event

After selecting the image file, when you click on the store image button, the image will be stored into the database in the form of an array of bytes. The code behind for the store image event is shown below.
 

private void Store_Click(object sender, RoutedEventArgs e)

{

   Database DB = new Database();

   ImageClass images = new ImageClass();

   images.ImagePath = textBox1.Text;

   images.ImageToByte= File.ReadAllBytes(textBox1.Text);

   DB.Images.Add(images);

   DB.SaveChanges();

}

The following snapshot shows how an image file contents is converted into an array of bytes and the database details:



3. Retrieve Button Event

When you click on the retrieve button, the image is stored in the database as an array of bytes, again converted into a Bitmap Image and finally the bitmap image object is ed to the image source property using the following code of the retrieve button.

private void Retrieve_Click(object sender, RoutedEventArgs e)

{

   Database DB = new Database();

   ImageClass images = new ImageClass();

   var result = (from t in DB.Images

   where t.ImagePath == textBox1.Text

   select t.ImageToByte).FirstOrDefault();

   Stream StreamObj = new MemoryStream(result);

   BitmapImage BitObj = new BitmapImage();

   BitObj.BeginInit();

   BitObj.StreamSource = StreamObj;

   BitObj.EndInit();

   this.image1.Source = BitObj;

}

The Bitmap Image will be added to the image control_2 using the code above of the retrieve button event. The following snapshot shows the image retrieved from the database in Image Control_2.



Summary

In this article I have shown how to store an image into a database as an array of bytes and again retrieve the same array of bytes into an image. If you have any queries then please comment and thank you for reading my article.