multi-download

Download multiple files at once in the browser

It works by abusing the a-tag download attribute.

Demo

Install

npm install multi-download

Note: This package targets the latest versions of Chrome, Firefox, and Safari.

Usage

<button id="download-button" data-files="unicorn.jpg rainbow.jpg">Download</button>

import multiDownload from 'multi-download';

document.querySelector('#download-button').addEventListener('click', event => {
	const files = event.target.dataset.files.split(' ');
	multiDownload(files);
});

import multiDownload from 'multi-download';

// With jQuery
$('#download-button').on('click', () => {
	const files = $(this).data('files').split(' ');
	multiDownload(files);
});

import multiDownload from 'multi-download';

// With Blob
const unicorn = URL.createObjectURL(new Blob(['🦄'], {type: 'text/plain'}));
const goat = URL.createObjectURL(new Blob(['🐐'], {type: 'text/plain'}));
multiDownload([unicorn, goat]);

API

multiDownload(urls, options?)

Returns a Promise that resolves when all the downloads have started.

Note that there's a delay of 1 second between each download.

urls

Type: string[]

The URLs to files you want to download. Can be absolute or relative, even cross-origin.

options

Type: object

rename

Type: Function

A function that accepts an object containing url, index, and urls properties and is expected to return the new filename.

Note

Only works for same-origin URLs or blob/data URLs due to browser security restrictions. Cross-origin URLs will download with their original names.

<button id="download-button" data-files="unicorn.jpg rainbow.jpg">Download</button>

import multiDownload from 'multi-download';

document.querySelector('#download-button').addEventListener('click', event => {
	const files = event.target.dataset.files.split(' ');
	multiDownload(files, {
		rename: ({url, index, urls}) => 'New name.pdf'
	});
});

Caveats

If the user has enabled "Ask where to save each file before downloading" in Chrome, it will only download the first file.