Split file name and extension fields 🚧

This implements the user interface changes required for #5.
danth · Apr 29, 2022 · ff1eafd · ff1eafd
1 parent a43e35e
commit ff1eafd
Show file tree

Hide file tree

Showing 3 changed files with 111 additions and 26 deletions.
diff --git a/js/url_utilities.js b/js/url_utilities.js
@@ -1,4 +1,4 @@
-export function makeDefaultFilename(url) {
+function getFilename(url) {
 		let segments;
 		try {
 			segments = new URL(url).pathname.split("/");
@@ -9,4 +9,19 @@ export function makeDefaultFilename(url) {
 
 		// The || handles the possibility of a trailing slash.
 		return segments.pop() || segments.pop() || null;
+}
+
+const EXTENSION = /\.((?:tar\.)?[^/.]+)$/;
+
+export function makeDefaultFilename(url) {
+		let filename = getFilename(url);
+		if (!filename) return null;
+		return filename.replace(EXTENSION, "");
+}
+
+export function makeDefaultExtension(url) {
+		let filename = getFilename(url);
+		if (!filename) return null;
+		const match = filename.match(EXTENSION);
+		return match ? match[1] : null;
 }
diff --git a/js/views/Prompt.svelte b/js/views/Prompt.svelte
@@ -5,15 +5,17 @@
 	const OC = window.OC;
 
 	import { enqueueTransfer } from "../ajax";
-	import { makeDefaultFilename } from "../url_utilities";
+	import { makeDefaultFilename, makeDefaultExtension } from "../url_utilities";
 
 	export let fileList;
 	export let closeHandler;
 
 	$: filename = "";
+	$: extension = "";
 
 	// This will be used if the user does not enter their own name.
-	$: defaultFilename = t("transfer", "file.txt");
+	$: defaultFilename = t("transfer", "file");
+	$: defaultExtension = "";
 
 	let url = "";
 	// When the URL is edited, update the default filename.
@@ -22,6 +24,7 @@
 	function setDefaultFilename() {
 		// Keeps the current value if the URL is invalid.
 		defaultFilename = makeDefaultFilename(url) || defaultFilename;
+		defaultExtension = makeDefaultExtension(url) || defaultExtension;
 	}
 
 	function submit() {
@@ -42,26 +45,41 @@
 		action={OC.generateUrl('/')}
 		on:submit|preventDefault={submit}
 		method="post">
-		<div>
-			<label>
-				{t("transfer", "Download link")}
-				<br />
-				<input
-					type="text"
-					style="width: 100%; min-width: 25em;"
-					bind:value={url}
-					autofocus
-					placeholder={t("transfer", "http://example.com/file.txt")} />
-			</label>
-			<label>
-				{t("transfer", "File name")}
-				<br />
-				<input
-					type="text"
-					style="width: 100%; min-width: 15em;"
-					bind:value={filename}
-					placeholder={defaultFilename} />
-			</label>
+		<label>
+			{t("transfer", "Download link")}
+			<br />
+			<input
+				type="text"
+				style="width: 100%; min-width: 25em;"
+				bind:value={url}
+				autofocus
+				placeholder={t("transfer", "http://example.com/file.txt")} />
+		</label>
+		<div style="margin-top: 0.5em;">
+			<div style="display: flex; align-items: last baseline; gap: 0.15em;">
+				<label style="flex-grow: 1;">
+					{t("transfer", "File name")}
+					<br />
+					<input
+						type="text"
+						style="width: 100%;"
+						bind:value={filename}
+						placeholder={defaultFilename} />
+				</label>
+				.
+				<label>
+					{t("transfer", "Extension")}
+					<br />
+					<input
+						type="text"
+						style="width: 5em;"
+						bind:value={extension}
+						placeholder={defaultExtension} />
+				</label>
+			</div>
+			<p style="text-align: center; margin-top: 0.4em;">
+				{t("transfer", "The file name and extension will be detected automatically, if left blank.")}
+			</p>
 		</div>
 		<div class="oc-dialog-buttonrow twobuttons">
 			<a on:click|preventDefault={closeHandler} class="cancel button">

diff --git a/test/js/url_utilities.spec.js b/test/js/url_utilities.spec.js
@@ -1,16 +1,21 @@
 import { expect } from "chai";
 
-import { makeDefaultFilename } from "../../js/url_utilities.js";
+import { makeDefaultFilename, makeDefaultExtension } from "../../js/url_utilities.js";
 
 describe("makeDefaultFilename", function () {
   it("should extract a filename with no trailing slash", function() {
     const filename = makeDefaultFilename("https://example.com/file.txt");
-    expect(filename).to.equal("file.txt");
+    expect(filename).to.equal("file");
   });
 
   it("should extract a filename with a trailing slash", function() {
     const filename = makeDefaultFilename("https://example.com/file.txt/");
-    expect(filename).to.equal("file.txt");
+    expect(filename).to.equal("file");
+  });
+
+  it("should treat .tar.gz as an extension", function() {
+    const filename = makeDefaultFilename("https://example.com/archive.tar.gz");
+    expect(filename).to.equal("archive");
   });
 
   it("should return `null` when there is no filename and no trailing slash", function() {
@@ -33,3 +38,50 @@ describe("makeDefaultFilename", function () {
     expect(filename).to.be.null;
   });
 });
+
+describe("makeDefaultExtension", function () {
+  it("should extract an extension with no trailing slash", function() {
+    const extension = makeDefaultExtension("https://example.com/file.txt");
+    expect(extension).to.equal("txt");
+  });
+
+  it("should extract an extension with a trailing slash", function() {
+    const extension = makeDefaultExtension("https://example.com/file.txt/");
+    expect(extension).to.equal("txt");
+  });
+
+  it("should treat .tar.gz as an extension", function() {
+    const extension = makeDefaultExtension("https://example.com/archive.tar.gz");
+    expect(extension).to.equal("tar.gz");
+  });
+
+  it("should return `null` when there is no extension and no trailing slash", function() {
+    const extension = makeDefaultExtension("https://example.com");
+    expect(extension).to.be.null;
+  });
+
+  it("should return `null` when there is no extension and a trailing slash", function() {
+    const extension = makeDefaultExtension("https://example.com/");
+    expect(extension).to.be.null;
+  });
+
+  it("should return `null` when there is no extension and no trailing slash", function() {
+    const extension = makeDefaultExtension("https://example.com/file");
+    expect(extension).to.be.null;
+  });
+
+  it("should return `null` when there is no extension and a trailing slash", function() {
+    const extension = makeDefaultExtension("https://example.com/file/");
+    expect(extension).to.be.null;
+  });
+
+  it("should return `null` when the URL is blank", function() {
+    const extension = makeDefaultExtension("");
+    expect(extension).to.be.null;
+  });
+
+  it("should return `null` when the URL is invalid", function() {
+    const extension = makeDefaultExtension("abcdef");
+    expect(extension).to.be.null;
+  });
+});