How do you unzip a string in React

Question

The response from an API is a zipped folder of three small files. I've got this response in a string. I want to display the contents of one of the files and store another in the browser's local storage for later use. I'm having trouble unzipping. How do I do this without accessing the file system?

fetch(URL,
        {
            method: 'GET',
            headers: {
                'API-KEY': API_Key,
            },
        }).then(response => response.text()).then(zippedFolderAsString => {
            // Need to unzip
        });

I don't believe you can unzip a file using the browser. The browser does not provide an API for such things. I would suggest sending your API response to your server and handling the unzipping on the server side — richbai90, Oct 18 '19 at 17:25

score 6 · Accepted Answer · answered Oct 21 '19 at 05:16

Here's how I solved it. I used JSZip which can take blobs as input as opposed to the path to a file like most other libraries.

import JSZip from 'jszip';
...
var new_zip = new JSZip();
new_zip.loadAsync(zippedFolderAsBlob).then(async function(zipped) {
    var jsonFile = await zipped.file("theJsonFile.json").async("text");
})

How do you unzip a string in React

1 Answers1