27 August 2023

gzip-ed, streaming uploads from browsers

You will not believe how simple this is (I didn’t!). Assuming file is a file handle you’ve somehow acquired (either by letting the user pick a file or by using the File System API), here’s all you need to do:

const gzippedStream = file
  .pipeThrough(new CompressionStream("gzip"))

That’s it. You can now take this gzipped stream and use it as a Request body in a fetch call:

    body: file
      .pipeThrough(new CompressionStream("gzip"))

and the browser will gzip your file on-the-fly, and your server will receive the compressed blob.