Unzipping files in REACT and then rezipping it again

user_6421715 0
Viewed 2990

I have an application which is a REACT frontend and a python flask backend. The logic is as follows.

  • End user uploads a zip file
  • Sample zip file structure
source.zip
 dontextract             
 extractfile1            
 extractfile2

I want to extract extractfile1 and extractfile2 from the zip file and then create a new zip with these two extracted files. Once that is done, I need to send this new zip file to a backend service.

I am finding various solutions on the internet through node packages such as https://www.npmjs.com/package/unzip and https://www.npmjs.com/package/unzipper but these are also suggesting unzipping files in the backend, is there a way to perform this task in the front-end on the REACT side.

reactjs javascript
2 Answers

You can use JSZIP

Example:

const zip = new JSZip();
zip.loadAsync(<YOUR .ZIP FILE>).then(<YOUR FILES IN AN ARRAY>)
user_6031420

My answer is no. You should handle everything related to file (read/write) in server side, not from browser. Like your above two packages, it's used for NodeJS. Not only the problem with browser API to read/write files, it's also the security risk when you let the hacker use Javascript to modify file and send to the server.

user_82703950
Related