JSZip Read Zip File and Execute from an Existing Zip File
Posted: Mon Jun 01, 2015 1:01 am
I've been using JSZip to read and write zip files in Javascript.
What I'm trying to do is load a web app (index.html, style.css, image files, and whatever else the user requires for their web app) compressed in a zip file from a input[type=file] element (I'm using FileReader to read the contents of the zip file and display the files/folders on the page)
I trigger this using the following function...
I know JSZip can read zip files, but haven't been able to get it to work for my needs.
I can either add files to the loaded zip file using zip.file(name, code) or add files (using zip.file(name, code)) to the data of the zip file I'm using to convert the web app to a desktop app. The problem here is it doesn't load the files from the input[type=file] aka FileReader.
If anyone can help it'd be greatly appreciated.
Here's my JQuery/Javascript:
What I'm trying to do is load a web app (index.html, style.css, image files, and whatever else the user requires for their web app) compressed in a zip file from a input[type=file] element (I'm using FileReader to read the contents of the zip file and display the files/folders on the page)
Code: Select all
Then when I click on say the Linux icon I want to export my web app as a native Linux app. I do this by using JSZipUtils/JSZip. I'm loading a zip file named YourLinApp.zip which has all the files necessary for the user to run their web app as a native Linux app. All that's missing in this zip file is their source code.// Show contents
var $result = $(".result");
$("#file").on("change", function(evt) {
// remove content
$result.html("");
// be sure to show the results
$(".result_block").removeClass("hide");
// see http://www.html5rocks.com/en/tutorials/file/dndfiles/
var files = evt.target.files;
for (var i = 0, f; f = files[i]; i++) {
var reader = new FileReader();
// Closure to capture the 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 the content of the file with 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 a good ol' for(var entryName in zip.files)
$.each(zip.files, function (index, zipEntry) {
$fileContent.append($("<li>", {
text : zipEntry.name
}));
// the content is here : zipEntry.asText()
});
// end of the magic !
} catch(e) {
$fileContent = $("<div>", {
"class" : "alert alert-danger",
text : "Error reading " + theFile.name + " : " + e.message
});
}
$result.append($fileContent);
}
})(f);
// read the file !
// readAsArrayBuffer and readAsBinaryString both produce valid content for JSZip.
reader.readAsArrayBuffer(f);
$(".check").removeClass("hide").addClass("hide");
// reader.readAsBinaryString(f);
}
});I trigger this using the following function...
Code: Select all
My problem is merging their source code in with the new zip file, while still having the freedom to add files into the zip file using JSZip.// Download as 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);
// Your Web App
zip.file("source.c", "/*\n Save this file as main.c and compile it using this command\n (those are 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 Then execute it using:\n ./main\n \n If you can't compile chances are you don't have gcc installed.\n Install gcc/c with the following terminal command. (This command is for Debian based Linux distros)\n sudo apt-get install libgtk2.0-dev libgtk2.0-doc libglib2.0-doc\n \n WebKit requires libraries to successfully aquire, configure, and compile. You can get libraries by issuing the following command in your 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 for this build: (If you installed all the above this is 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 for Linux relies on the 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 was at all helpful for you. Would you consider donating to the 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;
});
});I know JSZip can read zip files, but haven't been able to get it to work for my needs.
I can either add files to the loaded zip file using zip.file(name, code) or add files (using zip.file(name, code)) to the data of the zip file I'm using to convert the web app to a desktop app. The problem here is it doesn't load the files from the input[type=file] aka FileReader.
If anyone can help it'd be greatly appreciated.
Here's my JQuery/Javascript:
Code: Select all
$(document).ready(function() {
// Detect if users browser can load and 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 are not fully supported in this browser.");
}
// Show error if zip is 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("");
// be sure to show the results
$(".result_block").removeClass("hide");
// see http://www.html5rocks.com/en/tutorials/file/dndfiles/
var files = evt.target.files;
for (var i = 0, f; f = files[i]; i++) {
var reader = new FileReader();
// Closure to capture the 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 the content of the file with 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 a good ol' for(var entryName in zip.files)
$.each(zip.files, function (index, zipEntry) {
$fileContent.append($("<li>", {
text : zipEntry.name
}));
// the content is here : zipEntry.asText()
});
// end of the magic !
} catch(e) {
$fileContent = $("<div>", {
"class" : "alert alert-danger",
text : "Error reading " + theFile.name + " : " + e.message
});
}
$result.append($fileContent);
// Download as 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);
// Your Web App
zip.file("source.c", "/*\n Save this file as main.c and compile it using this command\n (those are 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 Then execute it using:\n ./main\n \n If you can't compile chances are you don't have gcc installed.\n Install gcc/c with the following terminal command. (This command is for Debian based Linux distros)\n sudo apt-get install libgtk2.0-dev libgtk2.0-doc libglib2.0-doc\n \n WebKit requires libraries to successfully aquire, configure, and compile. You can get libraries by issuing the following command in your 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 for this build: (If you installed all the above this is 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 for Linux relies on the 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 was at all helpful for you. Would you consider donating to the 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 the file !
// readAsArrayBuffer and readAsBinaryString both produce valid content for JSZip.
reader.readAsArrayBuffer(f);
$(".check").removeClass("hide").addClass("hide");
// reader.readAsBinaryString(f);
}
});
return false;
});