Hey everyone 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 webpage 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. Thank you for your help!
const downloadAll = () => {
const imgArr = document.querySelectorAll('img');
for (let i = 0; i < imgArr.length; i++) {
let a = imgArr[i].src;
}
};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.