Nodeschool Public Materials

    zip-loader

    1.1.0 • Public • Published

    ZipLoader

    ZipLoader is a light weight zip file loader and unzipper for Web browsers. (only 25KB (gzipped 9KB) )

    Plus, It makes easy to make loading progress bar.

    Latest NPM release MIT License dependencies Status devDependencies Status

    Demos can be seen here.

    Usage

    Both standalone version and NPM module version are available.

    Standalone

    Copy ZipLoader.js from /dist/ZipLoader.js and place it in your project.

    <script src="./js/ZipLoader.js"></script>

    NPM

    $ npm install --save zip-loader
    

    then

    import ZipLoader from 'zip-loader';

    To load and unzip

    Make a loader instance with a target zip url. Then, load() it.

    var loader = new ZipLoader( './foldername.zip' );
    loader.load();

    You can get loading progress in 'progress' event while loading.

    When it's done, the zip file is automatically unzipped and 'load' event will be triggered.

    As the result, you will get files property under the instance, that consists of filename and binary buffer.

    var loader = new ZipLoader( './foldername.zip' );
     
    loader.on( 'progress', function ( event ) {
     
      console.log( 'loading', event.loaded, event.total );
     
    } );
     
    loader.on( 'load', function ( event ) {
     
      console.log( 'loaded!' );
      console.log( loader.files );
     
      var json = loader.extractAsJSON( 'foldername/data.json' );
      console.log( json );
     
    } );
     
    loader.load();

    It returns Promise as well.

    var loader = new ZipLoader( './foldername.zip' );
     
    loader.load.then( function () {
     
      console.log( 'loaded!' );
      console.log( loader.files );
     
      var json = loader.extractAsJSON( 'foldername/data.json' );
      console.log( json );
     
    } );

    unzip Blob/File directly

    ZipLoader.unzip( blobOrFile ).then( function ( ZipLoaderInstance ) {
     
      console.log( ZipLoaderInstance.files );
     
    } );

    Pick up unzipped files

    There are 3 (+1) ways to pick up unzipped files.

    • as a text.
    • as a JSON.
    • as an URL (for <img>, <audio>, <video> etc).

    The 1st augment is key of loader.files object, that represents "path + filename" in zipped folder.

    As a text

    var string = loader.extractAsText( 'foldername/text.txt' );

    As a JSON

    var json = loader.extractAsJSON( 'foldername/data.json' );

    As an URL

    The 2nd arguments is its MIMEType.

    var url = loader.extractAsBlobUrl( 'foldername/pict.jpg', 'image/jpeg' );

    with three.js

    ZipLoader can provide altanative JSONLoader for zipped JSON.

    // At first, prepare to use THREE.js in ZipLoader
    ZipLoader.install( { THREE: THREE } );
     
    var loader = new ZipLoader( './assets.zip' );
     
    loader.on( 'load', function ( e ) {
     
      var result = loader.loadThreeJSON( 'assets/threejs-model.json' );
     
      var mesh = new THREE.Mesh(
        result.geometry,
        new THREE.MultiMaterial( result.materials )
      );
     
      scene.add( mesh );
     
    } );

    Clear cache

    After unzipped, loader instance will store the data. When you don't need the data, you can clear stored cache.

    To clear single cache

    myImg.onload = function () {
     
      loader.clear( 'foldername/pict.jpg' );
     
    }

    To clear all cache (sort of its destructor)

    loader.clear();

    Keywords

    none

    Install

    npm i zip-loader

    DownloadsWeekly Downloads

    384

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    295 kB

    Total Files

    11

    Last publish

    Collaborators

    • yomotsu