Save & Read Image From Database

Uploading an Image File to a SQL database

ASP.NET provides a simple mechanism to upload image files to a database, like SQL Server. The images can be stored in a database table attribute that is of image data-type.

You can use the following SQL statement to create a table that can store image files:

create table myimages
(
  imgid int identity(1,1) primary key,
  imgname varchar(30) null,
  imgfile image not null,
  imgtype varchar(30) null
)

In the preceding code, the table attributes are:

• imgid: To store the id of the image and it is the primary key of the table.

• imgname: To store a name of the image.

• imgfile: To store binary image data.

• imgtype: To store the content type of the image

The images from the Web form can be loaded in the preceding database table. The uploading of image file from the web form can be categorized in the following tasks:

1. Creating a Web form for uploading the image files.

2. Uploading image files to database.

Creating the Web form for uploading the image files

The HTML form that uploads the image files to a database should meet the following requirements:

• Use multipart/form-data encryption

• Use the POST method.

You can use the following code snippet to create a form to up load the images:

<form enctype="multipart/form-data" id="Form2" method="post" runat="server">
<h3> Demo on working with image files</h3>
<asp:Label id="Label1" style="Z-INDEX: 101; LEFT: 56px; POSITION: absolute; TOP: 120px" runat="server">Enter File name</asp:Label>
<asp:Button id="Button2" style="Z-INDEX: 107; LEFT: 248px; POSITION: absolute; TOP: 264px" runat="server" Text="View images" Width="96px">
<asp:Button id="Button1" style="Z-INDEX: 106; LEFT: 248px; POSITION: absolute; TOP: 216px" runat="server" Text="Upload Me"> <input id="upload_file" type="file" runat="server" style="Z-INDEX: 105; LEFT: 256px; POSITION: absolute; TOP: 160px">
<asp:TextBox id="txtimgname" style="Z-INDEX: 102; LEFT: 256px; POSITION: absolute; TOP: 120px" runat="server">
</asp:TextBox>
</form>

In the preceding code, the enctype attribute notifies the server that the binary data will be uploaded. The form has a file field control by the name upload_file, which you can use to browse and locate the file. The form also has two button controls, one to upload and one to view. The interface looks like as shown in the figure:

Uploading Image File to a Database

When the user clicks on the Upload me button, an event handler is invoked. In the event handler you can add the following code to upload the file in the database:

private void Button1_Click(object sender, System.EventArgs e)
{
    Stream img_strm = upload_file.PostedFile.InputStream;
    //Retrieving the length of the file to upload
    int img_len = upload_file.PostedFile.ContentLength;
    //retrieving the type of the file to upload
    string strtype = upload_file.PostedFile.ContentType.ToString();
    string strname = txtimgname.Text.ToString();
    byte[] imgdata = new byte[img_len];
    int n = img_strm.Read(imgdata, 0, img_len);
    int result = SaveToDB(strname, imgdata, strtype);
}

In the preceding code, there are three main pieces of data that are important for uploading image:

Content-Type (strtype)
Name (strname)
ImageData (imgdata)

The preceding code the file to be uploaded is sptored in img_strm, object of stream class. In img_strm the file is stored in bimary format You should convert it to byte array before uploading it into database. The following statement of the preceding code snippet shows how the file is converted into byte array:

int n=img_strm.read(imgdata,0,imglen)

The Stream object provides the Read() method to convert file from binary to byte array. It accepts three paramters

• buffer: Specifies an array of bytes.

• Offset: Specifies the byte in the buffer from where the storing of data will begin.

• Count: Specifies the maximum number of bytes to be read from the current stream.

You can download the rest of the code form the link given at the end of the article.

Retrieving an image from Database

The main code performing this functionality is given below. Its the event handler for the "view image" event. The image name that is written in the text box is displayed.

    private void Button2_Click(object sender, System.EventArgs e)
    {
        connection.Open();
        SqlCommand command1 = new SqlCommand("select imgfile from myimages where imgname=@param", connection);
        SqlParameter myparam = command1.Parameters.Add("@param", SqlDbType.NVarChar, 30);
        myparam.Value = txtimgname.Text;
        byte[] img = (byte[])command1.ExecuteScalar();
        MemoryStream str = new MemoryStream();
        str.Write(img, 0, img.Length);
        Bitmap bit = new Bitmap(str);
        Response.ContentType = "image/jpeg";//or you can select your imagetype from database or directly write it here
        bit.Save(Response.OutputStream, ImageFormat.Jpeg);
        connection.Close();
    }

You can download example Save & Retrieve Images From Database Project, used in this tutorial

Tutorial toolbar:  Tell A Friend  |  Add to favorites  |  Feedback  |