Issue with IE 9 and JSZip

[ncpavankumar]

Hi

I am trying to use this fix to resolve the same issue in the application that I am working on. I am still at loss in getting a working solution. Here is my case:

I am having an ajax call for getting the zip file and setting the xhr's overrideMimeType property at beforeSend. I have included the VB Script as an inline script in the html and am trying to call the functions on success of the ajax calls. I am getting the data as binary. using this binary, I am trying to use the code provided in the test scripts to fix the IE issue.

   var url = block.url;
   return $.ajax({ url:block.url, dataType:'text',
                    beforeSend: function( xhr ) {
                        // The .zip libraries require that the stream be plain text.
                        // 
                        xhr.overrideMimeType( "text/plain; charset=x-user-defined" );
                    },
                    progress: function (jqXHR, progressEvent) {
                        if (progressEvent.lengthComputable) {
                            job.setProgress( progressEvent.loaded / progressEvent.total );
                        } else { 
                            job.setProgress( 0.5 );
                        }
                    },
                    complete: function( jqXHR, textStatus ) { 
                        job.setProgress( 1 );
                        job.done();
                    },
                    success: function(data,textStatus,jqXHR) {
        var browserVersion = threeJsHelper.getBrowserVersion();
        if(browserVersion === '>ie9') {
            var binary = data;
            var byteMapping = {};
            for ( var i = 0; i < 256; i++ ) {
                for ( var j = 0; j < 256; j++ ) {
                    byteMapping[ String.fromCharCode( i + (j << 8) ) ] = 
                                                            String.fromCharCode(i) + String.fromCharCode(j);
                }
            }

            var rawBytes = IEBinaryToArray_ByteStr(binary);
            var lastChr = IEBinaryToArray_ByteStr_Last(binary);
            var mapMatch = function(match) {
                return byteMapping[match];
            };
            var dataFile = rawBytes.replace(/[\s\S]/g, mapMatch) + lastChr; 
                                data = dataFile;
        }
        job.setProgress( 0.99 );
                        block.resourceData.rawdata = data;
                        $rootScope.$broadcast( 'loadResource', block );
                    }
                  });
};

Once the loadResource is broadcasted, I am using the rawData as jszip = new JSZip( resourceData.rawdata );
The error I see is :
Error: Corrupted zip : can't find end of central directoryundefined

Can you please advice me what is going on and where am I going wrong?

[dduponchel]

I didn't used IE9 to test it, but I think the error comes from var binary = data;
The previous version of the tests used jQuery for the ajax requests, there are some comments which could interest you.
To get your code working, you will need the original xhr object (and not the jqXHR but it may depend on the version of jQuery), you can use the context attribute in order to get it in your success callback. Then, use xhr.responseBody as your binary variable.

Good news : with this, your code should work in IE 6 -> 9. Bad news : it won't in IE 10.
In IE 10, the overrideMimeType trick doesn't work, which leads to this updated comment (and the updated files browser-test-utils.js and browser-ie-test-utils.js).

Does that "solve" (well, at least in IE9) your issue ?

[ncpavankumar]

Hi,

I came back after a long vacation and just started seeing this thread. I tried implementing as you have suggested. I am still facing some issues. I tried using the context as you suggested:

