Storing and Retrieving Image from SQL Server Database in WPF

      

In this article we will see how to store Image into Database and Retrieve Image from the Database. In this article I will show how to store image into database in the form of array of bytes and retrieving the same array of bytes which is stored into image from the database. Now we will look into the System requirements.

System Requirements:

·         Microsoft Visual Studio 2010.

·         SQL Server 2008 R2.

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

In this article I have used the code first approach to create the database .I have taken only one class named Image Class as shown below:

  public class Image Class

    {

        public int Id { get; set; }

        public string ImagePath { get; set; }

        public byte[] ImageToByte { get; set; }

    }

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

Procedure:

There are totally three button events are occurring namely browse event, store image event and retrieve image event as shown in above snapshot. We will see the working of all three events one by one.

1: Browse Button Event:

When you click on browse button an Open Dialog Box will open to select the image file, the path of image file will be copied into text box. The code behind for browse button 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 above code I am creating an object for open dialog class (Namespace is Microsoft.Win32), then I am calling show dialog method of Open dialog Class, Uri of the browsed image is passed to image source property using Bitmap Image class. The Open dialog box is as shown in below snapshot.

After Selecting image , when you click on open button the system path of image file is stored in text box and preview of image will be show in image control_1 as shown in below snapshot.

2: Store Button Event:

After selecting the image file when you click on store image button, the image will be stored into database in the form of array of bytes. Code behind for 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 below snapshot shows how image file contents converted into array of bytes and the database details

3: Retrieve Button Event:

When you click on the retrieve button, the image stored in Database in the form of array of bytes again converted into Bitmap Image and finally bitmap image object is passed to image source property using below code of 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 image control_2 using above code of retrieve button event. The below snapshot shows image retrieved from database in Image Control_2

Summary:

In this article I have shown how to store image into database in the form of array of bytes and again retrieving the same array of bytes into image. If you any queries please do comment and thank you for reading my article.

Source Code Download : Click Here