EzDevInfo.com

jszip

Create, read and edit .zip files with Javascript

JSZip unzipping error

Trying to handle with JSZip library.

I am having an issue to unzip a file. Here's a plunker demo. As you can see I can successfully zip a content, but when I try to unzip a zipped content I get an error (can be seen in console):

Uncaught Error: Corrupted zip : can't find end of central directory 

Any ideas why this happens?

In any case, here's what I am trying to achieve: I have an textarea on my page. Upon click I want to zip textarea content and send zipped data to server. Another call must be able to receive a zipped data, unzip it and replace textarea text with unzipped one. Everything works ok, except unzipping problem.


Source: (StackOverflow)

How to save image to zipzap

I am doing a project with zipzap and want to zip a image file in zipzap. But the image doesnt show correctly after zip ,the reason is the image data was get from XMLHttpRequest and the data from image seems not encode in correct way.

My code:

function requestImgPart(url) {

  var request = new XMLHttpRequest();



  request.open("GET", url, true);
  request.setRequestHeader('Accept', 'image/*');
  request.onload = onload;
  request.onerror = onerror;
  request.send();

  function onload() {
    if (request.status === 200) {
       var zip= new JSZip();
       zip.file("1.png",request.responseText);
       zip.saveAs("presentations.zip");
    } 
  }

  function onerror() {

  }

}

The url is something like http://upload.wikimedia.org/wikipedia/commons/d/d6/MicroQR_Example.png

Does any one know what is wrong inside my code


Source: (StackOverflow)

Advertisements

Cant generate existing folder for zip (JSZip.js)

Case 1: I am trying to access the existing folder for zip operation, but it can't be generate it. I have tried the below code for zipping existing folder.

var zip = new JSZip();
zip.folder("../Download/Themes");
zip.generate();

Example: I have a folder(Themes) with files which i want to be zip in my application.

  • folder - Themes
    • file - css1
    • file - css2

Is it possible to generate zip file from existing folder?

Case 2: After generating a zip file can i get the zip file from its physical path in my application?

Thanks in advance...


Source: (StackOverflow)

Add files to an existing zip archive via JSZip

I have a zip file which is a Visual Basic project. What I'm trying to see is if I can add my web app as a directory inside this zip archive so I can easily export my web apps as native windows apps

I tried the Ajax method from the documentation and it worked fine on my hard drive when loaded in Firefox, but it's not calling when from my website!

$(document).ready(function() {
  $(".download").on("click", function() {
    JSZipUtils.getBinaryContent('YourWinApp.zip', function(err, data) {
      if(err) {
        throw err; // or handle err
      }

      var zip = new JSZip(data);
      zip.file("Hello.txt", "Hello World\n");
      var folder = zip.folder("images");
      folder.file("folder.txt", "I'm a file in a new folder");
      var content = zip.generate({type:"blob"});
      // see FileSaver.js
      saveAs(content, "example.zip");
    });

  });
});

Source: (StackOverflow)

extract password protected zip file using javascript (client side)

There are many excellent libraries to open zip files on the client as: zip.js, jszip etc ... But I could not find any library that can open an encrypted zip file. is there a solution to open a zip file on the client side (in the browser)?


Source: (StackOverflow)

Compress PDFs that reside on a server with JSZip

Seems like it's not possible at the moment. Has anyone done it? I just have a few PDF files that I would like to add to a zip folder!


Source: (StackOverflow)

Export Resized Image In Canvas To New JSZip Package

I can load an image into a canvas element and resize it, but I'm having trouble grabbing the resized image.....

var logo = $(".logo"),
    loader = $(".load"),
    canvas = $(".holder"),
    ctx = canvas[0].getContext("2d");

function displayPreview(file) {
  var reader = new FileReader();

  reader.onload = function(e) {
    var img = new Image();
    img.src = e.target.result;
    img.onload = function() {
      // x, y, width, height
      ctx.drawImage(img, 0, 0, 128, 128);

      var dataURL = canvas[0].toDataURL("image/png");

      var logo = $(".logo");
      var imgUrl = dataURL;
      var imgz = $("<img>");
      imgz.attr("src", imgUrl);
      logo.html("");
      logo.append(imgz);
    };
  };
  reader.readAsDataURL(file);
}

into the download package function for jszip.

// Download Zip
$(".download").on("click", function(imgUrl) {
  var zip = new JSZip();
  zip.file("logo.png", imgUrl);
  var content = zip.generate({type:"blob"});
  // see FileSaver.js
  saveAs(content, "test.zip");
});

Any help is greatly appreciated

var logo = $(".logo"),
    loader = $(".load"),
    canvas = $(".holder"),
    ctx = canvas[0].getContext("2d");

function displayPreview(file) {
  var reader = new FileReader();

  reader.onload = function(e) {
    var img = new Image();
    img.src = e.target.result;
    img.onload = function() {
      // x, y, width, height
      ctx.drawImage(img, 0, 0, 128, 128);

      var dataURL = canvas[0].toDataURL("image/png");

      var logo = $(".logo");
      var imgUrl = dataURL;
      var imgz = $("<img>");
      imgz.attr("src", imgUrl);
      logo.html("");
      logo.append(imgz);
    };
  };
  reader.readAsDataURL(file);
}


