serve multiple base64 images to download

Question

My django application has a model with base64 encoded images.

I would like to add the option to my ListView to download all the displayed images to the location of the user's choice.

Should I create an AJAX view, or can jQuery take care of it?

I googled around and I saw some examples of serving a single file to download. But how do I serve all the images at the same time?

user_12610347 · Answer

You can insert this script on the page with images:

function download(data, file_name) {
  const a = document.createElement("a")
  a.href = data
  const extension = data.match(/^data:(.*?)\/(.*?);/)[2]
  a.setAttribute("download", file_name + "." + extension)
  a.style.display = "none"
  a.addEventListener("click", e => e.stopPropagation()) // not relevant for modern browsers
  document.body.appendChild(a)
  setTimeout(() => { // setTimeout - not relevant for modern browsers
    a.click()
    document.body.removeChild(a) 
  }, 0)
}
function download_all() {
  [...document.getElementsByClassName("dl")]
    .forEach((img, i) => download(img.src, "img" + i))
}
document
  .getElementById("dl_all")
  .addEventListener("click", download_all)

That's not ideal: e.g Chrome will warn user about multiple downloads, and FF will show multiple save dialogs, unless user changes the settings in "Applications" section to "Save file". But I doubt it can be fixed.

^{Somehow my Chrome blocks multiple downloads when I run this snippet, but it works fine here https://jsfiddle.net/w7nqvjgd/ and in other environments I've tried.}

Update: Or (thanx to Steven for the idea) if you are not satisfied with the user experience of multiple downloads in modern browsers, you can create a zip file on the client. See https://github.com/Stuk/jszip

function download(data) {
  const a = document.createElement("a")
  a.href = "data:application/zip;base64," + data
  a.setAttribute("download", "imgs.zip")
  a.style.display = "none"
  a.addEventListener("click", e => e.stopPropagation()) // not relevant for modern browsers
  document.body.appendChild(a)
  setTimeout(() => { // setTimeout - not relevant for modern browsers
    a.click()
    document.body.removeChild(a) 
  }, 0)
}
function download_all() {
  var zip = new JSZip();
  [...document.getElementsByClassName("dl")]
    .forEach((img, i) => zip.file("img" + i, img.src.replace(/data:.*?;base64,/, ""), {base64: true}))
  zip.generateAsync({type: "base64"}).then(download)
}
document
  .getElementById("dl_all")
  .addEventListener("click", download_all)

// and an old school version
// for browsers incompatible with `download` attribute
function download_all_oldschool() {
  var zip = new JSZip();
  [...document.getElementsByClassName("dl")]
    .forEach((img, i) => zip.file("img" + i, img.src.replace(/data:.*?;base64,/, ""), {base64: true}))
  zip.generateAsync({type: "base64"}).then(data => window.location.href = "data:application/zip;base64," + data
)
}
document
  .getElementById("dl_all_oldschool")
  .addEventListener("click", download_all_oldschool)

serve multiple base64 images to download

1 Answers