modify a zip file in react/javascript

Question

I wanted to allow user to modify a zip file which they uploaded and then submit it to the server. My UI is made using react js and I am using JsZip library to do it.

var zip = new JSZip();
        let myZip = null;
        zip.loadAsync(f).then( zipFile => {
            Object.keys(zipFile.files).forEach(filename => {
                zip.file(filename, text);
              
                
                myZip = zipFile.generateAsync({type : "string"}).then(function (blob) {
                    myZip = new File([blob], "hello.zip");
                });
                ;
                

            })
        });

Note:The zip has just one file at entry level. Rest are inside a folder.

Problem is that I am unable to create the final zip using generateAsync function. The myZip object is null.

Any help is appreciated. Thanks.

Have you tried [reading the documentation](https://stuk.github.io/jszip/documentation/howto/write_zip.html)? `zipFile.generateAsync({type : "string"}).then(function(myZip) { ... })` — Guy Incognito, Dec 07 '20 at 13:45
@GuyIncognito I actually dont want to download it, I want it to be sent as a part of a server request. I did use .then and tried creating a file object inside but it also gave me null — Saransh Agarwal, Dec 07 '20 at 13:56
@GuyIncognito I have modified the description with the .then code. Please tell me if there are any mistakes in it. I am new with javascript. — Saransh Agarwal, Dec 07 '20 at 13:59
Does this answer your question? [Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference](https://stackoverflow.com/questions/23667086/why-is-my-variable-unaltered-after-i-modify-it-inside-of-a-function-asynchron) — Heretic Monkey, Dec 07 '20 at 14:01

score 0 · Answer 1 · answered Dec 08 '20 at 07:33

Thanks for the help. I solved it by changing the type from string to blob in the generateAsync function.The documentation was a bit unclear about the list of possible "type" and their uses. Instead of creating a string then a File object out of it, this allowed me to directly create a blob and use it in my POST request.

modify a zip file in react/javascript

1 Answers1