$(document).ready(function() {
  loader.on("change", function(evt) {
    var file = evt.target.files[0];
    displayPreview(file);

    var reader = new FileReader();

    reader.onload = function(e) {
      // Download Zip
      $(".download").on("click", function(imgUrl) {
        var zip = new JSZip();
        zip.file("logo.png", imgUrl);
        var content = zip.generate({type:"blob"});
        // see FileSaver.js
        saveAs(content, "test.zip");
      });
      return false;
    };
    reader.readAsArrayBuffer(file);
  });

  // Trigger Load Image
  $(".trigload").click(function() {
    $("input").trigger("click");
  });
});
@import url("http://necolas.github.io/normalize.css/3.0.1/normalize.css");

.hide {
  display: none;
}

.logo {
  text-align: center;
}

.fill {
  width: 100%;
}

.fr {
  float: right;
}
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="http://stuk.github.io/jszip/dist/jszip.min.js"></script>
<script type="text/javascript" src="http://stuk.github.io/jszip-utils/dist/jszip-utils.js"></script>
<script type="text/javascript" src="http://stuk.github.io/jszip/vendor/FileSaver.js"></script>

<input type="file" class="hide load">
<a class="trigload" rel='nofollow' href="javascript:void(0)">Load Image</a>
<a class="download fr" rel='nofollow' href="javascript:void(0)">Download</a>
<div class="logo"></div>
<div class="fill" align="center">
  <canvas class="holder" width="128" height="128"></canvas>
</div>


Source: (StackOverflow)

trying to leverage JSZip to open and then parse a specific file in a .zip

Have been trying to use the JSZip library to cycle through files in a .zip, looking for one (here, test.txt) that I want to parse for content.

Have attempted to do a modification of the sample [recommend viewing source on that] that JSZip provides:

<!DOCTYPE HTML>

<html>

<head>

    <link rel='nofollow' href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
    <link rel='nofollow' href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">

</head>
<body>
<div class = "container">
    <div class = "hero-unit">
        <input type="file" class="span7" id="input" name="file" multiple /> <!-- redo this in a bootstrappy way-->
        <br>
        <output id="output"></output>
    </div>
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="/js/jszip-load.js"></script>
<script src="/js/jszip.js"></script>
<script src="/js/jszip-inflate.js"></script>

<script>

    if (window.File && window.FileReader && window.FileList && window.Blob) {
        // Great success! All the File APIs are supported.
    } else {
        alert('The File APIs are not fully supported in this browser.');
    }


    function handleFileSelect(evt) {
        var files = evt.target.files; // FileList object


        // files is a FileList of File objects. List some properties.
        var output = [];
        for (var i = 0, f; f = files[i]; i++) {

            if (f.type !== "application/zip") {
                document.getElementById('output').innerHTML = "<p class='text-error'>" + f.name + " isn't a zip file.</div>";
                continue;
            }

            var reader = new FileReader();

            reader.onload = (function(theFile) {
                return function(e) {

                    var zip = new JSZip(e.target.result)


                    $.each(zip.files, function (index, zipEntry) {
                        if (zipEntry.name == "test.txt"){

                            var text = zipEntry.asText();
                            var lines = text.split(/[\r\n]+/g); // tolerate both Windows and Unix linebreaks

                            for(var i = 0; i < lines.length; i++) {
                                if (lines[i].length > 240){
                                    output.push('<li>' + lines[i] + '<br>');
                                }
                            }

                            document.getElementById('output').innerHTML = '<h2>Paths with more than 240 characters:</h2> <br><ol>' + output.join('') + '</ol>';

                        else{
                                alert("file not found!")
                            }

                        }

                    });


                }
            })(f);


        }
    }

    document.getElementById('input').addEventListener('change', handleFileSelect, false);


</script>
</body>
</html>

For some reason, I'm sure having to do with the way that I am using the closure, it is not actually parsing the .zip files in question. Any ideas what I might be doing wrong here?


Source: (StackOverflow)

Load Image Data into Angularjs

I have a bunch of image urls and I want to download the images from the browser into a zip file. I'm planning on using jszip to create the zip file. And I have all the image urls from the server. What I attempted was :

var img = zip.folder("profiles");



async.mapSeries($scope.queriedUsers, 
    function (user, iterCallback) {

        delete $http.defaults.headers.common['X-Requested-With'];
        $http.get(user.profile_image_url, {responseType: "arraybuffer"})
            .success(function (data) {
                iterCallback(null, {data: data, name: user.screen_name});
            })
            .error(function (data, status) {
                iterCallback(status, data);
            })

        },
    function (err, results) {
        _.each(results, function (result){
            img.file(result.screen_name + ".gif", result.data, {base64: true});
        });

        var content = zip.generate();
        window.location.href = "data:application/zip;base64," + content;
    });

And the error i got was:

OPTIONS <url> No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. 

What I find interesting is that in the html the images load fine:

