0

I am wondering how to download all images , based on the URL in an array. I have an array like such for example

['https://url/image1.jpg', 'https://url/image2.jpg']

I have introduced a piece of code below to create a link and simulate a click and download the item. But the problem is it always redirects to another page instead of downloading the file , and it also seems to happen only on the first image not both ?

selectedItems.forEach(function (item) {
    var link = document.createElement('a');
    link.href = item.url;
    link.download = item.description;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
 });

Does anyone have a better idea ?

Kiwimoisi
  • 4,086
  • 6
  • 33
  • 64
  • 1
    You're clicking on a link. Why would it not open the link? – Olian04 Sep 22 '20 at 07:30
  • Just add `link.target = "_blank";` that would just open the images in new tab. Having the image download depends on server configuration (how to handle image types). Otherwise you can just implement blob download – Goran.it Sep 22 '20 at 07:34
  • @Goran.it That's not accurate. You can download an image in the browser without opening a new page/tab. See the question this is a "duplicate" off, linked above. – Cully Sep 22 '20 at 07:39
  • Fetch image as and download. https://jsfiddle.net/huxt0snd/ – Umair Khan Sep 22 '20 at 07:46
  • I am trying this now but it's going to AWS service, and even though I can open up the URL and see the image, when it goes through the GetFileBlob it errors on xhttp.onerror @UmairKhan – Kiwimoisi Sep 22 '20 at 08:03
  • @Culy, I didn't say It's not possible, I said it can be configured on server .. see here : https://stackoverflow.com/questions/9054354/how-to-force-file-download-in-the-browser-nginx-server Also, I've noted at the end this can be done by using JS blob or other similar approaches coupled with link creation and clicking on it.. – Goran.it Sep 22 '20 at 08:36

0 Answers0