gildas-lormeau
commented
1 year ago Here is a simple example of code which displays png files found in a zip file.
<!doctype html>
<html>
<head>
<title>Display png files from a zip file</title>
</head>
<body>
<form>
<input type=file accept=".zip" id=zipFileInput>
</form>
<div id=entriesElement>
</div>
<script type=module>
import { ZipReader, BlobReader, BlobWriter } from "https://unpkg.com/@zip.js/zip.js/index.js";
zipFileInput.onchange = (event) => {
displayImages().catch(error => alert(error));
};
async function displayImages() {
const zipReader = new ZipReader(new BlobReader(event.target.files[0]));
const entries = await zipReader.getEntries();
await Promise.all(entries.map(async entry => {
if (entry.filename.endsWith(".png")) {
const dataURL = URL.createObjectURL(await entry.getData(new BlobWriter("image/png")));
const imageElement = document.createElement("img");
imageElement.src = dataURL;
imageElement.onload = () =>
entriesElement.appendChild(imageElement);
}
}));
}
</script>
</body>
</html>See https://plnkr.co/edit/NzWJTp0bbx8Fta9g
I'm moving the issue in the Discussions tab to keep this question visible.
How do i read png files in a zip. At the moment i have it in the form of an entry when you unzip the zip file and i want to get it into a png file I have been searching for a while and been trying out everything but nothing works. sorry if this is in the wrong place i couldnt find anything else apart from the github issues place.