loadingFunction = function(id, block ) {
var context = {
xhr:jQuery.ajaxSettings.xhr()
url = block.url;
if (!url.match(/^http:///)) {
// Not an absolute URL, so use our data root
url += RootDataURL;
}
return $.ajax({ url:block.url,
context: context,
xhr: function(){ return context.xhr},
dataType:'text',
beforeSend: function( xhr ) {
// The .zip libraries require that the stream be plain text.
//
xhr.overrideMimeType( "text/plain; charset=x-user-defined" );
origXhr = xhr;
},
progress: function (jqXHR, progressEvent) {
if (progressEvent.lengthComputable) {
job.setProgress( progressEvent.loaded / progressEvent.total );
} else {
job.setProgress( 0.5 );
}
$rootScope.$broadcast( 'downloadJobUpdated', id);
},
complete: function( jqXHR, textStatus ) {
job.setProgress( 1 );
job.done();
$rootScope.$broadcast( 'downloadJobUpdated', id);
},
success: function(data,textStatus,jqXHR) {
var browserVersion = threeJsHelper.getBrowserVersion();
if(browserVersion === '>ie9') {
var binary = this.xhr.responseBody;
// var binary = context.xhr.responseBody;

                                var byteMapping = {};
                                for(var i = 0; i < 256; i++) {
                                    for(var j = 0; j< 256; j++) {
                                        byteMapping[ String.fromCharCode( i + (j << 8) )] = String.fromCharCode(i) + String.fromCharCode(j);
                                    }
                                }

                                var rawBytes = IEBinaryToArray_ByteStr(binary);
                                var lastChr = IEBinaryToArray_ByteStr_Last(binary);
                                var dataFile = rawBytes.replace(/[\s\S]/g, function( match ) {
                                    return byteMapping[match];
                                }) + lastChr;
                                data = dataFile;
                            } 
                            job.setProgress( 0.99 );
                            block.resourceData.rawdata = data;
                            $rootScope.$broadcast( 'loadResource', block );
                            $rootScope.$broadcast( 'downloadJobUpdated', id );
                        }
                      });
    };                      };

I tried using this.xhr.responseBody. This object seems to be undefined. the this.xhr.responsetext however does have the same value of the data object, and using this for IE doesnt make any sense (since it is not improving on the result).

Did I do something wrong?

[ncpavankumar]

Update-

When I add the this.xhr to watch and view its values, this is what I see:

[dduponchel]

I was doing the same thing, debugging in IE 9 to see what's going on...
xhr.responseBody is not exactly undefined. I don't know how IE handles that : it is shown as undefined but when given to IEBinaryToArray_ByteStr we get the right results.

[ncpavankumar]

When I implement it exactly as you have done (by using the getBinaryFromXHR as a conditional script in the html page and calling it from the success callback, I do not get any error but the page goes unresponsive. It doesnt get the right results though. This is what I am doing:

var context = {
xhr:jQuery.ajaxSettings.xhr()
};
return $.ajax({ url:block.url,
context: context,
xhr: function(){return context.xhr},
dataType:'text',
beforeSend: function( xhr ) {
// The .zip libraries require that the stream be plain text.
//
xhr.overrideMimeType( "text/plain; charset=x-user-defined" );
},
progress: function (jqXHR, progressEvent) {
if (progressEvent.lengthComputable) {
job.setProgress( progressEvent.loaded / progressEvent.total );
} else {
job.setProgress( 0.5 );
}
$rootScope.$broadcast( 'downloadJobUpdated', caseid );
},
complete: function( jqXHR, textStatus ) {
job.setProgress( 1 );
job.done();
$rootScope.$broadcast( 'downloadJobUpdated', caseid );
},
success: function(data,textStatus,jqXHR) {
var browserVersion = threeJsHelper.getBrowserVersion();
if(browserVersion === '>ie9') {
var dataFile = getBinaryFromXHR(jqXHR.responseText, this.xhr);
data = dataFile;
}
job.setProgress( 0.99 );
block.resourceData.rawdata = data;
$rootScope.$broadcast( 'loadResource', block );
$rootScope.$broadcast( 'downloadJobUpdated', caseid );
}
});

[dduponchel]

Can you try with a small (less than 1K) zip file ? IE < 10 is really slow even with medium sized zip files.

[ncpavankumar]

I shall try that and see. This should mean that even for the large sized ones, if I wait a little while, they might come up? The speed is not acceptable, but first step is for me to see atleast it works on ie9.

I shall try both scenarios and let you know.

[ncpavankumar]

20 minutes and counting. I dont think it is actually working! Shall have to work with the smaller file too.

[dduponchel]

I suggested a file < 1K because I'm sure you won't have any performances issue with it. In our unit tests, you can activate the option Load complex files. The file "Franz Kafka - The Metamorphosis.epub" is 272K and loads in IE 9 in ~400ms (on my local repository, this time includes the networking) but crashes IE6.
How big are your files ?

[ncpavankumar]

Well, 2.5 Kb. Thats the reason why I said that it is not working.

[ncpavankumar]

I really feel that I am doing something that is incorrect. But I am not able to see what.

[dduponchel]

Oh. The size is not an issue then. I jumped to the wrong conclusion when you said that IE was unresponsive.
It seems you have an infinite loop. With the debugger you should be able to find the faulty line / loop.

[ncpavankumar]

Hi

I found out that the application hangs when I call these lines of code in IE9. Any reason why?

data = jszip.file( fileName);
dataBinary = data.asBinary();

It fails using .asText() or .asUint8Array() also.