title: How to download multiple image files in .zip folder using JSZip in Vue.js
body: <p>I am using Vue.js in a current project of mine and in that I need a feature, which will help any user to download pics that are available in the gallery. </p>
  
  <p>There is an option that the user can select multiple images by clicking on the checkbox besides every image and to download the user needs to click a button to download all the pics that the user may have selected. The download will compress all the selected images to a zip folder and then the downloading stars and the user gets a final zip folder of all of the images that were selected. </p>
  
  <p>To deliver this feature I have tried many Vue.js libraries but only JSZip was able to work for some extend. JSZip packed the images to a <code>.zip</code> and then downloads the zip folder but the images that are being packed, the <code>type:"image/?"</code> is also present but when one will open the file to see the image , then it gives an error of:</p>
  
  <pre><code>not an image of the defined type
  </code></pre>
  
  <p>in the image viewer. Here is the sample of the code that I have used:</p>
  
  <pre><code>export default {
    methods: {
      download_btn() {
        var zip = new JSZip()
        var img = zip.folder("images")
        for (i = 0; i &lt; this.image.length; i++) {
          img.file("img.png", this.image[i].imageurl)
        }
        zip.generateAsync({
          type: "blob"
        }).then(function(content) {
          saveAs(content, "img_archive.zip")
        })
      }
    }
  }
  </code></pre>
  
  <p>This code only saves one picture in the zip folder and also you can't open the image file.</p>