How to read zip file contents in react?

Question

I have created a simple react app with just a upload button which accepts zip files.

function App() {
  function fileCheck(event) {
    console.log(event.target.files[0], "FILE");
  }
  return (
    <div>
      <div>
        <label>Choose file</label>
        <input
          type="file"
          accept=".zip"
          onChange={(event) => {
            fileCheck(event);
          }}
        />
      </div>
    </div>
  );
}

export default App;

Once file is uploaded, I need to see the contents/files which are inside that ip file. Is there a npm package or how to do this?

score 0 · Answer 1 · answered Oct 21 '22 at 06:09

0

Try jszip or search for other packages on npmjs.com, and keep in mind you should look after packages workable on browser/client side, not on node/server side.

answered Oct 21 '22 at 06:09

bbbbbbbboat

443
3
11

I tried JSzip. It is returning this error - Uncaught (in promise) Error: Can't read the data of 'the loaded zip file'. Is it in a supported JavaScript type (String, Blob, ArrayBuffer, etc) – Oct 21 '22 at 09:33
@KaranS Try take a look at this question [extracting-zipped-files-using-jszip-in-javascript](https://stackoverflow.com/questions/39322964/extracting-zipped-files-using-jszip-in-javascript), may help you – bbbbbbbboat Oct 21 '22 at 09:40

How to read zip file contents in react?

1 Answers1