Blue Imp jQuery File Upload - IE8 data.submit() not firing

Question

I am using the Blue Imp jQuery File Uploader to upload files to an MVC controller. This is working on all browsers except for Internet Explorer 8 where data.submit() does not seem to be firing. I have added a watch to 'data' and I can see the file in there, however the form is simply not being submitted. Below is a stripped down version of my plugin code:

$('#fileupload').fileupload({
    dataType: 'json',
    url: "Upload/Index",
    limitConcurrentUploads: 1,
    sequentialUploads: true,
    add: function (e, data) {
        var filename = data.files[0].name;
        data.context = $('<div class="progress-container"></div>').text(filename).appendTo      ($('#filelistholder'));
        // Add a progress bar for the file
        $('<div class=\"margin-b-10 progress-halved\"><div class="bar"></div></div>').appendTo(data.context);
        // Add a new click event for the Upload All button and enable it
        $('#btnUploadAll').removeAttr('disabled').click(function () {
            // Submit the file and remove the click event
            data.submit();
            $('#btnUploadAll').off('click');
        });
        // Show how many files have been selected
        $('#overallProgressText').text($('.progress-container').size() + ' file(s) selected');
    },
    progressall: function (e, data) {
        // Update the Overall progress bar
        var progress = parseInt(data.loaded / data.total * 100, 10);
        $('#overallbar').css('width', progress + '%');
        // If all files have finished uploading disable the Upload All button
        if (progress == 100) {
            $('#btnUploadAll').attr('disabled', 'disabled');
        }
    },
    progress: function (e, data) {
        // Update the file's progress bar
        var progress = parseInt(data.loaded / data.total * 100, 10);
        data.context.find('.bar').css('width', progress + '%');
    },
    fail: function (e, data) {
        $('#alertDivText').text('An unexpected error has occurred');
        $('#AlertDiv').dialog({
            title: "Alert",
            buttons: {
                Close: function () {
                    $(this).dialog("close");
                }
            },
            modal: true,
            closeOnEscape: true,
        });
    }
});

Note: I am using jquery.iframe-transport.js and jquery-1.11.1

Any help would be much appreciated, Thanks.

Answer 1

The form with file upload plugin must be with enctype="multipart/form-data".

Example:

<form action="/index" enctype="multipart/form-data" method="post">
    <input type="file" id="fileupload" name="fileupload" accept="image/*" multiple="multiple">
</form>