0

I am making REST API call to get an array of pre-signed URLs from S3. These URL are files that could be XML, CSV, JSON etc.

How do I loop download files from these URLs without opening a new tab? I do not want to use AWS SDK for NodeJS to avoid tight coupling with my front-end. Application currently has Angular 7, NodeJS and ExpressJS.

getFile(url, params){
this.awsservice.getFile(url, params).subscribe(
  (response) => {
    const res = JSON.parse(JSON.stringify(response));
    var apiList = [];

    for (var key in res) {
      if(key == 'api'){
        apiList = res[key];
      }
    }

    apiList.forEach(function (url) {

  // Logic to download file
  document.location.assign(url) //Only seems to download the last file in the array
      console.log("Download started: "+url);
  });

  },
  (error) => {
    this.tempErrorFlag = true;
    const errorMsg = error;
    console.log(`ERROR ::: reInitiate API ::: ${errorMsg.message}`);
  });
}

I tried adding document.location.assign(url) but it only seems to download the last url in the array. Even adding delay didn't help.

Appreciate your help.

Swanidhi
  • 2,029
  • 1
  • 20
  • 21
  • @jarmod - To be able to download the files (of different formats) from the URL without opening a new tab/window. – Swanidhi May 22 '19 at 13:24
  • Angular has an HTTP client, and there's also fetch, axios, and others. – jarmod May 22 '19 at 13:32
  • @jarmod - Thanks! Would appreciate a more elaborate solution – Swanidhi May 22 '19 at 13:51
  • OK, but understand that SO is not a code-writing service. I say that in case you find that you don't get the response you're looking for and wonder why. A web search will yield plenty of options that you can use to download files from URLs. – jarmod May 22 '19 at 13:57
  • @jarmod - I am not asking for a code-writing service, not do I expect it. I have done my research before asking this question here. The logic that I wrote in attempts to trigger file download didn't work and hence I reflected back to this community for help. – Swanidhi May 22 '19 at 14:01
  • I'm just responding to the fact that you originally wrote "<>" (with no code). This might help: https://stackoverflow.com/questions/1066452/easiest-way-to-open-a-download-window-without-navigating-away-from-the-page – jarmod May 22 '19 at 15:09
  • Thanks @jarmod I did so to remove ambiguity. Thanks for your response. I have tried the solution you proposed but failed. The logic also downloads the last url in the array. and develop tools throws this error on a.click() - Resource interpreted as Document but transferred with MIME type text/csv: – Swanidhi May 22 '19 at 15:58

1 Answers1

0

I was able to download the files but not in the same tab. First I fetch presigned URLs from my angular service, which I feed into an array. Then basically with each of the presigned urls, I create a temporary anchor tag to and assign href the presigned url value. The snackbarService is for showing a popup when the download begins. The entire code looks like below:

  downloadItem() {
  let urls = [];
  for(let item of this.selectedRowsData) {
  //calling the service to fetch the presigned url
  this.dataService.getPresignedToDownloadAll(
    item.value,
    item.id).subscribe((res) => {
      urls.push(res);
      this.download(urls);
   });
 }
}

download(urls: any) {
  var self = this;
  var url = urls.pop();
  setTimeout(function(){
    self.snackBarService.loadComponent({
      isSuccess: true,
      message: MESSAGES.downloadInProgress,
    });
  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