CODEWITHSUNDEEP
javascriptreactjszipblobjszip
Deepak Kothari
Deepak Kothari

Reputation: 1763

How to read the zip file contents in react application using jszip preferably

I have a requirement to read the zip file contents , This is how the zip folder will look like Manifest.zip , The files in the Manifest.zip are outline.png, publish.png, manifest.json. I need to read the manifest.json(key value pairs) on the fly in a react application.

Basically requirement is when user clicks on "maifest" link a pop up needs to shown which show manifest.json contents in the UI react components.

I tried using JSZip library, and the code is as below 

 var zip = new JSZip();
    zip.loadAsync("Manifest.zip")
      .then(function (zip) {
        console.log(zip.files);
        // Expected outline.png, publish.png, manifest.json
      });

I get the error as shown below?

enter image description here

Upvotes: 1

Views: 9430

Answers (2)

Peter F
Peter F

Reputation: 570

Don't know what the error is about, have you tried another zip file?

Anyway, here is my tsx code with reactjs hooks:

  const [files, setFiles] = useState<File[]>(undefined);
  const [fileInfo, setFileInfo] = useState<IFileInfo>(undefined);

  useEffect(() => {
    if (files) {
      const f = files[0];
      const dateBefore = new Date();
      JSZip.loadAsync(f) // 1) read the Blob
      .then((zip) => {
          const contents = [];
          zip.forEach((relativePath, zipEntry) => {  // 2) print entries
            contents.push(zipEntry.name);
          });
          const loadTime = moment(new Date()).diff(moment(dateBefore));
          setFileInfo({
            loadTime,
            contents: contents.sort(),
            error: null
          });
      }, (e) => {
        const loadTime = moment(new Date()).diff(moment(dateBefore));
        setFileInfo({
          loadTime,
          contents: [],
          error: "Error reading " + f.name + ": " + e.message
        });
      });
    }
  }, [files]);

  // below some code that adds a file to files with drag and drop interface

Upvotes: 0

C.Gochev
C.Gochev

Reputation: 1922

Take a look at this library. Seems stable and easy to use.

var AdmZip = require('adm-zip');

// reading archives
var zip = new AdmZip("./my_file.zip");
var zipEntries = zip.getEntries(); // an array of ZipEntry records

zipEntries.forEach(function(zipEntry) {

    console.log(zipEntry.toString()); // outputs zip entries information

});

Upvotes: 0

Related Questions