How to zip an img from file input with JSZIP

I try to zip a file from a file input element, but it does not work. How can I do it by using Javascript?

var input = document.getElementById("id1");
const filereader = new FileReader();
filereader.onload = function() {
  zip.file("picture.png", filereader.result, {binary: true});
<input type="file" id="id1" style="border-radius: 0.1px; width: 40%;" accept="image/*">

27 thoughts on “How to zip an img from file input with JSZIP”

  1. As zip.file(name, data [,options]) accept blob datatype, you just need to get it’s files

        document.getElementById("id1").addEventListener("change", function (params) {
            var zip = new JSZip();
            var temp = this.files[0];
            zip.file(, temp);
            zip.generateAsync({ type: "blob" })
                .then(function (content) {
                    // see FileSaver.js
                    saveAs(content, "");

Leave a Comment