I wish to download the array of images as a zip file, and is trying with jszip. Unfortunately, the zip file that is downloaded contain 2 documents, each containing the URL string instead of the actual image. What did I do wrong?
photos is an array of static media URLs as below
[
"/trap-camera-auto-curation/static/media/tree.2da1e271.jpeg",
"/trap-camera-auto-curation/static/media/sunset.a4ff3009.jpeg"
]
<button
onClick={() => handleDownload(props.shortlisted)}
>
Download
</button>
const handleDownload = (photos) => {
const zip = require("jszip")();
photos.forEach((photo, index) => {
zip.file(index, photo);
});
zip.generateAsync({ type: "blob" }).then((content) => {
saveAs(content, "example.zip");
});
};
The url needs to be converted to binary content before adding to zip.
const handleDownload = (photos) => {
const zip = require("jszip")();
let count = 0;
photos.forEach((photo, index) => {
const fileName = photo
.replace(/[\/]/gi, "")
.replace("trap-camera-auto-curationstaticmedia", "");
JSZipUtils.getBinaryContent(photo, function (err, data) {
zip.file(fileName, data, { binary: true });
count++;
if (count === photos.length) {
zip.generateAsync({ type: "blob" }).then(function (content) {
saveAs(content, "auto-curation-photos.zip");
});
}
});
});
};