How to get AsyncGzip working with modern browser demo

[juanbill]

Hi,

I've been testing out the stream demo ( https://101arrowz.github.io/fflate/ ) with 140mb+ files and it works fine.

I also played with the modern browser demo ( https://github.com/101arrowz/fflate/wiki/Guide:-Modern-(Buildless) )

How can I adapt the modern browser demo to use AsyncGzip like the stream demo ( https://101arrowz.github.io/fflate/ ) ?
Is AsyncGzip better than AsyncDeflate?

[101arrowz]

First of all, you should pick between AsyncGzip and AsyncDeflate based on your need. Gzip is a lightweight wrapper around DEFLATE with some header information and a CRC. You can usually decompress a Gzip file with standard tools, but DEFLATE is a bit harder. If you have a choice, I would go with Gzip unless you're doing regularly doing files under a kilobyte.

To adapt the code to handle a single uploaded file, you can use this change:

// Install this: https://github.com/jimmywarting/StreamSaver.js
// Or do this:
import streamSaver from 'https://cdn.skypack.dev/streamsaver';
// Promise.all for parallelism
const handleFiles = fileArray => Promise.all(fileArray.map(async file => {
  const gzip = new fflate.AsyncGzip();
  const gzipReadableStream = fflToRS(gzip);
  addDownloadButton(gzipReadableStream, `${file.name}.gz`);
  const fileReader = file.stream().getReader();
  while (true) {
    const { done, value } = await fileReader.read();
    if (done) {
      gzip.push(new Uint8Array(0), true);
      break;
    }
    gzip.push(value);
  }
}));

const addDownloadButton = (stream, filename) => {
  const downloadButton = document.createElement('button');
  downloadButton.textContent = `Download ${filename}`;
  downloadButton.addEventListener('click', event => {
    stream.pipeTo(streamSaver.createWriteStream(filename));
  });
  const downloadElement = document.createElement('li');
  downloadElement.appendChild(downloadButton);
  zipDownloadList.appendChild(downloadElement);
}

It's really quite similar to the ZIP example. You manually read from the file's ReadableStream and write each chunk to fflate.

By the way, was your input file 140MB? If it was then getting 134MB output is quite bad, you may consider not compressing at all.

[juanbill]

thankyou