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
        });

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
        });

• javascript
• reactjs
• unzip

• 1 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 Commented Oct 18, 2019 at 17:25
• gildas-lormeau.github.io/zip.js – Agney Commented Oct 18, 2019 at 17:31
• stackoverflow./questions/2095697/unzipping-files – Mark Commented Oct 18, 2019 at 17:42

1 Answer 1

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");
})