#anyone know how to extract files with JSZip or point me to an understandable example?

37 messages · Page 1 of 1 (latest)

velvet lichen
#

I have managed to create the basic function framework to load a file and iterate over its file objects and list their names, but I can't figure out how to extract their contents....

full bison
#

show what you've tried

mental juniper
full bison
#

FWIW all the zip libraries are garbage... I've used adm-zip for a few projects. I had tried jszip at one point but it was busted for what I needed.

#

do you really need it client-side?

velvet lichen
#

current state of my function:

// Import the storage archive
   function importStorageArchive(storageObj){
console.log("Importing storage archive...");

       let loadfile = document.getElementById('importObj').files[0];
       let freader = new FileReader();

console.log("364-import file: ", loadfile.name);

       // Clear the storage viewer and storage data
       storageObj.clearView();
       storageObj.fileIndex = [];

       alert("Importing files....\nThis may take some time.\nPress OK to start.");


       // File read handler
       freader.onload = function(ev) {

           JSZip.loadAsync(ev.target.result).then(function(zipcontainer) {

               let i = 0;
               let tflg = 0;

               for(let [filename, fileObj] of Object.entries(zipcontainer.files)) {
                   console.log(filename);
console.log(fileObj);

                   if (tflg) { // File content
                       const fileData = new arrayBuffer(await fileObj.arrayBuffer());
                       fileIndex[idx].push(fileData);
                       tflg = 0;   // Next file is header 
                   }else{  // File header
                       const fileData = new arrayBuffer(await fileObj.arrayBuffer());
                       fileIndex.push(JSON.parse(fileData));
                       tflg = 1;   // Next file is content 
                   }

               }                

           }).catch(function(err) {
               alert("Failed to open file: ", loadfile.name);
           })

       }
       freader.readAsArrayBuffer(loadfile);

   }```
velvet lichen
# full bison do you really need it client-side?

unfortunately for what I am trying to do, yes. I am working on an emulator that runs in a browser locally. This is not the best way to implement it perhaps as there are limitations to accessing the local filesystem, but for now I am having to work with it as is. Long term might be better to build an Electron app or something.

#

I am currently manipulating things in memory (programs are only kb's so not an issue) and as a workaround writing out the session state to a zip file. The problem is how to read it back in. I can open the zip file, get the name of the enclosed compressed file. The trick is how to extract the compressed content.

velvet lichen
mental juniper
#

I assume the file is not actually unzipped, but rather the file's contents are returned by the .file method instead. Which makes sense, as you don't have control over the user's file system in a client side context.
Also, check #faq on how to share code.

full bison
full bison
velvet lichen
#

thanks for the note on sharing code. I would have thought that the code [<>] tool would have automatically applied the correct markup. Have adjusted it accordingly.

velvet lichen
full bison
#

That’s just the string they used in the example

#

Await the promise and use the data.

velvet lichen
#

is this saying that in the statement:

return zip.file("content.txt").async("string");```
zip.file is the actual returned extracted uncompressed data? (In string format in this case) ?
So can I do something like:
```js
myArray = [];
myArray = zip.file("content.txt").async("arrayBuffer");```
But what's "content.txt" in the above example statement?
(OK, I think I have the filename instance within the ZIP?)
full bison
velvet lichen
#

sorry, I don't understand the purpose of the link?

full bison
#

You need to await promises

velvet lichen
#

thought that was too easy....

full bison
#

It’s still easy

velvet lichen
#

Ok, so looking at this example again:

JSZip.loadAsync(body).then(function (zip) {
    return zip.file("content.txt").async("string");
  }).then(function (text) {
    console.log(text);
  });```
So is the 'awaiting part the then statement? If so, is the variable 'text' where the return value of the string get put? (Here being output to the console)
full bison
#

My god. Is that really an example they give?

velvet lichen
full bison
velvet lichen
#

The local example is just:

JSZip.loadAsync(data).then(function () {
        // ...
    });```
Anyway thanks for the link.
full bison
#

at a keyboard now, so I can actually type...

velvet lichen
#

I find the whole promises syntax so convoluted. I kind of understand the principle, but struggle unravelling all the nested functions and what passes what objects/values to what.

full bison
full bison
#

.then() and .catch() is nasty

# 
const myArray = await zip.file("content.txt").async("arrayBuffer");
velvet lichen
#

ok, that looks simpler. The process waits until the promise it complete before assigning the result to const text before moving on?

full bison
#

correct. read through the link. it'll help you a great deal.

velvet lichen
#

thanks for the link and taking the time and trouble to explain.

hollow linden
#

Btw, if you're convinced that there's no decent library for what you want to do, but there's a command line tool, you can just write your own wrapper. There's packages like execa which help you do this fairly easily.