Question

I am attempting to use an upload jquery control. The code below successfully connects to my ASP.Net Handler and process’s files fine. After processing I need to send back a string of data to the client.

Here is the example I am working off..

I am having issues with a few things..

1) How to I send data back to the client from a Handler

2) Is anyone familiar to understand where to catch the code on the Handlers success. I dont see an OnComplete, done method to subscribe too.

Here is my Handler..

  public class FileUpload : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {

            if (context.Request.Files.Count == 0)
            {

                LogRequest("No files sent.");

                context.Response.ContentType = "text/plain";
                context.Response.Write("No files received.");

            }
            else
            {

                HttpPostedFile uploadedfile = context.Request.Files[0];

                string FileName = uploadedfile.FileName;
                string FileType = uploadedfile.ContentType;
                int FileSize = uploadedfile.ContentLength;

                LogRequest(FileName + ", " + FileType + ", " + FileSize);

                string theName=uploadedfile.FileName.Substring(uploadedfile.FileName.LastIndexOf('\\'));

                uploadedfile.SaveAs(HttpContext.Current.Server.MapPath("/Upload") + theName);

                context.Response.ContentType = "text/plain";
                context.Response.Write("{\"name\":\"" + FileName + "\",\"type\":\"" + FileType + "\",\"size\":\"" + FileSize + "\"}");

                context.Response.Write("Hi From Handler");
            }

        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }

Here is my client code..

 <script>
            /*global $ */
            $(function () {
                $('#file_upload').fileUploadUI({
                    url: 'FileUpload.ashx',
                    method: 'POST',
                    uploadTable: $('#files'),
                    downloadTable: $('#files'),
                    buildUploadRow: function (files, index) {
                        return $('<tr><td>' + files[index].name + '<\/td>' +
                            '<td class="file_upload_progress"><div><\/div><\/td>' +
                            '<td class="file_upload_cancel">' +
                            '<button class="ui-state-default ui-corner-all" title="Cancel">' +
                            '<span class="ui-icon ui-icon-cancel">Cancel<\/span>' +
                            '<\/button><\/td><\/tr>');
                    },
                    buildDownloadRow: function (file) {
                        return $('<tr><td>' + file.name + '<\/td><\/tr>');
                    },
                    parseResponse: function (data) {
                        alert("yo");
                    }
                });    
            });

        </script> 

Answer 1

1) How to I send data back to the client from a Handler

Th way you are doing it seems correct, just write it out to the response stream.

2) Is anyone familiar to understand where to catch the code on the
Handlers success. I dont see an OnComplete, done method to subscribe
too.

I haven’t worked with the fileUploadUI plugin but based on the docs the send method returns a jqXHR object which you should be able to bind to the success function

Here’s the snippet from the documentation

var jqXHR = $('#fileupload').fileupload('send', {files: filesList})
    .success(function (result, textStatus, jqXHR) {/* ... */})
    .error(function (jqXHR, textStatus, errorThrown) {/* ... */})
    .complete(function (result, textStatus, jqXHR) {/* ... */});

Edit:
There are supposed to be two ways you can bind to the callbacks, either by passing them in with the options object, or later by binding event listeners to the widget element.

For example:

 $('#fileupload').fileupload({
         always: function (e, data) {
           //the jqXHR is a property of the data object        
         },
     //rest of the options
   });