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


#1

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


#2

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>


#3

thanks for your reply, I will try soon


#4

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


#5

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


#6

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


#7

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


#8

thanks again :disappointed_relieved:


#9

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


#10

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