Add header and option to preserve the filename

When uploading it's now possible to specify a X-ResourceMeta-Filename
header to specify the final filename of the file. This supercedes the
X-ResourceMeta-Extension header.
Note: this option can make it easier to guess the resource url so if
uploading a sensitive file (which is not recommended anyway) an easy to
guess filename could make it easier for an "attacker" to get the file.

1 files changed, 10 insertions, 3 deletions

diff --git a/templates/index.html b/templates/index.html
index 12c99f4..c06b6ec 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -40,9 +40,13 @@
 				xhr.setRequestHeader("X-Token", token);
 				ldot = f.name.lastIndexOf(".");
 				if (ldot > -1) {
-					xhr.setRequestHeader("X-ResourceMeta-Extension", f.name.substring(ldot))
+					xhr.setRequestHeader("X-ResourceMeta-Extension", f.name.substring(ldot));
 				}
-				xhr.send(f)
+				let preserveFilename = document.getElementById("filename").checked;
+				if (preserveFilename) {
+					xhr.setRequestHeader("X-ResourceMeta-Filename", f.name);
+				}
+				xhr.send(f);
 			}
 		</script>
 	</head>
@@ -59,6 +63,8 @@ Server for uploading files.
 Use the form here or send a POST request to /upload with the content of the file in the body.
 The request can contain a X-ResourceMeta-Extension header with the desired extension of the file including the dot (i.e. .gif or .flac).
 This will improve compatibility when fetching the file.
+The request can contain a X-ResourceMeta-Filename header with the desired filename. This supercedes X-ResourceMeta-Extension.
+Note that using this option may make it easier to guess the resource url.
 If a token has been set on the server, pass the token in the request via a X-Token header.
 
 The response will contain a X-Resource-ID header containing the ID of the saved file.
@@ -69,7 +75,8 @@ Again if a token has been set on the server, use a X-Token header when sending t
 		{{ if .Token }}
 			<input type="text" id="token" placeholder="token"/>
 		{{end}}
-		<input type="file" id="file"/><br/><br/>
+		<input type="file" id="file"/>
+		<pre><label for="filename">Preserve filename: </label><input type="checkbox" id="filename"/></pre>
 		<button type="button" onclick="upload()">Upload</button>
 		<span id="progress"></span>
 	</body>