devs.
I'm working on an application in which I send a payload and receive ArrayBuffer (zipped content) as a response, like this:
ArrayBuffer(6329)
byteLength:6329
detached:false
maxByteLength:6329
resizable:false
[[Prototype]]:ArrayBuffer
[[Int8Array]]:Int8Array(6329)
[[Uint8Array]]:Uint8Array(6329)
[[ArrayBufferByteLength]]:6329
[[ArrayBufferData]]:716
Then, to unzip the content, I'm using the only alternative I could find for react - JSZip library
My logic is like this:
try {
const response = await API.post(
'URL',
formData,
{
maxBodyLength: Infinity,
headers: { 'Content-Type': 'multipart/form-data' },
responseType: 'arraybuffer'
}
);
const zip = new JSZip();
const extractedFiles = await zip.loadAsync(response.data);
for (const [_, unzippedFile] of Object.entries(extractedFiles.files)) {
// DO SOME LOGIC
}
} catch (error) {
console.log(error);
} finally {
setIsLoading(false);
}
In many of my attempts, I succeed in unzipping the files, but there are many others where the code stops here:
const extractedFiles = await zip.loadAsync(response.data);
And throws the following error:
Error: End of data reached (data length = 6329, asked index = 7097). Corrupted zip ?
and sometimes is
Corrupted zip: can't find end of central directory
The zip is not corrupted, I tested the same in the mobile version consuming the same API and there's no error there;
Also, the ArrayBuffer length returned on the mobile is way smaller compared to the desktop:
ArrayBuffer(635)
byteLength:635
detached:false
maxByteLength:635
resizable:false
[[Prototype]]:ArrayBuffer
[[Int8Array]]:Int8Array(635)
[[Uint8Array]]:Uint8Array(635)
[[ArrayBufferByteLength]]:635
[[ArrayBufferData]]:702
I'm out of options on how to solve that.
Would anyone know how to solve that?
Tks in advance.