Uncaught ReferenceError: zip is not defined

[first100]

Hello, i have experienced issue whe import module zip-ext.js at the very beginning in fourth row :
var Reader = zip.Reader;
the error is:
Uncaught ReferenceError: zip is not defined in Chrome.
i import js in this order:
zip, zip-ext
Can someone help me?

[atharuddin786]

problem solved or not I have same issue

[gildas-lormeau]

@atharuddin786 This issue is obsolete (zip-ext.js does not exist anymore), How did you include zip.js in your project? Could you please share some code?

[atharuddin786]

Actually I am using cdn for importing zip.js in my project

[atharuddin786]

Your issue is solved or not

[atharuddin786]

Can you help??

[atharuddin786]

[gildas-lormeau]

I confirm the issue is obsolete and fixed for more than 2 years now.

I also confirm that importing zip.js from a CDN works, see https://jsfiddle.net/dns7pkxt/. This example is taken from the README. It imports the library from deno.land. As an alternative, you could rely on unpkg.com instead, i.e. https://unpkg.com/@zip.js/zip.js/index.js.

The code in your screenshot is almost the same as https://github.com/gildas-lormeau/zip.js/blob/gh-pages/demos/demo-read-file.js#L82-L94 which works well, see https://gildas-lormeau.github.io/zip.js/demos/demo-read-file.html. Unfortunately, your screenshot does not include the import so I won't be able to tell you what could be wrong on your end.

[atharuddin786]

Uploading VID20220903233209.mp4…

[atharuddin786]

[atharuddin786]

[atharuddin786]

Can I share code with you

[gildas-lormeau]

