Blaze: Multi download many images of `a link` at One Button

I have many a link to download images.
And then I crate one Button to download all

<template name="myTemp">
<a  href="/img1.jpg?download=true" target="_parent" class="download1"></a>
<a  href="/img2.jpg?download=true" target="_parent" class="download2"></a>
<a  href="/img3.jpg?download=true" target="_parent" class="download3"></a>
...
---
<el-button class="downloadAll">Download All</el-button>
</template>
---------------------------------
Template.myTemp.events({
  'click .downloadAll': function(event, instance){
    $('.download1').trigger('click')
    $('.download2').trigger('click')
    $('.download3').trigger('click')
    ...............
  }
})

But don’t work, Pl help me

jQuery doesn’t trigger the native click event on anchor elements. Use vanilla JS like
document.querySelector('.download1').click()

You will also have to change your links to use the download attribute like
<a download="img1" href="/img1.jpg" class="download1"></a>

thanks for your reply, I will try soon

@qualitymanifest, still don’t work at all
(don’t show anything in inspect)

jQuery absolutely will trigger native click elements.

The issue here is that some browsers, like Chrome, try to protect users against download / pop-up spam by detecting multiple fake clicks and ignoring them.

The most common strategy for dealing with this is to zip up the files and send them as a single download

A quick google for actually doing it as mutiple downloads reveals many different stragies (synthetic clicks, synthetic clicks with timeouts, iframes, pop-up windows, window.location) all with comments saying it doesn’t work anymore.

It seems that browsers are actively chasing the workarounds and stopping them from working shortly after they are discovered.
So I personally wouldn’t bother trying

thanks @coagmano,
I use cfs:gridfs to store image in Collection.
But now I would like download all into PC directory.

No idea how to do it with CollectionFS sorry.
I’d probably write a server route that accepts file IDs, grabs them from CFS, zips them up and sends them back to the client

thanks again :disappointed_relieved:

Are you sure? I’m not positive, but from what I am reading and a codepen I tried it on, it does not

I stand corrected.

Looking at where that function is used in event/trigger.js it looks like it doesn’t use native events anyway (except the special case of a checkbox), just gets the jQuery handlers out of private data and runs them