Load image with Filereader API and zip it using JSZip

Question

I'm trying to load an image using fileready api, save it in a newly made zip file made using jszip, with the name logo.png. My problem is getting the image to save in the zip from filereader.

$(document).ready(function() {

  $(".load").on("change", function(evt) {
    var file = evt.target.files;
    var reader = new FileReader();

    reader.onload = (function(event) {
      return function(e) {
        var imgBinary = e.target.result;
        var imgz = new Image();
        imgz.attr("src", event.target.result);
        imgz.attr("width", 128);
        imgz.attr("height", 128);
        holder.html("");
        holder.append(imgz);
      };
    });
    reader.readAsDataURL(file);
    // reader.readAsArrayBuffer(file);

    // Download Zip
    $(".download").on("click", function() {
      var zip = new JSZip();
      zip.load(webAppZipBinary);
      zip.file("Hello.txt", "Hello World\n");
      var content = zip.generate({type:"blob"});
      // see FileSaver.js
      saveAs(content, theFile.name.substr(theFile.name.length - theFile.name.length, theFile.name.length - 4) + "-win.zip");
    });

    return false;
  });


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

.holder {
  text-align: center;
}

.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">
<a class="trigload" href="javascript:void(0)">Load Image</a>
<a class="download fr" href="javascript:void(0)">Download</a>
<div class="holder"></div>

Answer 1

Weave - https://mikethedj4.github.io/kodeWeave/editor/#4c11c6ef34c5430c0a53be9fd2432092

It's been a year since I've posted this and I just wanted to share another way to do this.

I don't like the idea of using 2 Filereaders so instead I save each image by grabbing it's source and adding it to the zip file.

Here's how it's done!

zip.file("logo.png", $(".imgorigholder > img").attr("src").split('base64,')[1],{base64: true});

Tested using JSZip v2.4.0 (Which is currently outdated).

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

  reader.onload = function(e) {
    var imgorigholder = $(".imgorigholder");
    var imgOrigUrl = e.target.result;
    var imgOrig = $("<img>");
    imgOrig.attr("src", imgOrigUrl);
    imgorigholder.empty();
    imgorigholder.append(imgOrig);
  };
  reader.readAsDataURL(file);
  exportIt.style.display = "block";
}

// Show zip loader when image has been loaded
loader.onchange = function(evt) {
  var file = evt.target.files[0];
  displayPreview(file);
};

exportIt.onclick = function() {
  var zip = new JSZip();

  // Main Icon
  zip.file("logo.png", $(".imgorigholder > img").attr("src").split('base64,')[1],{base64: true});

  // Files for exported app
  zip.file("hello.txt", "Hello sexy mommas");

  // Export Chrome Application
  var content = zip.generate({type:"blob"});
  saveAs(content, "test.zip");
};

button {
  display: none;
  float: right;
}

.imgorigholder {
  text-align: center;
}

<input type="file" id="loader" accept="image/*" />
<button id="exportIt">Save as zip file</button>

<div class="imgorigholder hide"></div>

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://stuk.github.io/jszip/dist/jszip.min.js"></script>
<script src="http://stuk.github.io/jszip-utils/dist/jszip-utils.js"></script>
<script src="http://stuk.github.io/jszip/vendor/FileSaver.js"></script>

Answer 2

What I changed:

• I don't think we can use an ArrayBuffer to preview an image, I now have two Readers: one for the preview, one for JSZip (which performs way better on ArrayBuffer than on strings)
• I moved the "download code" after the Reader: we need to read the Blob, add the content to the zip and then prepare the download link. You have other ways to do it, that's just an example.
• I added the logo.png in the zip.
• I fixed minor errors (missing css class, Image#attr doesn't exist, etc)

function displayPreview(file) {

  var reader = new FileReader();

  reader.onload = function(e) {
    var holder = $(".holder");
    var imgUrl = e.target.result;
    var imgz = $("<img>");
    imgz.attr("src", imgUrl);
    imgz.attr("width", 128);
    imgz.attr("height", 128);
    holder.html("");
    holder.append(imgz);
  };
  reader.readAsDataURL(file);
}

$(document).ready(function() {
  $(".load").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() {
        var zip = new JSZip();
        zip.file("logo.png", e.target.result);
        var content = zip.generate({type:"blob"});
        // see FileSaver.js
        saveAs(content, "test-win.zip");
      });
    };
    reader.readAsArrayBuffer(file);

    return false;
  });


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

.holder {
  text-align: center;
}

.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" href="javascript:void(0)">Load Image</a>
<a class="download fr" href="javascript:void(0)">Download</a>
<div class="holder"></div>