<tbody>
    <tr ng-repeat="user in queriedUsers">
        <td><a rel='nofollow' href="https://twitter.com/{{user.screen_name}}"><img ng-src="{{user.profile_image_url}}" alt="User Twitter Image"></a></td>
        <td><a rel='nofollow' href="https://twitter.com/{{user.screen_name}}">{{user.screen_name}}</a></td>
        <td>{{user.name}}</td>
        <td>{{user.description}}</td>  
    </tr>
</tbody>

How do I load the image data into angularjs? Is there a way to get it directly for the ng-src?

Thanks


Source: (StackOverflow)

Package and Download Zip To Google Drive Test

Fiddle - http://codepen.io/mikethedj4/pen/dodegW

I wanted to see if you can dynamically package a zip file and save it to google drive using JSZip and the Google Drive API.

I'm using the "Explicit render" method to start out with.

HTML

<a rel='nofollow' href="javascript:void(0)" id="render-link">
  Render the Save to Drive button
</a>
<div id="savetodrive-div"></div>

JQuery/JavaScript

$(document).ready(function() {
  function renderSaveToDrive() {
    var zip = new JSZip();
    zip.file("Hello.txt", "Hello World\n");
    var folder = zip.folder("images");
    folder.file("folder.txt", "I'm a file in a new folder");
    var content = zip.generate({type:"blob"});
    // see FileSaver.js
    // saveAs(content, "test.zip");

    // Save it to Google Drive
    gapi.savetodrive.render('savetodrive-div', {
      src: content,
      filename: 'test.zip',
      sitename: 'My Company Name'
    });
  }
  $('#render-link').click(function() {
    renderSaveToDrive();
  });
});

Whatever I try I keep getting, "Failed Download XHR error".

Any help is greatly appreciated.


Source: (StackOverflow)

Inserting new lines to be read in a .txt file

I have the following code for creating a .txt file in javascript:

var text_block = '';

text_block += "Variable 1:"+var1+"\r\n";
text_block += "Variable 2:"+var2+"\r\n";
text_block += "Variable 3:"+var3;

var zip = new JSZip();
zip.file("variables.txt", text_block);

It's going into a zip file because it will ultimately be packaged with other files. When I run this script, it's creating the text file, but there are no new lines/carriage returns when opened in notepad. They do show when opened with wordpad, but I can't assume people are going to use that by default for a .txt file. What can I do to show line breaks in notepad?


Source: (StackOverflow)

Simple JSZip - Create Zip File From Existing Images

I'm having a hard time finding easy documentation for JSZip that doesn't involve Base64 or NodeJS. Basically, I have a directory, in which is test.html and a folder called "images". Inside that folder is a bunch of images. I would like to make a zip file out of that folder.

Can anyone help me with some very simple "hello world" type code for this? The documentation on http://stuk.github.io/jszip/ includes things like adding an image from Base64 data or adding a text file that you create in JavaScript. I want to create a .zip file from existing files.

Perhaps the only support for adding images to .zip files with JSZip involves adding them via Base64 data? I don't see that anywhere in the documentation, nor an image-url-to-base64 function, though I did find one elsewhere on StackOverflow.

Any advice?


Source: (StackOverflow)

Adding mp3s into zip using jszip

everyone. Trying to unsuccesfully add mp3s into my zip file using the wonderful JSZIP lib. Right now, it only created the zip file with the correct file name, but the mp3 is always blank.

This is the code I have so far:

//init
var zip = new JSZip();

//add an mp3 titled "any other way" and decode binary to base64
zip.file("any other way.mp3", btoa("absolutepath/to/my/file/any_other_way.mp3"), {base64: true});

//generate zip
var content = zip.generate();

//download zip
location.rel='nofollow' href="data:application/zip;base64,"+content;

Source: (StackOverflow)

JSZip Read Zip File and Execute from an Existing Zip File

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)

// 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);
  }
});

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.

I trigger this using the following function...

// 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;
  });
});

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.

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:

$(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;
});

Source: (StackOverflow)

How to Zip files using jszip library

Am working on an offline application using HTML5 and jquery for mobile. i want to back up files from the local storage using jszip. below is a code snippet of what i have done...

  if (localStorageKeys.length > 0) {
            for (var i = 0; i < localStorageKeys.length; i++) {
                var key = localStorageKeys[i];
                if (key.search(_instrumentId) != -1) {                  
                        var data = localStorage.getItem(localStorageKeys[i])
                        var zip = new JSZip();
                        zip.file(localStorageKeys[i] + ".txt", data);
                        var datafile = document.getElementById('backupData');
                        datafile.download = "DataFiles.zip";
                        datafile.href = window.URL.createObjectURL(zip.generate({ type: "blob" }));                        
                }
                else {

                }


            }

        }

in the code above am looping through the localstorage content and saving ezch file in a text format. the challenge that am facing is how to create several text files inside DataFiles.zip as currently am only able to create one text file inside the zipped folder. Am new to javascript so bare with any ambiguity in my question. thanks in advance.


Source: (StackOverflow)