Web
developing an Image Upload Web Service
by :Bipin Joshi
Level :Intermediate
Posted Date:5/31/2002
tested with ASP.net
v1.0 (RTM)
Click for printable Version
Click here to download sample code
Member rating:3.90 (rated)
Rate this Item
asp.net Web Services provide ' web callable ' functions based on industry-like HTTP, XML and SOAP. Since Web Services heavily rely on XML, all the data this is passed to and returned from a Web Service must-text. However, in certain applications we did need to pass binary data. Say For example I want to pass images the from my Web form to a Web Service to save in some A-repository and then ve them back. Does this mean that Web Services cannot is used for such data transfer? Certainly not. In fact asp.net Web Services make it easy to pass such data by hiding the encoding and decoding. Typically when you are want to pass binary data your would declare the parameter of the Web I or return value of the Web Me Thod as a byte array. asp.net Web Services would automatically encode/decode this data using BASE64 encoding. (BASE64 encoding is the same encoding this is used for email MIME attachments.) In this example we develop a image upload Web Service that storeS and retrieves images from SQL Server database.
SQL Server Database Table
To work with example your need a table in SQL server database called IMAGES. The following script can be used to create this table.
CREATE TABLE [dbo]. [IMAGES] (
[ID] [int] IDENTITY (1, 1) not NULL,
[Imgdata] [Image] Null
) on [PRIMARY] textimage_on [PRIMARY]
The table contains two Columns-id that represents the primary key and imgdata that stores image data. Note "I have created this table in Northwind database itself; You are want to create it in some the other database.
creating the Web Service
Now, let us proceed with creating the Web Service. Create a new web Service project in Vs.net and add the following two Web methods to it.
<webmethod () > Public Function saveimage (ByVal imgdata () as Byte) as String
Dim connstr as String = "Integrated Security=sspi;" User id=sa;initial catalog=northwind;data source=server\netsdk "
Dim CNN as New SqlConnection (CONNSTR)
Cnn. Open ()
Dim cmd as New SqlCommand ("INSERT into images values (@img)", CNN)
Cmd. Parameters.Add (New SqlParameter ("@img", Imgdata))
Cmd. ExecuteNonQuery ()
End Function
<webmethod () > Public Function retrieveimage (ByVal imgid as Integer) as Byte ()
Dim connstr as String = "Integrated Security=sspi;" User id=sa;initial catalog=northwind;data source=server\netsdk "
Dim CNN as New SqlConnection (CONNSTR)
Dim cmd as New SqlCommand ("SELECT * from images where id=" & Imgid, CNN)
Cnn. Open ()
Dim dr as SqlDataReader = cmd. ExecuteReader
Dr. Read ()
Dim Bindata () as Byte = Dr. GetValue (1)
Return Bindata
End Function
The method SaveImage accepts a byte array containing image data and saves it to the images table. The second method accepts an image ID to is retrieved and returns a byte array from the Web method.
Next, we'll develop a Web client that presents UI for uploading files and calls the This Web Service internally.
creating the Client for the Web Service
Create a new Web application in Vs.net and add a Web reference to the Web Service we developed in the previous sections. Now, add a new webform called WebForm1 to the project. Put a File HTML server control and Button Web control on the form. The form should look like this:
The following is the markup of the WebForm:
<%@ Page language= "vb" autoeventwireup= "false" codebehind= "WebForm1.aspx.vb" inherits= "Binarydatawc.webform1"% >
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 transitional//en" >
<HTML>
<HEAD>
<title>WebForm1</title>
<meta name= "generator" content= Microsoft Visual Studio.NET 7.0 >
<meta name= "Code_language" content= "Visual Basic 7.0" >
<meta name= "vs_defaultClientScript" content= "JavaScript" >
<meta name= "vs_targetschema" content= "http://schemas.microsoft.com/intellisense/ie5" >
</HEAD>
<body ms_positioning= "GridLayout" >
<form id= "Form1" method= "POST" runat= "server" enctype= "Multipart/form-data" >
<input style= "Z-INDEX:101; left:164px; Position:absolute; top:51px "type=" file "id=" File1 "name=" File1 "runat=" Server ">
<asp:label id= "Label1" style= "z-index:103; left:22px; Position:absolute; top:48px "runat=" Server ">select File to Upload:</asp:label>
<asp:button id= "Button1" style= "z-index:102; left:180px; Position:absolute; TOP:94PX "runat=" Server "text=" Upload "></asp:Button>
</form>
</body>
</HTML>
Note This form has enctype attribute set to Multipart/form-data. This is necessary the to upload files.
Now, write the following code in the Click event of the Upload button:
Private Sub button1_click (ByVal sender as System.Object, ByVal e as System.EventArgs) Handles Button1.Click
Dim ws as New localhost. Service1 ()
Dim s as Stream = File1.PostedFile.InputStream
Dim data (file1.postedfile.contentlength-1) as Byte
S.read (data, 0, File1.PostedFile.ContentLength)
Ws. SaveImage (data)
End Sub
Here, we have created instance of Web Service class (actually proxy class). We fetched the file content into a byte array and then pass this array to the SaveImage Web method.
It's time now to develop another webform that would retrieve images from the database.
Add a new WebForm to the project called WebForm2 and put a label, TextBox, button and image Web control on it. The TextBox is used to specify the image ID to be retrieved. We'll retrieve the image as a byte array, save it in some file and then bind the "image Web control" file. The following is the markup of the WebForm:
<%@ Page language= "vb" autoeventwireup= "false" codebehind= "WebForm2.aspx.vb" inherits= "Binarydatawc.webform2"% >
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 transitional//en" >
<HTML>
<HEAD>
<title>WebForm2</title>
<meta name= "generator" content= Microsoft Visual Studio.NET 7.0 >
<meta name= "Code_language" content= "Visual Basic 7.0" >
<meta name= "vs_defaultClientScript" content= "JavaScript" >
<meta name= "vs_targetschema" content= "http://schemas.microsoft.com/intellisense/ie5" >
</HEAD>
<body ms_positioning= "GridLayout" >
<form id= "Form1" method= "POST" runat= "Server" >
<asp:button id= "Button1" style= "z-index:102; left:271px; Position:absolute; TOP:29PX "runat=" Server "text=" Retrieve "></asp:Button>
<asp:label id= "Label1" style= "z-index:104; left:31px; Position:absolute; top:31px "runat=" Server ">image ID:</asp:label>
<asp:textbox id= "TextBox1" style= "z-index:103; left:108px; Position:absolute; top:30px "runat=" Server ></asp:TextBox>
<asp:image id= "Image1" style= "Z-INDEX:101; left:28px; Position:absolute; top:70px "runat=" Server ></asp:Image>
</form>
</body>
</HTML>
Write the following code in the Click event of Retrieve button:
Private Sub button1_click (ByVal sender as System.Object, ByVal e as System.EventArgs) Handles Button2.click
Dim ws as New localhost. Service1 ()
Dim data () as Byte = ws. Retrieveimage (TextBox1.Text)
Dim s as New FileStream (Server.MapPath (Request.applicationpath) & "\sample.jpg", FileMode.Create)
S.write (data, 0, data.) Length)
S.close ()
Image1.imageurl = Server.MapPath (request.applicationpath) & "\sample.jpg"
End Sub
Here we are have created a disk file to hold the retrieved bytes. The following screen shows a named run of the WebForm.
Summary
In this article we saw the develop an image upload Web Service. Web Services are based on standards like XML and SOAP that are ' Text only '. However, asp.net web Services make it easy to pass binary the Web Service by automatically encoding the D ATA using BASE64 encoding.
