Wednesday, July 18, 2012

Send uploaded file stream to a WCF service

Last week I accessed a WCF service from JQery and consumed a Json typed object. But this time, it is totally different. I wanted to send a file stream to the WCF service without using client side script to access the WCF service.

If I brief the scenario, first there should be a client side file upload to user to upload a file, then that file should pass to the WCF service. HttpHandler was the first thing came in to my mind when I thought about creating a bridge between client side upload and receiving file stream by WCF service. Following are the steps I carried out to successfully complete the solution.

First I will create the HttpHander which gets the file from the JQery file uploader and sends the stream to the WCF service,

Right click your web site and under "Add New Item" select "Generic Handler" then give the name as "AjaxFileUploadHandler.ashx" and add item to the web site. Then add following code block to the handler ("_client" public variable is the WCF service client).


 public class AjaxFileUploadHandler : IHttpHandler
    {
        Service1Client _client = new Service1Client();

        public void ProcessRequest(HttpContext context)
        {
            if (context.Request.Files.Count > 0)
            {
                var _file = context.Request.Files[0];
                Stream _stream = _file.InputStream;

                _client.GetFile(_stream);

                context.Response.Write("");
            }
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }


Then we'll move to the file upload. There are many JQery plugins available for file upload so I decided to use one of them, besides implementing a new one. you can download the plugin I used from following link,
http://www.phpletter.com/Our-Projects/AjaxFileUpload/

File upload code will be something like following code block (Notice that "url" in ajax function "$.ajaxFileUpload" is the name of HttpHandler) ,


<div>
        <input id="fileToUpload" type="file" size="45" name="fileToUpload" class="input">
        <button id="buttonUpload" onclick="return ajaxFileUpload();">
            Upload</button>
    </div>



<script type="text/javascript">

        function ajaxFileUpload() {

            $.ajaxFileUpload
            (
            {
                url: 'AjaxFileUploadHandler.ashx',
                secureuri: false,
                fileElementId: 'fileToUpload',
                dataType: 'json',
                success: function (data, status) {
                    if (typeof (dataerror) != 'undefined') {
                        if (data.error != '') {
                            alert(data.error);
                        } else {
                            alert(data.msg);}}
                },
                error: function (data, status, e) {
                    alert(e);
                }
            })

            return false;
        }

    </script>


note that you have to add the file upload plugin to the web site and add a reference in the "aspx" file.

now all the hard work is done. Following code blocks shows theOperationContract and its implementation in the WCF service,


[ServiceContract]
    public interface IService1
    {
        [OperationContract]
        void GetFile(Stream fileStream);



public class Service1 : IService1
    {
        public void GetFile(Stream fileStream)
        {
            StreamReader _reader = new StreamReader(fileStream);
            string _content = _reader.ReadToEnd();
        }


We are done. Enjoy..!!

No comments:

Post a Comment