There are many great backend based solutions for downloading multiple files into one archive. There are many great software engineers who will tell you that this is the right way. But if you need a quick and lightweight solution that just work in a browser, then fetch-to-tar is for you.

How it works?

fetch-to-tar download files in small chunks using Fetch Api and Stream Api. Then it saves them to IndexedDB immediately as part of the GNU TAR format.

At the end of the download, it sticks together all chunks and returns as single Blob. All saved data in indexedDB will be deleted.

Basically this is a very simple attempt to make download like mega.nz. Without encryption and support for older browsers. This is more like an experiment. But it works.

Limitations

• Fetch Api required
• IndexedDB required (RAM is used as fallback)
• Only same-origin requests allowed

Installation

You can install fetch-to-tar using npm or yarn

npm install fetch-to-tar
yarn add fetch-to-tar

Usage

Basic usage example:

const { promise } = fetchToTar({
  entries: [
    { name: 'foo.txt', src: 'http://example.com/foo.txt' },
    { name: 'bar.txt', src: 'http://example.com/bar.txt' },
  ],
});

promise.then(({ blob }) => {
  console.log('Tadaaa:', blob);
});

How to show progress:

fetchToTar({
  entries: [
    { name: 'foo.txt', src: 'http://example.com/foo.txt' },
    { name: 'bar.txt', src: 'http://example.com/bar.txt' },
  ],

  onProgress(value, max) {
    console.log(`Progress is: ${value}/${max}`)
  }
});

How to cancel download:

const { promise, cancel } = fetchToTar({
  entries: [
    { name: 'foo.txt', src: 'http://example.com/foo.txt' },
    { name: 'bar.txt', src: 'http://example.com/bar.txt' },
  ],
});

if (SomeCondition) {
  cancel()
}

You can use enry name for creating folder structure:

fetchToTar({
  entries: [
    { name: 'one/foo.txt', src: 'http://example.com/foo.txt' },
    { name: 'two/bar.txt', src: 'http://example.com/bar.txt' },
  ],
});

License

MIT © Ruslan Tatyshev