2

I have a very basic html block, which has a button to download:

<div id="getImageWrapper">
    <div class="image">
        <p class="image-name">{{imageName}}</p>
        <button class="download-btn" @click="getImage">Download image/s</button>
    </div>
</div>

The getImage() function of the download button fetches an array of image list from the server.

getImage() {
    const getImagesUrl = this.$store.state.website + '/api/get-requested-user-Images/';
    this.$http.get(getImagesUrl)
        .then(function (response) {
            console.log(response.data);
        })
        .catch(function (response) {
            console.log(response);
        });
}

Response data from the server looks something like this:

[
  {
    "image": "/media/1492960503_66.jpeg"
  },
  {
    "image": "/media/1492963100_0.jpeg"
  }
]

My problem is what to do next so that this array of images is downloaded into the user's device (not as a single zipped file, but as separate single image files) which would work in most browsers? If it helps, I am using Django as the backend and Vuejs for the front-end.

Benjamin Smith Max
  • 2,668
  • 8
  • 33
  • 56
  • Possible duplicate of [Download multiple images at once with Javascript](http://stackoverflow.com/questions/19830088/download-multiple-images-at-once-with-javascript) – Reinstate Monica Cellio May 04 '17 at 06:26

1 Answers1

1

You can't zip all images in JavaScript. For zipping files, you should do it in your backend (see post for zipping on fly) and then you can make it downloadable from the browser.

Muthu Kumaran
  • 17,682
  • 5
  • 47
  • 70