8

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.

5

2 Answers 2

2

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>
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.