javascript - JSZip Read Zip File and Execute from an Existing Zip File -

i've been using jszip read , write zip files in javascript.

what i'm trying load web app (index.html, style.css, image files, , whatever else user requires web app) compressed in zip file input[type=file] element (i'm using filereader read contents of zip file , display files/folders on page)

// show contents var $result = $(".result"); $("#file").on("change", function(evt) {   // remove content   $result.html("");   // sure show results   $(".result_block").removeclass("hide");    // see http://www.html5rocks.com/en/tutorials/file/dndfiles/    var files = evt.target.files;   (var = 0, f; f = files[i]; i++) {      var reader = new filereader();      // closure capture file information.     reader.onload = (function(thefile) {       return function(e) {         var $title = $("<h4>", {           text : thefile.name         });         $result.append($title);         var $filecontent = $("<ul>");         try {            var datebefore = new date();           // read content of file jszip           var zip = new jszip(e.target.result);           var dateafter = new date();            $title.append($("<span>", {             text:" (parsed in " + (dateafter - datebefore) + "ms)"           }));           $(".check").removeclass("hide");            // that, or ol' for(var entryname in zip.files)           $.each(zip.files, function (index, zipentry) {             $filecontent.append($("<li>", {               text : zipentry.name             }));             // content here : zipentry.astext()           });           // end of magic !         } catch(e) {           $filecontent = $("<div>", {             "class" : "alert alert-danger",             text : "error reading " + thefile.name + " : " + e.message           });         }         $result.append($filecontent);       }     })(f);      // read file !     // readasarraybuffer , readasbinarystring both produce valid content jszip.     reader.readasarraybuffer(f);     $(".check").removeclass("hide").addclass("hide");     // reader.readasbinarystring(f);   } }); 

then when click on linux icon want export web app native linux app. using jsziputils/jszip. i'm loading zip file named yourlinapp.zip has files necessary user run web app native linux app. that's missing in zip file source code.

i trigger using following function...

// download linux app $(".export-as-lin-app").on("click", function() {   jsziputils.getbinarycontent("yourlinapp.zip", function(err, data) {     if(err) {       throw err; // or handle err     }      var zip = new jszip(data);      // web app     zip.file("source.c", "/*\n  save file main.c , compile using command\n  (those backticks, not single quotes):\n    gcc -wall -g -o main main.c `pkg-config --cflags --libs gtk+-2.0 webkit-1.0` -export-dynamic\n  \n  execute using:\n  ./main\n  \n  if can't compile chances don't have gcc installed.\n  install gcc/c following terminal command. (this command debian based linux distros)\n    sudo apt-get install libgtk2.0-dev libgtk2.0-doc libglib2.0-doc\n  \n  webkit requires libraries aquire, configure, , compile. can libraries issuing following command in terminal:\n    sudo apt-get install subversion gtk-doc-tools autoconf automake libtool libgtk2.0-dev libpango1.0-dev libicu-dev libxslt-dev libsoup2.4-dev libsqlite3-dev gperf bison flex libjpeg62-dev libpng12-dev libxt-dev autotools-dev libgstreamer-plugins-base0.10-dev libenchant-dev libgail-dev\n  \n  ubuntu webkit information - https://help.ubuntu.com/community/webkit\n    sudo apt-get install libwebkitgtk-dev python-webkit-dev python-webkit\n  \n  required dependencies build: (if installed above not needed)\n    sudo apt-get install libgtk2.0-dev libgtk2.0-doc libglib2.0-doc subversion gtk-doc-tools autoconf automake libtool libgtk2.0-dev libpango1.0-dev libicu-dev libxslt-dev libsoup2.4-dev libsqlite3-dev gperf bison flex libjpeg62-dev libpng12-dev libxt-dev autotools-dev libgstreamer-plugins-base0.10-dev libenchant-dev libgail-dev libwebkitgtk-dev\n*/\n\n#include <limits.h>\n#include <gtk/gtk.h>\n#include <webkit/webkit.h>\n\nstatic gtkwidget* window;\nstatic webkitwebview* web_view;\n\nstatic void destroy_cb (gtkwidget* widget, gpointer data) {\n  gtk_main_quit();\n}\n\nstatic gtkwidget* create_browser() {\n  gtkwidget* scrolled_window = gtk_scrolled_window_new (null, null);\n  gtk_scrolled_window_set_policy (gtk_scrolled_window (scrolled_window), gtk_policy_automatic, gtk_policy_automatic);\n\n  web_view = webkit_web_view (webkit_web_view_new ());\n  gtk_container_add (gtk_container (scrolled_window), gtk_widget (web_view));\n\n  return scrolled_window;\n}\n\nint main (int argc, char* argv[]) {\n  gtk_init (&argc, &argv);\n\n  gtkwidget* vbox = gtk_vbox_new (false, 0);\n  gtk_box_pack_start (gtk_box (vbox), create_browser(), true, true, 0);\n\n  gtkwidget* window = gtk_window_new (gtk_window_toplevel);\n  gtk_window_set_default_size (gtk_window (window), 800, 560);\n  gtk_widget_set_name (window, \"" + $('.projectname').val() + "\");\n  /* gtk_window_set_icon_from_file(window, \"app/logo.png\", null); */\n  g_signal_connect (g_object (window), \"destroy\", g_callback (destroy_cb), null);\n  gtk_container_add (gtk_container (window), vbox);\n  \n  char uri[path_max];\n  char cwd[path_max];\n\n  getcwd(cwd, sizeof(cwd));\n\n  if (argc > 1)\n      snprintf(uri, sizeof(uri), \"%s\", argv[1]);\n  else\n      snprintf(uri, sizeof(uri), \"file://%s/" + $('.projectname').val() + "/app/index.html\", cwd);\n  \n  webkit_web_view_open (web_view, uri);\n\n  gtk_widget_grab_focus (gtk_widget (web_view));\n  gtk_widget_show_all (window);\n  gtk_main ();\n\n  return 0;\n}\n");     zip.file("readme", "this application linux relies on following dependencies...\n  sudo apt-get install subversion gtk-doc-tools autoconf automake libtool libgtk2.0-dev libpango1.0-dev libicu-dev libxslt-dev libsoup2.4-dev libsqlite3-dev gperf bison flex libjpeg62-dev libpng12-dev libxt-dev autotools-dev libgstreamer-plugins-base0.10-dev libenchant-dev libgail-dev\n\nif kodeweave @ helpful you. consider donating project?\nhttps://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=bsyga2rb5zjcc\n\n");     var content = zip.generate({type:"blob"});     saveas(content, "lin-export.zip");     return false;   }); }); 

