JQuery File Upload plugin issue with IE for CSV and XML

Question

I have checked online including this web site and have been unable to find a solution to my problem.

I am trying to us the JQuery File Upload plugin and have made some amendments to restrict the files types to CSV and XML, as well as restricting to 1 file only and up to 5MB per file. These new properties work fine and it also works fine in all browsers except IE.

I have bound an event on the fileupload event that will render the CSV as a HTML table. This works fine in all browsers except IE. In IE, it either throws an error or freezes with the green progress bar at the top right displaying the following information:

7.123775601068567 bit/s | 00:00:00 | 100.00 % | 0.00 KB / 0.00 KB

It actually looks like it is hanging as it does not seem to complete the upload. And when I reload the same page it shows the correct display! without the progress bar!

UPDATE: The code is fine when I simply upload the CSV file. Now the problem appears when I attempt to include a callback option. It seems related to the 'fileuploadcompleted' event, which I updated from 'fileuploaddone', which has improved the result but still not right and does not execute and render the HTML table at all (See link above for example)

// Load existing files:
$('#fileupload').each(function () {
    var that = this;            
    $.getJSON(this.action, function (result) {
        if (result && result.length) {
            $(that).fileupload('option', 'done')
                .call(that, null, {result: result});
        }
    });
}).bind('fileuploadcompleted', function (e, data) {         
    //console.log('fileuploaddone:start');
    var $filename = $('#fileupload td.name').text().trim();
    //console.log('filename is ' + $filename);

$.get('../jQuery-File-Upload/server/php/files/' + $filename, function(data) {
        $('#CSVSource').html('<pre>' + data + '</pre>');
});
$('#CSVTable').CSVToTable('../jQuery-File-Upload/server/php/files/' + $filename,{ 
        loadingImage: 'img/loading-table.gif', 
        startLine: 0 }).bind("loadComplete",function() {//for future use});
    }).bind('fileuploaddestroy', function (e, data) {
        //console.log('fileuploaddestroy');
        $('div#CSVTable').fadeOut(1000);            
    });

Any ideas how to get this working in IE?

Many thanks.

Have you trying the offical support forum https://groups.google.com/forum/#!forum/jquery-fileupload ? — RoToRa, Oct 15 '12 at 11:16
Hi there, thanks for the link. I've checked the forum you mentioned above and cannot find anything. I will post my question there in case someone has missed it here. If I get any good feedback, I will share it here. — user1746582, Oct 15 '12 at 12:34
ok regarding my post above I have managed to resolve the 'delete not working issue' - I just had to comment out the console.log statement, which obviously doesn't work in some versions of IE. However, I still have the display issue regarding 'Updates' — user1746582, Oct 15 '12 at 13:12

score 1 · Accepted Answer · edited May 23 '17 at 12:12

ok the issue is resolved after much digging, though solution was quite simple and has been covered here:

How to deal with ie8 jquery object doesn't support this property or method Error?

So basically in the code above I should have been using the JQuery version of trim, which was updated as follows:

var $filename = $.trim($('#fileupload td.name').text());

posting the question in some strange way helped me resolve this issue :)

As a side note: I've also noticed that if you have htaccess restrictions on the folder where your 'upload' web page is, you can also have different behaviour in IE. For example, with access restrictions set, the upload works though it does not display the actual file uploaded, despite uploading. And when you delete the file, it asks you to log in.

JQuery File Upload plugin issue with IE for CSV and XML

1 Answers1