gzip form input files

Question

I am extremely new to javascript/web programming. The main use of my upload form are csv files mostly. I am already using pako to gzip my json (in the request url).

How can I gzip the files before they are sent to the server?

This is roughly how I construct the formdata

$.each($("input[type=file]"), function(i, obj) {
    $.each(obj.files, function(j, file) {
        formData.append(obj.name, file); // we need to gzip the data
    })
});

Edit1: I've managed to (I think) gzip the files using pako, but there's 1 issue - async problems. This is my new code:

$.each($("input[type=file]"), function(i, obj) {
    $.each(obj.files, function(j, file) {
        formData.append(obj.name, file); // we need to gzip the data
        var r = new FileReader();
        r.onload = function(){
            var zippedResult = pako.gzip(r.result);
            var oMyBlob = new Blob(zippedResult, {type : file.type}); // the blob
            formData.append(obj.name, oMyBlob); // we need to gzip the data
        };
        r.readAsArrayBuffer(file);
    })
});
// Time to send the formData!
 $.ajax({......

As you can see the issue happens since the onload function is only ran after ajax has executed, so the formData is blank

edit2: I'm attempting to create a onchange event for the input files, so this is what I have come up with so far. There is a problem though - it doesn't seems to be zipping correctly. Data type issues?

$("input[type=file]").change(function (event){  
    var fileList = this.files;
    $.each(fileList,function(i,file){
        var r = new FileReader();
        r.onload = function(){                   
            var zippedResult = pako.gzip(r.result);
            var oMyBlob = new Blob(zippedResult, {type : file.type});
            app.formData.append(event.target.name, oMyBlob, file.name);
        };
        r.readAsArrayBuffer(file);
    });
});

score 1 · Answer 1 · answered Sep 29 '15 at 06:16

This is what I've done - note that the formData is a global variable. Take note to clear the formData when you've submitted, if not it will just keep increasing. Also if you re-select a file, it will be appended onto the form (which might not be what you want) - I have not yet found a way around it.

$("input[type=file]").change(function (event){  
    var fileList = this.files;
    $.each(fileList,function(i,file){
        var r = new FileReader();
        r.onload = function(){
            var convertedData = new Uint8Array(r.result);

            // Zipping Uint8Array to Uint8Array
            var zippedResult = pako.gzip(convertedData, {to : "Uint8Array"});

            // Need to convert back Uint8Array to ArrayBuffer for blob
            var convertedZipped = zippedResult.buffer;

            var arrayBlob = new Array(1);
            arrayBlob[0] = convertedZipped;

            // Creating a blob file with array of ArrayBuffer
            var oMyBlob = new Blob(arrayBlob , {type : file.type} ); // the blob (we need to set file.type if not it defaults to application/octet-stream since it's a gzip, up to you)
            app.formData.append(event.target.name, oMyBlob, file.name); // we need to gzip the data
        };
        r.readAsArrayBuffer(file);
    });
});

score -2 · Answer 2 · answered Nov 27 '18 at 21:45

I have added gzip to JSZip.

I need JSZip and gzip for my web page, and JSZip has all the ingredients, but hides them in ways I can't crack

JSZip is is much better designed with the ability to process big files in chunked / streaming mode. I don't think pako alone does that. I am using both ZIP files and gzip for my project, so I figured basing them on the same package would be useful.

gzip form input files

2 Answers2