2

Is there a javascript library that can be used to merge 2 or more zip files into a new zip file, without unzipping them first. I have been looking but have not been able to find one.


I am adding to this question since I am not getting very good answers.

Firstly this IS possible and has been done in libraries for several different languages (specifically merging zip files without extracting them first). This is owed to the way the zip format works, pls go read up about it instead of telling me it isn't possible.

Secondly pls don't post links to random zip libraries, I specifically need to merge two zip files together not any other zip related functionality.

And lastly, I dont really care whether the solution is for client or server side (or what personal feelings about this subject are), I just need to do it in javascript.

Thank you in advance

user2765977
  • 491
  • 4
  • 18
  • Did you see this - http://stackoverflow.com/a/8621647/2524202 – SK. Jul 16 '15 at 07:19
  • no, that's not possible. you can create a new third zip with both. – dandavis Jul 16 '15 at 07:22
  • :mike I have seen that, it cannot merge zip files without decompressing them. :dandavis, could you pls explain why you say it is not possible as I have seen many libraries capable of doing this and I would be able to explain to you how it is technically possible if required. – user2765977 Jul 16 '15 at 07:30

2 Answers2

3

Fiddle: https://mikethedj4.github.io/kodeWeave/editor/#ca2d1692722e8f6c321c322cd33ed246

After many hours and failed attempts I finally got it to work with JSZip!

JavaScript:

// Set Sample URL
document.getElementById("zipurl").value = "https://mikethedj4.github.io/kodeWeave/editor/zips/font-awesome.zip";

$(".loadzipurl").on("click", function() {
  if ( (!document.getElementById("zipurl").value) ) {
    // Do nothing
    console.error("Unable to perform operation as value is blank!");
  } else {
    if ( (document.getElementById("zipurl").value.toLowerCase().substring(0,7) === "http://" ) || (document.getElementById("zipurl").value.toLowerCase().substring(0,8) === "https://") ) {
      JSZipUtils.getBinaryContent(document.getElementById("zipurl").value, function(error, repoFiles) {
        if(error) {
          throw error // or handle err
        }

        var webAppZipBinary = repoFiles;

        // Download as Windows App
        JSZipUtils.getBinaryContent("https://mikethedj4.github.io/kodeWeave/editor/zips/YourLinApp.zip", function(err, data) {
          if(err) {
            throw err // or handle err
          }

          console.log("Creating application!");
          var zip = new JSZip();
          zip.load(data);

          // Your Web Application
          zip.folder("HELLOMOMMY/").load(webAppZipBinary);

          // For 32bit Windows Application
          zip.file("package.json", '{\n  "main"  : "index.html",\n  "name"  : "test",\n  "window": {\n      "toolbar" : false,\n      "icon"    : "app/icons/128.png",\n      "width"   : 1000,\n      "height"  : 600,\n      "position": "center"\n  }\n}');
          zip.file("index.html", '<!doctype html>\n<html>\n <head>\n    <title>test</title>\n    <style>\n      iframe {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        overflow: visible;\n        border: 0;\n      }\n    </style>\n  </head>\n <body>\n    <iframe src="app/index.html"></iframe>\n  </body>\n</html>');

          // Export your application
          var content = zip.generate({type:"blob"});
          saveAs(content, "test-win.zip");
          return false;
        });
      });
    } else {
      console.error("Error! \"http://\" and \"https://\" urls are only supported!");
    }
  }
});

HTML:

<input type="text" id="zipurl" placeholder="http://">
<button class="loadzipurl">Export Application</button>
Michael Schwartz
  • 8,153
  • 14
  • 81
  • 144
  • 1
    wow 3 years later and theres an 'official solution'. I originally just solved my question by manipulating the zip file contents manually with array buffers. Glad to see there is finally a library that can do it. – user2765977 Jul 01 '20 at 09:32
0

File handling was completely not supported on client side (I mean using JavaScript) few days back, but now this partially supported with some limits. You can read Images/PDFs etc with help of this using HTML 5 API. But I still doubt that we can do such operations (extracting or merging zip files) on client side.

I would suggest to do these things on server side.

Ashish Kumar
  • 2,991
  • 3
  • 18
  • 27