Implement SSE (Server Sent Events) with File Upload to ASHX Handler

Question

I want to implement the following:

1. Call an ASHX hanlder from UI using Jquery.
2. Upload a file to this ASHX handler.
3. And when upload is complete, I want to keep sending messages from the server to UI (SSE) to tell the user about the execution status of the code in ASHX handler.

I am stuck with the 3rd point that has been mentioned above.

Following is the UI code that I have written:

     var file = $("input#importFileInputHidden")[0].files[0];
     var formData = new FormData();
     formData.append('file', file);

     importAjaxCall = $.ajax({
        xhr: function () {
            var xhr = new window.XMLHttpRequest();
            $('#progressBar').show();

            //Method to show the progress of the file being uploaded
            xhr.upload.addEventListener("progress", function (evt) {
                if (evt.lengthComputable) {
                    var percentComplete = Math.round((evt.loaded / evt.total) * 100);
                    $('#percentageImportComplete').text('' + percentComplete + '%');
                    $('#importStatus').css('width', percentComplete + '%');
                }
            }, false);

            return xhr;
        },
        type: 'post',
        url: "Handler.ashx",
        data: formData,
        processData: false,
        contentType: false,
        success: function (data) {
            //Some code to show success status to user
    });

How to capture the messages I am sending from the server?

Answer 1

Have to tried to look into responseText property of http request?

success: function () {
            console.log(xhr.responseText);
    });