3

I am trying to use window.location.href in a loop to download multiple files

I have a table in which i can select file's, then i run a loop of selected and try navigate to the file path to download the files.

I keep only getting the last file to download.

I think it's due to the location herf only taking action after my javascript finishes and not as the code runs.

When i have a break point on the window.location.herf it still only downloads the last file and only when i let the code run through.

Is there a better way to initiate multiple downloads from a javascript loop.

$("#btnDownload").click(function () {
  var table = $('#DocuTable').DataTable();
  var rows_selected = table.rows('.selected').data();
  $.each(rows_selected, function (i, v) {
    window.location.href = v.FilePath;
  });
});
Pomster
  • 14,567
  • 55
  • 128
  • 204
  • HTML doesn't support multiple files to download at once. You can create a GZIP of files in order to get one file to download or you can create one `iframe` per file in your page in order to download all of them – cmizzi Sep 12 '16 at 13:57
  • 1
    You don't need to create multiple `iframe` elements, when you can use `window.open(url);` – R. Chappell Sep 12 '16 at 14:00
  • Hum... You're true ! :) – cmizzi Sep 12 '16 at 14:00
  • @R.Chappell Opening multiple windows like that, even self-closing ones, may trigger popup blockers. Iframes are the way to go here. – Joe Enos Sep 12 '16 at 14:01
  • @cmizzi When you say creating a GZIP file, I'd avoid that, and use traditional Zip instead, so all users can easily unzip it. – Joe Enos Sep 12 '16 at 14:03
  • @Joe Enos This is better than the files being linked to, from opening in hidden iframes if the header types are not right. We can't assume to know that these files are all being managed correctly. An example would be linking to images. – R. Chappell Sep 12 '16 at 14:07
  • @JoeEnos If anyone can extract ZIP files (on Windows perhaps), you can also easily uncompress GZIP IMHA. I always prefer GZIP for transfer protocol, but feel free to use ZIP :) – cmizzi Sep 12 '16 at 14:07
  • @R.Chappell Good point, if you're opening the actual content URL. In something like this, I would expect to build the links as something like `downloadFile.aspx?file=somefile.txt` where the server is responsible for properly building those response headers - but if it's not like that, then iframes wouldn't work. – Joe Enos Sep 12 '16 at 14:12
  • @cmizzi Windows (at least 7, I don't have 10 in front of me) doesn't have a built-in GZip extractor integrated into Windows Explorer. I use 7-zip personally, but I don't expect everyone to have something like that. – Joe Enos Sep 12 '16 at 14:14

3 Answers3

3

In some browsers (at least Google Chrome) support the follow:

$("<a download/>").attr("href", "https://code.jquery.com/jquery-3.1.0.min.js").get(0).click();
$("<a download/>").attr("href", "https://code.jquery.com/jquery-3.1.0.min.js").get(0).click();
$("<a download/>").attr("href", "https://code.jquery.com/jquery-3.1.0.min.js").get(0).click();

JSFiddle: https://jsfiddle.net/padk08zc/

Zay Lau
  • 1,856
  • 1
  • 10
  • 17
  • By the compatibility I means downloading multi-file at the same time, I am not sure if other browsers allowed this feature because the security risk. Anyway, thanks for the site! – Zay Lau Sep 12 '16 at 14:01
3

I would make use of iframes and a script to force the download of the files as Joe Enos and cmizzi have suggested.

The answer here will help with JavaScript for opening multiple iframes for each file: Download multiple files with a single action

The answers for popular languages will help with forcing downloads if the URL is actually something that can be served correctly over the web:

Ensure you change the links to point to your download script and also make sure you add the appropriate security checks. You wouldn't want to allow anyone to abuse your script.

Community
  • 1
  • 1
R. Chappell
  • 1,184
  • 6
  • 17
0

Though this looks like an old post and I stumbled on this while trying to solve a similar issue. So, just giving a solution which might help. I was able to download the files but not in the same tab. You can just replace the event handler with download which is provided below. The urls is an array of presigned S3 URLs.

The entire code looks like below:

download(urls: any) {
  var self = this;
  var url = urls.pop();
  setTimeout(function(){
    var a = document.createElement('a');
    a.setAttribute('href', url);
    document.body.appendChild(a);
    a.setAttribute('download', '');
    a.setAttribute('target', '_blank');
    a.click();
   // a.remove();
 }, 1000)
}
Manit
  • 1,087
  • 11
  • 17