Search code examples
javascriptjqueryfile-uploadinternet-explorer-8jquery-iframe-transport

jquery-iframe-transport not working for jquery file upload in IE8


I am using jQuery file upload to upload files in IE8. As this is an old non-HTML5 friendly browser, I am using jQuery Iframe Transport Plugin 1.8.2.

The 'done' is not being called and Iframe content appears empty.

CODE:

$('#files').fileupload({
        dataType: 'json',
    url: "/FileUploads/Upload",
    type: 'PUT',
    forceIframeTransport: true,
    progressall: function (e, data) {
        var progress = parseInt(data.loaded / data.total * 100, 10);
        $('#progress .bar').css(
            'width',
            progress + '%'
        );
    },
add: function (e, data) {
            data.context = $('<button/>').text('Upload')
                .appendTo($('#FileUploadsDrop'))
                .click(function () {
                    data.context = $('<p/>').text('Uploading...'+$('#files').val()).replaceAll($(this));
                    data.submit();
                });
        },
        done: function ( e, data ) {
            var result = $( 'pre', data.result ).text();
                if(result != null && $.trim( result ) != '' ){
                $('#FileUploadsDrop').append( result );
}
    }

    });`

Here is the DOM situation: enter image description here


Solution

  • In IE console, one cannot view json objects. So, I used JSON.stringify to check what was being returned by the server. The browser appeared to be failing to parse the returned data and thus the JSON object was returning an error message to this effect.

    The reason I was getting this problem is due to the fact that the data being returned is in fact not json.

    So, to solve this problem, I removed dataType: 'json',

    Problem solved.