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.

0

There are 0 best solutions below