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.

Camembert

Remove the "dataType: 'json'," and try again. – Revere

Some additional hints that could help: #15426434 #17533608 #8814568 – Revere

Could you use data.trigger();? – Netherlands

possible duplicate of Trying to upload a non-existent file in Internet Explorer, form is not submitted – Bothy

I have the same problem in ie9 too – Shellyshelman

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>

Pilfer

Answer 2

What about upload button submit event registering already on add event?

Like this:

add: function (e, data) {
  $('#buttonUpload').click(function (e) {
    data.submit()
      .error(function (jqXHR, textStatus, errorThrown) {
        alert(errorThrown);
      })
      .complete(function (result, textStatus, jqXHR) {
        //var fileCounterComplete = getUplFilesCount();
        //fileCounter++;                    
        //ajaxSubmit();
    });
  });
  return false;
});

Hafnium