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.

Some additional hints that could help: http://stackoverflow.com/questions/15425934/jquery-fileupload-not-working-in-ie-8-and-9 http://stackoverflow.com/questions/17533108/jquery-file-upload-doesnt-work-in-ie9-when-compressed-with-requirejs/17536927#17536927 http://stackoverflow.com/questions/8814068/jquery-file-upload-ie-done-callback-data-result-issue — Jordi Corbilla, Aug 21 '14 at 22:09
possible duplicate of [Trying to upload a non-existent file in Internet Explorer, form is not submitted](http://stackoverflow.com/questions/691323/trying-to-upload-a-non-existent-file-in-internet-explorer-form-is-not-submitted) — Paul Sweatte, Sep 22 '14 at 22:41

score 2 · Answer 1 · answered Feb 19 '15 at 13:02

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>

score 0 · Answer 2 · answered Nov 07 '14 at 11:10

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

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

2 Answers2