Where Is A Success Callback For Jquery Plugin .Net

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>

Jack · Accepted Answer · 2012-12-21T20:21:30.697

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
   });

edited Dec 21 '12 at 20:21

answered Dec 21 '12 at 17:44

Jack

10,943
13
50
65

Thanks for the response would you be able to update my client side call with a success function? I am not sure how to set the code up to tell the client to both goto the handler url (which works woth my code above) And if success return the response string I create – Nick LaMarca Dec 21 '12 at 19:10
Adding this to my call doesnt seem to be ever engaging..error: function (result, textStatus, jqXHR) { alert("done"); }, complete: function (result, textStatus, jqXHR) { alert("done"); }, – Nick LaMarca Dec 21 '12 at 19:14
I am not sure we are looking at the same documentation. Can you recheck the link I provided? I think you are looking at a different plugin – Nick LaMarca Dec 21 '12 at 21:39
I searched for fileuploadui, and got to the documentation and example I used, I think its the same but I'll try and work with the link in your question later (right now GitHub seems to be down). – Jack Dec 23 '12 at 02:21
Its the same plugin, but the example your working off of uses an older version of the plugin (3.7.1 instead of 5.0.2). Unless you have a specific reason for using the older version, maybe you want to try the more current version. Here's the asp.net [example](http://www.webtrendset.com/2011/06/22/complete-code-example-for-using-blueimp-jquery-file-upload-control-in-asp-net/) I was using. – Jack Dec 23 '12 at 17:24

score 1 · Answer 2 · edited May 23 '17 at 10:24

Adding to part of Jack's response.. You can define event callbacks in two ways:

1) bind event listeners to the widget element, such as

$('#fileupload')
    .bind('fileuploadsend', function (e, data) {/* ... */})
    .bind('fileuploaddone', function (e, data) {/* ... */})
    .bind('fileuploadfail', function (e, data) {/* ... */})

These functions will be called after the widget's callback is executed. So the function bound using "fileuploaddone" will be called after the widget's "done" callback is run.

2) To override the widget's callback completely, you can define your callbacks as part of the widget's options.

$('#fileupload').fileupload({
     done: function (e, data) {

     },
     send: function (e, data) {

     },
     //other options

});

Documentation of all the widget events here: https://github.com/blueimp/jQuery-File-Upload/wiki/Options (search for "callback options")

In case you are running into issues with the done or other callbacks on IE9, then the response here could be useful: blueimp jquery file upload - "done", "complete" callbacks not working for IE 9

Hope this helps.

score 0 · Answer 3 · answered Sep 12 '13 at 11:34

0

I have the same problem, try to change de datatype of the return to "html".Ex:

    $('#fied').fileupload({
        url: 'handler.ashx',
        type: 'POST',
        dataType: 'html',
    });

In my case worked.

answered Sep 12 '13 at 11:34

Ebertz

1

Where Is A Success Callback For Jquery Plugin .Net

3 Answers3