Unzipping files

Question

I want to display OpenOffice files   odt and  odp at client side using a web browser    These files are zipped files  Using Ajax  I can get these files from server but these are zipped files  I have to unzip them using JavaScript  I have tried using inflate js  http   www onicos com staff iz amuse javascript expert inflate txt  but without success   How can I do this

User · Answer

If you need to support other formats as well or just need good performance, you can use this WebAssembly library

it's promised based, it uses WebWorkers for threading and API is actually simple ES module

User · Answer

I wrote an unzipper in Javascript   It works     It relies on Andy G P  Na s binary file reader and some RFC1951 inflate logic from notmasteryet   I added the ZipFile class     working example  http   cheeso members winisp net Unzip-Example htm  dead link   The source  http   cheeso members winisp net srcview aspx dir js-unzip  dead link   NB  the links are dead  I ll find a new host soon    Included in the source is a ZipFile htm demonstration page  and 3 distinct scripts  one for the zipfile class  one for the inflate class  and one for a binary file reader class  The demo also depends on jQuery and jQuery UI   If you just download the js-zip zip file  all of the necessary source is there       Here s what the application code looks like in Javascript      In my demo  this gets attached to a click event     it instantiates a ZipFile  and provides a callback that is    invoked when the zip is read   This can take a few seconds on a    large zip file  so it s asynchronous   var readFile   function            status   html   lt br  gt         var url      urlToLoad   val        var doneReading   function zip           extractEntries zip               var zipFile   new ZipFile url  doneReading           this function extracts the entries from an instantiated zip function extractEntries zip           report   accordion  destroy            clear         report   html           var extractCb   function id               this callback is invoked with the entry name  and entry text            in my demo  the text is just injected into an accordion panel          return  function entryName  entryText               var content   entryText replace new RegExp     n    g       lt br  gt                       id  html content                   status   append  extract cb  entry     entryName       id     id      lt br  gt                     report   accordion  destroy                    report   accordion  collapsible true  active false                              for each entry in the zip  extract it       for  var i 0  i lt zip entries length   i              var entry   zip entries i            var entryInfo     lt h4 gt  lt a gt     entry name     lt  a gt  lt  h4 gt  n lt div gt                contrive an id for the entry  make it unique         var randomId    id-   Math floor  Math random     1000000000             entryInfo      lt span class  inputDiv  gt  lt h4 gt Content  lt  h4 gt  lt span id      randomId                  gt  lt  span gt  lt  span gt  lt  div gt  n               insert the info for one entry as the last child within the report div             report   append entryInfo               extract asynchronously         entry extract extractCb randomId                The demo works in a couple of steps   The readFile fn is triggered by a click  and instantiates a ZipFile object  which reads the zip file  There s an asynchronous callback for when the read completes  usually happens in less than a second for reasonably sized zips  - in this demo the callback is held in the doneReading local variable  which simply calls extractEntries  which  just blindly unzips all the content of the provided zip file   In a real app you would probably choose some of the entries to extract  allow the user to select  or choose one or more entries programmatically  etc     The extractEntries fn iterates over all entries  and calls extract   on each one  passing a callback   Decompression of an entry takes time  maybe 1s or more for each entry in the zipfile  which means asynchrony is appropriate  The extract callback simply adds the extracted content to an jQuery accordion on the page  If the content is binary  then it gets formatted as such  not shown       It works  but I think that the utility is somewhat limited    For one thing  It s very slow  Takes  4 seconds to unzip the 140k AppNote txt file from PKWare  The same uncompress can be done in less than  5s in a  NET program  EDIT  The Javascript ZipFile unpacks considerably faster than this now  in IE9 and in Chrome  It is still slower than a compiled program  but it is plenty fast for normal browser usage   For another  it does not do streaming  It basically slurps in the entire contents of the zipfile into memory  In a  real  programming environment you could read in only the metadata of a zip file  say  64 bytes per entry  and then read and decompress the other data as desired   There s no way to do IO like that in javascript  as far as I know  therefore the only option is to read the entire zip into memory and do random access in it   This means it will place unreasonable demands on system memory for large zip files  Not so much a problem for a smaller zip file    Also  It doesn t handle the  general case  zip file - there are lots of zip options that I didn t bother to implement in the unzipper - like ZIP encryption  WinZip encryption  zip64  UTF-8 encoded filenames  and so on   EDIT - it handles UTF-8 encoded filenames now   The ZipFile class handles the basics  though  Some of these things would not be hard to implement   I have an AES encryption class in Javascript  that could be integrated to support encryption  Supporting Zip64 would probably useless for most users of Javascript  as it is intended to support  4gb zipfiles - don t need to extract those in a browser    I also did not test the case for unzipping binary content  Right now it unzips text   If you have a zipped binary file  you d need to edit the ZipFile class to handle it properly  I didn t figure out how to do that cleanly    It does binary files now  too      EDIT - I updated the JS unzip library and demo   It now does binary files  in addition to text  I ve made it more resilient and more general - you can now specify the encoding to use when reading text files   Also the demo is expanded - it shows unzipping an XLSX file in the browser  among other things    So  while I think it is of limited utility and interest  it works  I guess it would work in Node js

User · Answer

If anyone s reading images or other binary files from a zip file hosted at a remote server  you can use following snippet to download and create zip object using the jszip library     this function just get the public url of zip file  let url   await getStorageUrl path   console log  public url is   url    get the zip file to client axios get url    responseType   arraybuffer     then  res    gt      console log  zip download status    res status    load contents into jszip and create an object   jszip loadAsync new Blob  res data     type   application zip      then  zip    gt        const zipObj   zip       each zip files  function  index  zipEntry        console log  filename   zipEntry name               Now using the zipObj you can access the files and create a src url for it  var fname    myImage jpg  zipObj file fname  async  blob   then  blob    gt    var blobUrl   URL createObjectURL blob

User · Answer

I wrote a class for that too  http   blog another-d-mention ro programming read-load-files-from-zip-in-javascript  You can load basic assets such as javascript css images directly from the zip using class methods  Hope it helps

User · Answer

I found jszip quite useful  I ve used so far only for reading  but they have create edit capabilities as well   Code wise it looks something like this  var new zip   new JSZip    new zip load file   new zip files  doc xml   asText      this give you the text in the file   One thing I noticed is that it seems the file has to be in binary stream format  read using the  readAsArrayBuffer of FileReader    otherwise I was getting errors saying I might have a corrupt zip file  Edit  Note from the 2 x to 3 0 0 upgrade guide       The load   method and the constructor with data  new JSZip data   have   been replaced by loadAsync      Thanks user2677034

User · Answer

Code example is given on the author site s  You can use babelfish to translate the texts  Japanese to English    As far as I understand Japanese  this zip inflate code is meant to decode ZIP data  streams  not ZIP archive

User · Answer

I m using zip js and it seems to be quite useful  It s worth a look    Check the Unzip demo  for example

User · Answer

I wrote  Binary Tools for JavaScript   an open source project that includes the ability to unzip  unrar and untar  https   github com codedread bitjs  Used in my comic book reader  https   github com codedread kthoom  also open source    HTH

[javascript] Unzipping files

Examples related to javascript

Examples related to zip

Examples related to unzip