Indeed, if you want help, you have to show some code. These screenshots tell me absolutely nothing, I don't even know what it is. I'm not the author of this web application (https://extract.me/ ?).

[gildas-lormeau]

So, I confirm https://extract.me/ does not work. You should use the link "Contact us" at the bottom of the page to contact the developers of this web application.

[atharuddin786]

I have to make like this website https://extract.me/

For practice purpose

[gildas-lormeau]

I guess the simplest way to fix your problem is to add this tag in your page:

<script src="https://unpkg.com/@zip.js/zip.js/dist/zip.js"></script>

[gildas-lormeau]

By the way, if you happen to copy code (like the one in the zip.js demo), don't forget to credit the author of the code.

[atharuddin786]

Can I share code you on telegram or any other platform

[gildas-lormeau]

I'm sorry, I don't use telegram. You can send me a direct message on twitter if you want.

[atharuddin786]

var dots = document.getElementById("dots");
var more = document.getElementById("more");
var btn = document.getElementById("btnMore");

more.style.display = "none";

function otherformates() {
if (dots.style.display === "none") {
dots.style.display = "inline";
more.style.display = "none";
} else {
dots.style.display = "none";
btn.style.display = "none";
more.style.display = "inline";
}
}

/* js*/
(() => {
if (typeof TransformStream == "undefined") {
const script = document.createElement("script");
script.src = "lib/web-streams-polyfill.min.js";
document.body.appendChild(script);
}

const model = (() => {

return {
  getEntries(file, options) {
    const zipReader = new zip.ZipReader(new zip.BlobReader(file));
    const entries = zipReader.getEntries(options);
    console.log(entries);
  },
  async getURL(entry, options) {
    return URL.createObjectURL(
      await entry.getData(new zip.BlobWriter(), options)
    );
  },
};

})();

(() => {
const appContainer = document.querySelector(".container");
const fileInput = document.querySelector(".file-input");
const fileInputButton = document.querySelector(".btn");
let fileList = document.getElementById("file-list");

let entries;
let selectedFile;

fileInput.onchange = selectFile;

appContainer.onclick = downloadFile;
fileInputButton.onclick = () =>
  fileInput.dispatchEvent(new MouseEvent("click"));

async function downloadFile(event) {
  const target = event.target;
  let href = target.getAttribute("href");
  if (
    target.dataset.entryIndex !== undefined &&
    !target.download &&
    !href
  ) {
    target.removeAttribute("href");
    event.preventDefault();
    try {
      await download(
        entries[Number(target.dataset.entryIndex)],
        target.parentElement.parentElement,
        target
      );
      href = target.getAttribute("href");
    } catch (error) {
      alert("error", error);
    }
    target.setAttribute("href", href);
  }
}

async function selectFile() {
  try {
   
    selectedFile = fileInput.files[0];
    console.log(selectedFile);

    await loadFiles();
  } catch (error) {
    alert(error);
  } finally {
    fileInputButton.disabled = false;
    fileInput.value = "";
  }
}
async function loadFiles(zipReader, options) {
  let entries = await zipReader.getEntries(options);
  console.log(entries);
  entries = await Promise.all(
    entries.map(async (entry) => {
      if (entry.filename.toLowerCase().endsWith(".zip")) {
        const innerZipReader = new zip.ZipReader(
          new zip.BlobReader(await entry.getData(new zip.BlobWriter()))
        );
        return loadFiles(innerZipReader, options);
      } else {
        return entry;
      }
    })
  );
  refreshList();
  return entries.flat();
}

console.log(loadFiles());
function refreshList() {
  const newFileList = fileList.cloneNode();

  entries.forEach((entry, entryIndex) => {
    const li = document.createElement("li");
    const filenameContainer = document.createElement("span");
    const filename = document.createElement("a");
    filenameContainer.classList.add("filename-container");
    li.appendChild(filenameContainer);
    filename.classList.add("filename");
    filename.dataset.entryIndex = entryIndex;
    filename.textContent = filename.title = entry.filename;
    filename.title = `${
      entry.filename
    }\n  Last modification date: ${entry.lastModDate.toLocaleString()}`;
    if (!entry.directory) {
      filename.href = "";
      filename.title += `\n  Uncompressed size: ${entry.uncompressedSize.toLocaleString()} bytes`;
    }
    filenameContainer.appendChild(filename);
    newFileList.appendChild(li);
  });
  fileList.replaceWith(newFileList);
  fileList = newFileList;
}

async function download(entry, li, a) {
  if (!li.classList.contains("busy")) {
    const unzipProgress = document.createElement("progress");
    li.appendChild(unzipProgress);
    const controller = new AbortController();
    const signal = controller.signal;
    const abortButton = document.createElement("button");
    abortButton.onclick = () => controller.abort();
    abortButton.textContent = "✖";
    abortButton.title = "Abort";
    li.querySelector(".filename-container").appendChild(abortButton);
    li.classList.add("busy");
    li.onclick = (event) => event.preventDefault();
    try {
      const blobURL = await model.getURL(entry, {
        password: passwordInput.value,
        onprogress: (index, max) => {
          unzipProgress.value = index;
          unzipProgress.max = max;
        },
        signal,
      });
      a.href = blobURL;
      a.download = entry.filename;
      const clickEvent = new MouseEvent("click");
      a.dispatchEvent(clickEvent);
    } catch (error) {
      if (signal.reason != error) {
        throw error;
      }
    } finally {
      li.classList.remove("busy");
      unzipProgress.remove();
      abortButton.remove();
    }
  }
}

})();
})();

[atharuddin786]

You can check I have made diffrent Loadfile function

[gildas-lormeau]

If you don't want to add the <script> tag as I suggested in my previous answer (see #202 (comment)), then add this to the top of your code:

import * as zip from "https://unpkg.com/@zip.js/zip.js/index.js";

[atharuddin786]

I have add that script tag in html page

[atharuddin786]

same error is coming

[gildas-lormeau]

It should work. Here's an example:

<script src="https://unpkg.com/@zip.js/zip.js/dist/zip.js"></script>
<script>
  console.log(zip);
</script>

It displays the content of the zip variable as expected.

[atharuddin786]

after putting this <script>
console.log(zip);
</script>

[atharuddin786]

File reading is working perfectly

[gildas-lormeau]

Great!

[atharuddin786]

but

[atharuddin786]

plz help what I have used to loadFiles

[gildas-lormeau]

You copied my code and broke it. I'm sorry but I won't fix the bugs you introduced... The function loadFiles requires the first parameter to be defined. So, it means that you have to replace loadFiles() with loadFiles(new zip.ZipReader(new zip.BlobReader(file)).

[atharuddin786]

actually I have looking zip.js or treejs for zip file reader then your library is comming out in google search

[atharuddin786]

plz help me bro

[atharuddin786]

got frustrated with this error

[gildas-lormeau]

I already answered you! Replace loadFiles() with loadFiles(new zip.ZipReader(new zip.BlobReader(file)). In order to use zip.js, you have to know how to program in JavaScript. Please read the following pages before contacting me.

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/, in particular https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function
• https://developer.chrome.com/docs/devtools/javascript/

[atharuddin786]

loadFiles(new zip.ZipReader(new zip.BlobReader(file))
it is showing an error

[gildas-lormeau]

And this article as well: http://testthewebforward.org/docs/bugs.html. Thanks!