CODEWITHSUNDEEP
javascriptarraysjszip
Michael Schwartz
Michael Schwartz

Reputation: 8415

Merge Remote 2 Zip Files into a New Zip File

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

JSZip makes it possible to read and write zip files in JavaScript.

However I was wondering how can I use this library to merge 2 separate zip files on remote servers? For example, say two Github repos.

My attempt below:

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
    alertify.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, dataFiles) {
        if(error) {
          throw error // or handle err
        }

        var webAppZipBinary = dataFiles;

        // Download as Windows App
        $(".export-app").on("click", function() {
          JSZipUtils.getBinaryContent("https://mikethedj4.github.io/kodeWeave/editor/assets/YourWinApp.zip", function(err, data) {
            if(err) {
              throw err // or handle err
            }

            alertify.message("Creating application!");
            var zip = new JSZip();
            zip.load(data);

            // Your Web Application
            zip.folder("app/").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 {
      alertify.error("Error! \"http://\" and \"https://\" urls are only supported!");
    }
  }
});

HTML: 

<input type="text" id="zipurl" placeholder="http://">
<button class="loadzipurl">Export Application</button>

Upvotes: 1

Views: 784

Answers (1)

Michael Schwartz
Michael Schwartz

Reputation: 8415

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
    alertify.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
          }

          alertify.message("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 {
      alertify.error("Error! \"http://\" and \"https://\" urls are only supported!");
    }
  }
});

HTML: 

<input type="text" id="zipurl" placeholder="http://">
<button class="loadzipurl">Export Application</button>

Upvotes: 3

Related Questions