Trouble loading ZipReader from locally saved script #486

rjthorne · 2024-02-20T08:05:02Z

rjthorne
Feb 20, 2024

Hi, I'm having trouble getting a small test page to work. I strongly suspect it's purely down to my inexperience in modern JS rather than a problem with zip.js, but I'm at my wit's end with it, so any help would be massively appreciated.

This is just a small html page with zip-full.min.js stored in a 'lib' subfolder. It should read a zip and output the blob to the console, then do the same for the contents. The first part works, but the second doesn't:

<!doctype html>
<html>
	<head>
			<title>Zip reader test</title>
	</head>
	<body>
		<form>
			<input type="file" accept=".zip" id="zipFileInput">
		</form>
		<script type="text/javascript" src="lib/zip-full.min.js"></script>
		<script>
			zipFileInput.onchange = () => readFiles();
			async function readFiles() {
				let j = {};
				const zipfile = zipFileInput.files[0];
				let reader = new FileReader();		
				reader.onload = function(e) {
					console.log(zipfile);
				}
				reader.readAsArrayBuffer(zipfile);	
				const zipReader = new ZipReader(new BlobReader(zipFileInput.files[0]));
				const entries = await zipReader.getEntries();
				await Promise.all(entries.map(async entry => {		
					let blob = await entry.getData(new BlobWriter());
					let reader = new FileReader();		
					reader.onload = function(e) {
						console.log(entry);
					}
					reader.readAsArrayBuffer(blob);
				}));
			}
		</script>
	</body>
</html>

Line 21 is where the problem is, it cannot read the 'ZipReader' class and throws an error. I get the same with zip.min.js too, although I'm not sure I understand the difference.

Is there anything silly I'm missing?

Answered by gildas-lormeau

Feb 20, 2024

You have to call new zip.ZipReader(new zip.BlobReader(zipFileInput.files[0])) instead of new ZipReader(new BlobReader(zipFileInput.files[0])) (and new zip.BlobWriter() as well) because you're not using zip.js as an ECMAScript Module (i.e. ESM).

Alternatively, you can add at the top of your code:

const { ZipReader, BlobReader, BlobWriter } = zip;
...

View full answer

gildas-lormeau · 2024-02-20T11:03:00Z

gildas-lormeau
Feb 20, 2024
Maintainer

You have to call new zip.ZipReader(new zip.BlobReader(zipFileInput.files[0])) instead of new ZipReader(new BlobReader(zipFileInput.files[0])) (and new zip.BlobWriter() as well) because you're not using zip.js as an ECMAScript Module (i.e. ESM).

Alternatively, you can add at the top of your code:

const { ZipReader, BlobReader, BlobWriter } = zip;
...

0 replies

rjthorne · 2024-02-21T07:51:47Z

rjthorne
Feb 21, 2024
Author

Thanks, had a feeling it would be something basic like that!

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Trouble loading ZipReader from locally saved script #486

{{title}}

Replies: 2 comments

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

Select a reply

Trouble loading ZipReader from locally saved script #486

rjthorne Feb 20, 2024

Replies: 2 comments

gildas-lormeau Feb 20, 2024 Maintainer

rjthorne Feb 21, 2024 Author

rjthorne
Feb 20, 2024

gildas-lormeau
Feb 20, 2024
Maintainer

rjthorne
Feb 21, 2024
Author