Unzipping files in REACT and then rezipping it again

Question

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.

Answer 1

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.

Answer 2

You can use JSZIP

Example:

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