Submit Images to Web Service and Get Them Back

• Download source - 6 MB

Introduction

This tip shows how to upload images through a web service and get images back from the web service using a generic handler and display them on the DataList ASP.NET control.

Background

I asked these questions in many forums including CodeProject and found useful answers and wanted to show this idea as a small proof of concept.

Using the Code

WebForm1.aspx is responsible for uploading images using the FileUpload control and send image as an array of bytes and file name parameters to the web method public string UploadFile(byte[] f, string fileName) to be saved at a directory in the XML web service.

WebForm1.aspx.cs

protected void Button1_Click(object sender, EventArgs e) 
{ 
    // Upload the image and send it to the XML web service  
    // you can set limitations on the file type and file size  
    // according to your specification 
    byte[] file = FileUpload1.FileBytes; 
    MyService.Service1 serv = new MyService.Service1(); 
    serv.UploadFile(file, FileUpload1.FileName); 
}

The web method UploadFile of the XML web service gets the images as an array of bytes and writes it to the directory TransientStorage as a stream of bytes, and you need to be sure to edit the permissions of the directory TransientStorage to avoid the exception "Unauthorized access".

[WebMethod] 
public string UploadFile(byte[] f, string fileName) 
{ 
    // the byte array argument contains the content of the file 
    // the string argument contains the name and extension 
    // of the file passed in the byte array 
    try 
    { 
        // instance a memory stream and pass the 
        // byte array to its constructor 
        MemoryStream ms = new MemoryStream(f); 
        // instance a filestream pointing to the 
        // storage folder, use the original file name 
        // to name the resulting file 
        FileStream fs = new FileStream(System.Web.Hosting.HostingEnvironment.MapPath
                    ("~/TransientStorage/") + fileName, FileMode.Create);

        // write the memory stream containing the original 
        // file as a byte array to the filestream 
        ms.WriteTo(fs); 
        // clean up 
        ms.Close(); 
        fs.Close(); 
        fs.Dispose(); 
        // return OK if we made it this far 
        return "OK"; 
    } 
    catch (Exception ex) 
    { 
        // return the error message if the operation fails 
        return ex.Message.ToString(); 
    } 
}

Now how do we get the image from the web service?

The generic handler calls the web method public byte[] GetImageFile(string fileName) that exists at the XML web service to get the image as a stream of bytes using the image name and the names of the images saved in this example in the database.

public void ProcessRequest(HttpContext context) 
{ 
    MyService.Service1 ws = new MyService.Service1(); 
    //instantiate your webservice  
    //invoke GetImage method passing file name as param 
    string fileName = context.Request["fileName"]; 
    byte[] binImage = ws.GetImageFile(fileName); 
    if (binImage.Length == 1)
    { 
        //File Not found by the web services
        //Maybe you want to display an alternate image here...
    } 
    else
    {
        //file found, return it 
        context.Response.ContentType = "image/jpeg"; 
        context.Response.BinaryWrite(binImage); 
    } 
}

The XML web service will read the image using the file name and get the image back as an array of bytes to the generic handler.

[WebMethod, Description("Get image content")] 
public byte[] GetImageFile(string fileName) 
{ 
    if (System.IO.File.Exists
    (System.Web.Hosting.HostingEnvironment.MapPath
    	("~/TransientStorage/") + fileName)) 
    { 
        return System.IO.File.ReadAllBytes(
          System.Web.Hosting.HostingEnvironment.MapPath
          	("~/TransientStorage/") + fileName); 
    } 
    else 
    { 
        return new byte[] { 0 }; 
    } 
}

WebForm2 displays the images at the DataList, ImageUrl attribute of the image inside ItemTemplate will be mapped to the generic handler result

<asp:DataList ID="DataList1" runat="server"  
        onitemcommand="DataList1_ItemCommand" RepeatColumns="4"> 
    <ItemTemplate> 
        <table> 
            <tr> 
                <td> 
                    <asp:Image id="myImage" 
                    runat="server"  Width="140px" Height="140px"
                    ImageUrl='<%# string.Format
                    ("~/Handler1.ashx?fileName={0}",Eval("imageFile"))%>' />
                </td>  
            </tr> 
        </table> 
    </ItemTemplate> 
</asp:DataList>

The page load will bind the DataList to the DataTable, which contains the field 'imgFile' that represents the names of the images stored at the XML web service directory.

protected void Page_Load(object sender, EventArgs e)
{ 
    string conStr = @"Data Source=OMAR-PC;Initial Catalog=TestDB;User ID=sa;Password=123@asu;";
    SqlConnection con = new SqlConnection(conStr);
    SqlCommand cmd = new SqlCommand();
    cmd.CommandText = "SELECT * FROM Table1";
    cmd.Connection = con; 
    DataSet ds = new DataSet(); 
    SqlDataAdapter adapter = new SqlDataAdapter(cmd);
    adapter.Fill(ds); 
    DataList1.DataSource = ds; 
    DataList1.DataBind();  
}

The table 'Table1' will have the field 'imageFile' that contains the names of the images that will be displayed at the DataList control.

Points of Interest

For the first time, I learned how to use a generic handler in an example.