Skip to content

How do i read png files in a zip #417

Answered by gildas-lormeau
Yoreni asked this question in Q&A
Discussion options

You must be logged in to vote

Here is a simple example of code which displays all the 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=imagesElement>
  </div>
  <script type=module>

import { ZipReader, BlobReader, BlobWriter } from "https://unpkg.com/@zip.js/zip.js/index.js";

zipFileInput.onchange = () => displayImages().catch(error => alert(error));

async function displayImages() {
  const zipReader = new ZipReader(new BlobReader(zipFileInput.files[0]));
  const entries = await zipReader.getEntries();
  await Promise.all(entries.map(async entry => {
    if (entry

Replies: 2 comments

Comment options

You must be logged in to vote
0 replies
Answer selected by Yoreni
Comment options

You must be logged in to vote
0 replies
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Category
Q&A
Labels
None yet
2 participants
Converted from issue

This discussion was converted from issue #416 on May 18, 2023 10:24.