Add rename option (#18)

sindresorhus · Jun 11, 2019 · f319c50 · f319c50
1 parent af749d9
commit f319c50
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 16 deletions.
diff --git a/browser.js b/browser.js
@@ -41,15 +41,21 @@ function sameDomain(url) {
 	return location.hostname === a.hostname && location.protocol === a.protocol;
 }
 
-function download(url) {
+function download(url, name) {
 	var a = document.createElement('a');
-	a.download = '';
+	a.download = name;
 	a.href = url;
 	// firefox doesn't support `a.click()`...
 	a.dispatchEvent(new MouseEvent('click'));
 }
 
-module.exports = function (urls) {
+module.exports = function (urlsOrOpts) {
+	if (urlsOrOpts.constructor === Array) {
+		urlsOrOpts = { urls: urlsOrOpts };
+	}
+
+  const { urls, renameFn } = urlsOrOpts;
+
 	if (!urls) {
 		throw new Error('`urls` required');
 	}
@@ -60,13 +66,15 @@ module.exports = function (urls) {
 
 	var delay = 0;
 
-	urls.forEach(function (url) {
+	urls.forEach(function (url, index) {
+		var name = typeof renameFn === 'function' ? renameFn({ url, index, urls }) : '';
+
 		// the download init has to be sequential for firefox if the urls are not on the same domain
 		if (isFirefox() && !sameDomain(url)) {
-			return setTimeout(download.bind(null, url), 100 * ++delay);
+			return setTimeout(download.bind(null, url, name), 100 * ++delay);
 		}
 
-		download(url);
+		download(url, name);
 	});
 }
 

diff --git a/index.html b/index.html
@@ -7,25 +7,38 @@
 		<title>multi-download</title>
 		<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
 		<style>
-			#download-btn {
-				width: 300px;
+			#download-btn, #download-rename-btn {
 				height: 50px;
 				position: absolute;
 				left: 50%;
-				top: 50%;
-				margin: -25px 0 0 -150px;
+				transform: translate(-50%, -50%);
 				outline: none;
 			}
+			#download-btn {
+				top: calc(50% - 30px);
+			}
+			#download-rename-btn {
+				top: calc(50% + 30px);
+			}
 		</style>
 	</head>
 	<body >
 		<button id="download-btn" class="btn btn-primary btn-lg" data-files="fixture/unicorn.jpg.zip fixture/rainbow.jpg.zip fixture/unicorn2.jpg.zip">Download multiple files</button>
+		<button id="download-rename-btn" class="btn btn-primary btn-lg" data-files="fixture/unicorn.jpg.zip fixture/rainbow.jpg.zip fixture/unicorn2.jpg.zip">Download multiple files and rename them</button>
 		<script src="browser.js"></script>
 		<script>
 			document.querySelector('#download-btn').addEventListener('click', function (e) {
 				var files = e.target.dataset.files.split(' ');
 				multiDownload(files);
 			});
+
+			document.querySelector('#download-rename-btn').addEventListener('click', function (e) {
+				var files = e.target.dataset.files.split(' ');
+				multiDownload({ urls: files, renameFn: function ({url, index, urls}) {
+					var extension = url.substring(url.lastIndexOf('.') + 1);
+					return 'file' + index + '.' + extension;
+				}});
+			});
 		</script>
 	</body>
 </html>
diff --git a/index.js b/index.js
@@ -40,15 +40,21 @@ function sameDomain(url) {
 	return location.hostname === a.hostname && location.protocol === a.protocol;
 }
 
-function download(url) {
+function download(url, name) {
 	var a = document.createElement('a');
-	a.download = '';
+	a.download = name;
 	a.href = url;
 	// firefox doesn't support `a.click()`...
 	a.dispatchEvent(new MouseEvent('click'));
 }
 
-module.exports = function (urls) {
+module.exports = function (urlsOrOpts) {
+	if (urlsOrOpts.constructor === Array) {
+		urlsOrOpts = { urls: urlsOrOpts };
+	}
+
+  const { urls, renameFn } = urlsOrOpts;
+
 	if (!urls) {
 		throw new Error('`urls` required');
 	}
@@ -59,12 +65,14 @@ module.exports = function (urls) {
 
 	var delay = 0;
 
-	urls.forEach(function (url) {
+	urls.forEach(function (url, index) {
+		var name = typeof renameFn === 'function' ? renameFn({ url, index, urls }) : '';
+
 		// the download init has to be sequential for firefox if the urls are not on the same domain
 		if (isFirefox() && !sameDomain(url)) {
-			return setTimeout(download.bind(null, url), 100 * ++delay);
+			return setTimeout(download.bind(null, url, name), 100 * ++delay);
 		}
 
-		download(url);
+		download(url, name);
 	});
 }
diff --git a/readme.md b/readme.md
@@ -38,17 +38,40 @@ $('#download-btn').on('click', function () {
 });
 ```
 
+## Usage (rename)
+
+```html
+<button id="download-rename-btn" data-files="unicorn.jpg rainbow.jpg">Download</button>
+```
+
+```js
+document.querySelector('#download-rename-btn').addEventListener('click', function (e) {
+	var files = e.target.dataset.files.split(' ');
+	multiDownload(files, function ({ url, index, urls}) {
+		return 'new name.pdf'
+	});
+});
+```
+
+Rename doesn't work when using the fallback
 
 ## API
 
 ### multiDownload(urls)
+### multiDownload({ urls, renameFn })
 
 #### urls
 
 Type: `array`
 
 URLs to files you want to download.
 
+#### renameFn
+
+Type: `function`
+
+Function which accepts an object containing `url`, `index` and `urls` and
+returns the `filename` it should be downloaded with
 
 ## Caveats