How to zip the file on the fly and send to server while submitting the form?

[sriramkp]

I have input tag type file and a submit button in a form. So the user can select the file and click on the submit button. My requirement here is the selected file must be read and compressed on the fly in memory and send the compressed file/blob to the server. Here I want to do 2 things. 1. compress the user selected file in memory 2. replace the file with the compressed file/blob to the form. I want handle all this as part of the $("#form").submit(function (event) { ... });

[binoyskumar]

Check this once : https://stuk.github.io/jszip/documentation/examples/read-local-file-api.html Go to inspect element to find the JS code for the same.

[simonh1000]

I looked at your example and the APIs and wrote the following. I started selecting a single file, but ultimately need to handle multiple (large pdf) files. The problem is that when I download the file from S3 I get a zip file that contains a .cpgz file which contains the original zip file, .... I'm not able to unzip the file (in OSX) and get back my original content. Can you help?

        $("#files").on("change", (evt) => {     // file input handler
            files = evt.target.files;
        });
        $("#submit").on("click", () => {
                AWS.config.update({
                    accessKeyId: 'AKIA......Q',
                    secretAccessKey: '......'
                });
                AWS.config.region = 'us-west-1';

                var s3 = new AWS.S3({apiVersion: '2006-03-01', params: {Bucket: 'uploads'}});

                for (var i = 0, f; f = files[i]; i++) {
                    myzip.file("myzipfile", f)
                }
                myzip.generateAsync({type:"base64"})
                .then( (myzipfile) => {
                    var params = {
                        Key: "myzip.zip",
                        ContentType: "application/zip",
                        ContentEncoding: 'base64',
                        Body: myzipfile
                    };

                    s3.putObject(params, (err, res) => {
                        if (err) throw err;
                        console.log(res);
                    });
                });

[simonh1000]

OK, I found the solution: use myzip.generateAsync({type:"blob"})

[Bivin21]

I've an issue regarding jszip. I tried to zip a file from the example in jszip's site, on a hybrid app using crosswalk in angularjs and cordova. But it does not seem to work. I tried to zip it and all I got is a binary bin file with a hash name don't know what to do next, I'm a beginner at zip.

Thanks

[samanshahmohamadi]

@Bivin21 Just use zip.generateAsync({type:"blob"}) to generate a blob (that represent your zip) and post the result of that to your server. do not try to create a file object or anything with result of generateAsyns. Just post the result and your server will receive that same as file input.

var zip = new JSZip();  
zip.file("myText.txt", your_file_input_value);  
zip.generateAsync({type: "blob"}).then(zipBlob => {  
    // here send a post request using the zipBlob as a post parameter  
})`

[kejsiStruga]

Hi, I'm trying to get JSZip working on my app in cordova ios, verything goes fine (no errors) but I don't get the file after all, code I use:

      zip.generateAsync({
                    type: 'blob'
                }).then(function(content) {
                    saveAs(content, folderName + '.zip');
                });

Can you help please?

Thank you!

[cognivore]

@kejsiStruga did you figure it out in the end?