my problem merging source code in new zip file, while still having freedom add files zip file using jszip.

i know jszip can read zip files, haven't been able work needs.

i can either add files loaded zip file using zip.file(name, code) or add files (using zip.file(name, code)) data of zip file i'm using convert web app desktop app. problem here doesn't load files input[type=file] aka filereader.

if can it'd appreciated.

here's jquery/javascript:

$(document).ready(function() {   // detect if users browser can load , download files in javascript   if (window.file && window.filereader && window.filelist && window.blob) {     // detect if users browser can download files in javascript   } else {     alert("the file apis not supported in browser.");   }    // show error if zip corrupted   if (!window.filereader || !window.arraybuffer) {     $(".error_block").removeclass("hide");     return;   }    // show contents   var $result = $(".result");   $("#file").on("change", function(evt) {     // remove content     $result.html("");     // sure show results     $(".result_block").removeclass("hide");      // see http://www.html5rocks.com/en/tutorials/file/dndfiles/      var files = evt.target.files;     (var = 0, f; f = files[i]; i++) {        var reader = new filereader();        // closure capture file information.       reader.onload = (function(thefile) {         return function(e) {           var $title = $("<h4>", {             text : thefile.name           });           $result.append($title);           var $filecontent = $("<ul>");           try {              var datebefore = new date();             // read content of file jszip             var zip = new jszip(e.target.result);             var dateafter = new date();              $title.append($("<span>", {               text:" (parsed in " + (dateafter - datebefore) + "ms)"             }));             $(".check").removeclass("hide");              // that, or ol' for(var entryname in zip.files)             $.each(zip.files, function (index, zipentry) {               $filecontent.append($("<li>", {                 text : zipentry.name               }));               // content here : zipentry.astext()             });             // end of magic !           } catch(e) {             $filecontent = $("<div>", {               "class" : "alert alert-danger",               text : "error reading " + thefile.name + " : " + e.message             });           }           $result.append($filecontent);            // download linux app           $(".export-as-lin-app").on("click", function() {             jsziputils.getbinarycontent("yourlinapp.zip", function(err, data) {               if(err) {                 throw err; // or handle err               }                var zip = new jszip(data);                // web app               zip.file("source.c", "/*\n  save file main.c , compile using command\n  (those backticks, not single quotes):\n    gcc -wall -g -o main main.c `pkg-config --cflags --libs gtk+-2.0 webkit-1.0` -export-dynamic\n  \n  execute using:\n  ./main\n  \n  if can't compile chances don't have gcc installed.\n  install gcc/c following terminal command. (this command debian based linux distros)\n    sudo apt-get install libgtk2.0-dev libgtk2.0-doc libglib2.0-doc\n  \n  webkit requires libraries aquire, configure, , compile. can libraries issuing following command in terminal:\n    sudo apt-get install subversion gtk-doc-tools autoconf automake libtool libgtk2.0-dev libpango1.0-dev libicu-dev libxslt-dev libsoup2.4-dev libsqlite3-dev gperf bison flex libjpeg62-dev libpng12-dev libxt-dev autotools-dev libgstreamer-plugins-base0.10-dev libenchant-dev libgail-dev\n  \n  ubuntu webkit information - https://help.ubuntu.com/community/webkit\n    sudo apt-get install libwebkitgtk-dev python-webkit-dev python-webkit\n  \n  required dependencies build: (if installed above not needed)\n    sudo apt-get install libgtk2.0-dev libgtk2.0-doc libglib2.0-doc subversion gtk-doc-tools autoconf automake libtool libgtk2.0-dev libpango1.0-dev libicu-dev libxslt-dev libsoup2.4-dev libsqlite3-dev gperf bison flex libjpeg62-dev libpng12-dev libxt-dev autotools-dev libgstreamer-plugins-base0.10-dev libenchant-dev libgail-dev libwebkitgtk-dev\n*/\n\n#include <limits.h>\n#include <gtk/gtk.h>\n#include <webkit/webkit.h>\n\nstatic gtkwidget* window;\nstatic webkitwebview* web_view;\n\nstatic void destroy_cb (gtkwidget* widget, gpointer data) {\n  gtk_main_quit();\n}\n\nstatic gtkwidget* create_browser() {\n  gtkwidget* scrolled_window = gtk_scrolled_window_new (null, null);\n  gtk_scrolled_window_set_policy (gtk_scrolled_window (scrolled_window), gtk_policy_automatic, gtk_policy_automatic);\n\n  web_view = webkit_web_view (webkit_web_view_new ());\n  gtk_container_add (gtk_container (scrolled_window), gtk_widget (web_view));\n\n  return scrolled_window;\n}\n\nint main (int argc, char* argv[]) {\n  gtk_init (&argc, &argv);\n\n  gtkwidget* vbox = gtk_vbox_new (false, 0);\n  gtk_box_pack_start (gtk_box (vbox), create_browser(), true, true, 0);\n\n  gtkwidget* window = gtk_window_new (gtk_window_toplevel);\n  gtk_window_set_default_size (gtk_window (window), 800, 560);\n  gtk_widget_set_name (window, \"" + $('.projectname').val() + "\");\n  /* gtk_window_set_icon_from_file(window, \"app/logo.png\", null); */\n  g_signal_connect (g_object (window), \"destroy\", g_callback (destroy_cb), null);\n  gtk_container_add (gtk_container (window), vbox);\n  \n  char uri[path_max];\n  char cwd[path_max];\n\n  getcwd(cwd, sizeof(cwd));\n\n  if (argc > 1)\n      snprintf(uri, sizeof(uri), \"%s\", argv[1]);\n  else\n      snprintf(uri, sizeof(uri), \"file://%s/" + $('.projectname').val() + "/app/index.html\", cwd);\n  \n  webkit_web_view_open (web_view, uri);\n\n  gtk_widget_grab_focus (gtk_widget (web_view));\n  gtk_widget_show_all (window);\n  gtk_main ();\n\n  return 0;\n}\n");               zip.file("readme", "this application linux relies on following dependencies...\n  sudo apt-get install subversion gtk-doc-tools autoconf automake libtool libgtk2.0-dev libpango1.0-dev libicu-dev libxslt-dev libsoup2.4-dev libsqlite3-dev gperf bison flex libjpeg62-dev libpng12-dev libxt-dev autotools-dev libgstreamer-plugins-base0.10-dev libenchant-dev libgail-dev\n\nif kodeweave @ helpful you. consider donating project?\nhttps://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=bsyga2rb5zjcc\n\n");               var content = zip.generate({type:"blob"});               saveas(content, "lin-export.zip");               return false;             });           });          }       })(f);        // read file !       // readasarraybuffer , readasbinarystring both produce valid content jszip.       reader.readasarraybuffer(f);       $(".check").removeclass("hide").addclass("hide");       // reader.readasbinarystring(f);     }   });   return false; }); 

jszip.load merges content : if load given zip file , yourlinapp.zip merge content.

// read content filereader var originalzipcontent = e.target.result; // ... $(".export-as-lin-app").on("click", function() {   jsziputils.getbinarycontent("yourlinapp.zip", function(err, data) {      // merge 2 files     var zip = new jszip();     zip.load(data);     zip.load(originalzipcontent)      var content = zip.generate({type:"blob"});     saveas(content, "lin-export.zip");   } }); 

see this commit working example.