How to unzip a file?

[Androz2091]

Hello 👋

I guess I'm doing something wrong but I copied the code you sent me here and it doesn't work.

Here is my code:

uz.onfile = (f) => {
    console.log(f); // this prints the file object successfully
    if (f.name == '') {
        const decoder = new DecodeUTF8();
        f.ondata = (err, data, final) => decoder.push(data, final);
        decoder.ondata = (str, final) => {
            // this throws the following error:

/*
browser.js:1532 Uncaught (in promise) TypeError: Cannot read property 'length' of undefined
    at DecodeUTF8.push (browser.js:1532)
    at Object.f.ondata (Loader.svelte:20)
    at AsyncUnzipInflate.d.ondata (browser.js:2263)
    at Inflate.ondata (browser.js:2162)
    at Inflate.c (browser.js:1004)
    at Inflate.push (browser.js:1014)
    at AsyncUnzipInflate.push (browser.js:2175)
    at Unzip.push (browser.js:2211)
    at Unzip.push (browser.js:2311)
    at Unzip.push (browser.js:2216)
*/

        }
        f.start();
    }
}

const reader = file.stream().getReader();
while (true) {
    const { done, value } = await reader.read();
    if (done) {
        uz.push(new Uint8Array(0), true);
        break;
    }
    uz.push(value); // this throws an the following error:

/*
Loader.svelte:35 Uncaught (in promise) RangeError: Maximum call stack size exceeded
    at strFromU8 (browser.js:1618)
    at _loop_2 (browser.js:2242)
    at Unzip.push (browser.js:2298)
    at Unzip.push (browser.js:2311)
    at Unzip.push (browser.js:2216)
    at Unzip.push (browser.js:2311)
    at Unzip.push (browser.js:2216)
    at Unzip.push (browser.js:2311)
    at Unzip.push (browser.js:2311)
    at Unzip.push (browser.js:2216) 
*/
}

file is an object from a file input.

Thank you

[101arrowz]

Sorry, this was a bug. I've published v0.6.5 which fixes the first bug, but I haven't experienced the second one. Can you try the following code? If it throws no error, try your previous code and if it still fails, send me your ZIP file. If this code throws an error, tell me what browser, version, OS, etc. you are running.

const uz = new Unzip();
uz.register(AsyncUnzipInflate)
const file = (await fetch('https://raw.githubusercontent.com/mrdoob/three.js/dev/examples/models/3mf/truck.3mf')).body;
uz.onfile = (f) => {
    console.log(f); // this prints the file object successfully
    if (f.name != '3D/3dmodel.model' && !f.name.includes('.png')) {
        const decoder = new DecodeUTF8();
        f.ondata = (err, data, final) => decoder.push(data, final)
        decoder.ondata = (str, final) => {
            console.log(f.name, str);
        }
        f.start();
    }
}

const reader = file.getReader();
while (true) {
    const { done, value } = await reader.read();
    if (done) {
        uz.push(new Uint8Array(0), true);
        break;
    }
    uz.push(value);
}

Side note, I noticed you're running the unminified build. Assuming you're using a CDN, make sure to use the CDN instructions in the README when running for production because those offer much less bundle size.

If you want to get the app working ASAP, you can try using the JSZip instructions I gave you, though performance should be an order of magnitude faster with fflate.

[Androz2091]

Hmm... I have another problem (I mean, maybe it's just me but I don't see why so I think it is related to the library). This is pretty weird

const readFile = (fileToRead) => {
    const fileContent = [];
    const decoder = new DecodeUTF8();
    fileToRead.ondata = (err, data, final) => {
        decoder.push(data, final);
    };
    decoder.ondata = (str, final) => {
        fileContent.push(str);
        if (final) console.log(fileContent.join(''));
    };
    fileToRead.start()
}

const uz = new Unzip();
uz.register(AsyncUnzipInflate);

const files = [];
uz.onfile = (f) => {
    files.push(f);
    if (f.name === 'account/user.json') readFile(f); // prints the file successfully in the console
}

const reader = file.stream().getReader();
while (true) {
    const { done, value } = await reader.read();
    if (done) {
        uz.push(new Uint8Array(0), true);
        break;
    }
    for (let i = 0; i < value.length; i += 65536) {
        uz.push(value.subarray(i, i + 65536));
    }
}

const userFile = files.find((file) => file.name === 'account/user.json');
readFile(userFile); // throws the following error:
/*
browser.js:2281 Uncaught (in promise) TypeError: Cannot read property '0' of null
at Object.start (browser.js:2281)
at readFile (Loader.svelte:23)
at handleFile (Loader.svelte:47)
*/

it would mean that I can only read file in the onfile method? Weird, right?

[101arrowz]

Funny enough, this was a reversion caused by publishing v0.6.5. It is intended to be able to use .start() outside of onfile. I've fixed the reversion in v0.6.6, everything should work now (fingers crossed).

[Androz2091]

All right, it works now 👍
I'm facing another issue, for one specific file final is never true (there is no more data passed to the file.ondata but final is still false). Do you have any idea why? (err is null when receiving the last chunk - actually the only chunk because there is only one chunk with this file)

Tell me if you want me to open issues instead of reporting here

[101arrowz]

Just keep it here, prevents clogging the issues page with these one line changes. Fixed this bug in v0.6.7. Sorry for all the problems! You're the first person to use streaming unzip on a very large file, so I'm trying to figure things out.

[Androz2091]

All right. and thank you it works now 👍