Unzip a folder with files as a content on Angularjs, client side

Question

I have a big issue or I don't find how to get a solution to this . I need to request $http.get and I get a zip file, into this zip file I have images that I need to use on my client side. I tried doing with different responseType="arraybuffer" and no solution. My logic is: get the zip file, then maybe I create the folder into my client side and reuse these images that come in that zipFile. Someone know a logic and how to implement the solution? Thanks a million.

Answer 1

I looked into using JSZip (links for API and upgrade guide) to download a zip and extract image files, and came up with the following proof of concept code (outside Angularjs):

getZIP using JSZIP

function getZip( url){  // returns a Promise for the zip
    var resolve, reject, req;

    var req = new XMLHttpRequest();
    req.open('GET', url, true);
    req.responseType = "arraybuffer";
    req.onload = function() {
        var zip = new JSZip();  // ************
        resolve( zip.loadAsync(req.response));
    };
    req.onError = req.onAbort = function(){
        reject( new Error("GET from " + url + " failed"));
    }
    req.send();
    return new Promise( function(r,j) {resolve=r; reject=j;});
}

which returns a promise that fulfills with a zip object if successful, and

A test to download a zip, extract and display an image

window.onload=function(){
    getZip("./test.zip")
    .then( processZip)
    .catch( function( err){
        console.log("something went wrong: " + err);
    });
}
function processZip( zip){
    zip.file("test.png")
    .async("base64")
    .then( function( data){
        var img = new Image();
        img.src = "data:image/png;base64," + data;
        document.body.appendChild(img);
        })
    .catch( function(err){ throw err;});
}

which requires a test.zip file containing test.png in the same folder as the test page.

---

Although the concept appears to be working, there may be limitations (RAM usage, size of image files, performance) and browser caching (without immediate expiry) may be another way of speeding up image access.