jquery file upload issue with ie9

Question

I am having problems getting the plugin jquery file upload to work on ie9 - this script works fine on firefox, chrome and edge.

my problem is the add function being hit but the funtion data.submit() doesnt post the file to server :: no packet sent to server & no error in the debug console of ie.

Here is my html :

<form id="upload" method="post" action="upload"
    encoding="multipart/form-data" enctype="multipart/form-data">
    <div id="drop">
        Drop Here <a>Browse</a> <input type="file" id="upl" name="upl"
            multiple="multiple" />
    </div>

    <ul>
        <!-- The file uploads will be shown here -->
    </ul>

</form>
<script src="/assets/pages/scripts/uploadplugin/js/jquery.knob.js"></script>
<!-- jQuery File Upload Dependencies -->
<script src="/assets/pages/scripts/uploadplugin/js/jquery.ui.widget.js"></script>
<script src="/assets/pages/scripts/uploadplugin/js/jquery.fileupload.js"></script>
<script src="/assets/pages/scripts/uploadplugin/js/jquery.iframe-transport.js"></script>
<!--[if lt IE 10]> <script src="/assets/pages/scripts/uploadplugin/js/jquery.xdr-transport.js"></script> <![endif]-->
<script src="/assets/pages/scripts/uploadplugin/js/script.js"></script>

Here is the script.js

// Initialize the jQuery File Upload plugin
$('#upload').fileupload({

    forceIframeTransport: !!ie,

    // This element will accept file drag/drop uploading
    dropZone: $('#drop'),
    autoUpload: true,
    // This function is called when a file is added to the queue;
    // either via the browse button, or via drag/drop:
    add: function (e, data) {

        var tpl = $('<li class="working"><input type="text" value="0" data-width="48" data-height="48"'+
        ' data-fgColor="#0788a5" data-readOnly="1" data-bgColor="#3e4043" /><p></p><span></span></li>');

        // Append the file name and file size
        tpl.find('p').text(data.files[0].name)
        .append('<i>' + formatFileSize(data.files[0].size) + '</i>');

        // Add the HTML to the UL element
        data.context = tpl.appendTo(ul);

        // Initialize the knob plugin
        tpl.find('input').knob();

        // Listen for clicks on the cancel icon
        tpl.find('span').click(function(){

            if(tpl.hasClass('working')){
                jqXHR.abort();
            }

            tpl.fadeOut(function(){
                tpl.remove();
            });

        });

        // Automatically upload the file once it is added to the queue
        var jqXHR = data.submit();
        console.dir(jqXHR);
        console.log(jqXHR.state());

    },

    progress: function(e, data){

        // Calculate the completion percentage of the upload
        var progress = parseInt(data.loaded / data.total * 100, 10);

        // Update the hidden input field and trigger a change
        // so that the jQuery knob plugin knows to update the dial
        data.context.find('input').val(progress).change();

        if(progress == 100){
            data.context.removeClass('working');
        }
    },
    done: function(e, data){
        var r = data.result;

        var tmp = $('<div class="row"><div class="col-md-12"><div class="portlet box red"><div class="portlet-title"><div class="caption"><i class="fa fa-gift"></i>Portlet </div><div class="tools"><a href="javascript:;" class="collapse"></a><a href="#portlet-config" data-toggle="modal" class="config"></a><a href="" class="fullscreen"></a><a href="javascript:;" class="reload"></a></div><ul class="nav nav-tabs"><li><a href="#portlet_tab_3" data-toggle="tab"> Tab 3 </a></li><li><a href="#portlet_tab_2" data-toggle="tab"> Tab 2 </a></li><li class="active"><a href="#portlet_tab_1" data-toggle="tab"> Tab 1 </a></li></ul></div><div class="portlet-body"><div class="tab-content"><div class="tab-pane active" id="portlet_tab_1"><p> Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.ut laoreet dolore magna ut laoreet dolore magna. ut laoreet dolore magna. ut laoreet dolore magna. </p></div><div class="tab-pane" id="portlet_tab_2"><p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmodtempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo. </p></div><div class="tab-pane" id="portlet_tab_3"><p> Ut wisi enim ad btn-smm veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p></div></div></div></div></div></div>');
        tmp.appendTo(resultdiv);
        console.log(r);
    },
    fail:function(e, data){
        // Something has gone wrong!
        console.log(data.jqXHR.responseText);
        console.dir(data);
        data.context.addClass('error');
    },
    processalways: function(e,data){
        console.dir(data);
        if (data.files.error) alert(data.files[0].error);
    }

});

None of the functions done, fail, success nor processalways is been hit. Thanks in advance.