How to add files using JSZip from remote URL in ReactJS? - reactjs

Question

I'm using the map function to loop files inside a folder of my zip files but the folder is always empty. The fetching of the main file is working though.
Here is my code:
getZip = async () => {
const zip = new JSZip();
const url = await svc.getMainFileURL(); // will return a downloadable url from s3
let response = await fetch(mcsURL); // will fetch the data from s3 blob
let data = await response.blob(); // and convert it into blob
zip.file(`MainFile.xlsx`, data); // add into the zip file
const otherFiles = zip.folder("files"); // create another folder inside the zip file
// Loop files from source data then insert it in the folder
const list = sourceData.map(async (item,index) => {
const fileUrl = await svc.getOtherFileUrl();
const response = await fetch(fileUrl);
const data = await response.blob();
console.log(data);
otherFiles.file(`${index}.xlsx`, data);
})
zip.generateAsync({type:"blob"})
.then(function(content) {
FileSaver.saveAs(content, `Zip File Name`);
});
}
The logging of data returns fine but when I download the zip file it has only the data of the main file with folder files. Here's a screenshot:
There may be a problem with me using async/await but I can't figure it out. Can anyone help me? Thanks in advance.

Answer 1

Nevermind, I already solved it using Promise.all(). The zip.generateAsync function returns the zip file even if the promises from the map function are not resolved. That's why the folder is always empty. Here is my altered code:
getZip = async () => {
const zip = new JSZip();
const url = await svc.getMainFileURL(); // will return a downloadable url from s3
let response = await fetch(mcsURL); // will fetch the data from s3 blob
let data = await response.blob(); // and convert it into blob
zip.file(`MainFile.xlsx`, data); // add into the zip file
const otherFiles = zip.folder("files"); // create another folder inside the zip file
// Loop files from source data then insert it in the folder
const list = sourceData.map(async (item,index) => {
const fileUrl = await svc.getOtherFileUrl();
const response = await fetch(fileUrl);
const data = await response.blob();
console.log(data);
otherFiles.file(`${index}.xlsx`, data);
return data;
})
// If all prmises are fullfilled it will call the zip
// function and download it using the FileSaver library
Promise.all(list).then(function() {
zip.generateAsync({type:"blob"})
.then(function(content) {
FileSaver.saveAs(content, `Zip File Name`);
});
});
}