I am trying to download images I have displayed on my react app. The app gets images from an API and displays them on the web page and also stores the img src in an array. I'm trying to make a download button that will loop through my src array and download all images displayed and need some guidance. I have read many previous posts and realized I am not able to use cURL within my react app and the fetch API does not download the images. I'm trying to see if there is a way to do this with JavaScript or is there a simple alternative with another programming language.

const downloadAll = () => {
        const imgArr = document.querySelectorAll('img');
        for (let i = 0; i < imgArr.length; i++) {
            let a = imgArr[i].src;
        }
    };

I am trying to download images I have displayed on my react app. The app gets images from an API and displays them on the web page and also stores the img src in an array. I'm trying to make a download button that will loop through my src array and download all images displayed and need some guidance. I have read many previous posts and realized I am not able to use cURL within my react app and the fetch API does not download the images. I'm trying to see if there is a way to do this with JavaScript or is there a simple alternative with another programming language.

const downloadAll = () => {
        const imgArr = document.querySelectorAll('img');
        for (let i = 0; i < imgArr.length; i++) {
            let a = imgArr[i].src;
        }
    };

• javascript
• html
• image
• download

2 Answers 2

Using the download attribute of an anchor should do the trick...

EDIT

download only works for same-origin URLs, or the blob: and data: schemes. ref

Since this is not your case, you will have to create a blob with each image and fortunately, that is easy with the fetch API.

const downloadAll = async () => {
  // Create and append a link
  let link = document.createElement("a");
  document.documentElement.append(link);

  const imgArr = document.querySelectorAll("img");
  for (let i = 0; i < imgArr.length; i++) {
    await fetch(imgArr[i].src)
      .then(res => res.blob()) // Gets the response and returns it as a blob
      .then(blob => {

        let objectURL = URL.createObjectURL(blob);

        // Set the download name and href
        link.setAttribute("download", `image_${i}.jpg`);
        link.href = objectURL;

        // Auto click the link
        link.click();
    })
  }
};

Tested on CodePen.

Here's my answer:

1. Go to Chrome settings => chrome://settings/downloads
2. Turn off: "ask where to save before downloading" & set custom folder in there
3. Open de console and Code:

const urls = ['imgUrl1', 'imgUrl2', ....]

const fetchFile = async function(url) {
    const resp = await fetch(url)
    return resp.blob()
}

const exportFile = async function(file) {
    let a = document.createElement('a');
    a.href = await URL.createObjectURL(file);
    a.setAttribute('download', '');
    a.click();
}


let index = 0
while (index < 10000000) {
    const file = await fetchFile(urls[index])
    exportFile(file)
    index++
}

4. Turn ON: "ask where to save before downloading"

Go!