let uploader set a collection name for a multiple-file upload

static/css/states.css

@@ -4,6 +4,7 @@
  * landing: haven't entered upload password yet
  * uploads_closed: uploading is currently unavailable
  * no_files: no files are selected
+ * one_file: exactly one file is selected
  * selecting: upload hasn't started yet
  * uploading: upload is in progress
  * completed: upload is done
@@ -43,6 +44,8 @@ body.landing #upload_controls { display: none; }
 body.selecting #upload_settings { display: revert; }
 body.no_files #upload_settings { display: none; }
 
+body.one_file #collection_name { display: none; }
+
 body.selecting #download_code_container { display: none; }
 
 #progress_container { display: none; }

static/css/transbeam.css

@@ -273,6 +273,7 @@ button:disabled, input:disabled + .fake_button, input[type="submit"]:disabled {
 
 #lifetime_container {
     margin-top: 10px;
+    margin-bottom: 10px;
 }
 
 input[type="text"], input[type="password"] {

static/js/upload.js

@@ -21,6 +21,7 @@ let fileInput;
 let fileList;
 let uploadButton;
 let lifetimeInput;
+let collectionNameInput;
 let downloadCode;
 
 let progressPercentage;
@@ -43,6 +44,7 @@ document.addEventListener('DOMContentLoaded', () => {
     fileList = document.getElementById('file_list');
     uploadButton = document.getElementById('upload_button');
     lifetimeInput = document.getElementById('lifetime');
+    collectionNameInput = document.getElementById('collection_name');
     downloadCode = document.getElementById('download_code');
     progressPercentage = document.getElementById('progress_percentage');
     progressSize = document.getElementById('progress_size');
@@ -120,6 +122,9 @@ function updateFiles() {
         fileInputMessage.textContent = 'Select files to upload...';
         document.body.className = 'no_files selecting' + extraClasses;
     } else {
+        if (files.length === 1) {
+            extraClasses += " one_file";
+        }
         fileInputMessage.textContent = 'Select more files to upload...';
         uploadButton.textContent = `Upload ${files.length} file${files.length > 1 ? 's' : ''} (${displaySize(totalBytes)})`;
         document.body.className = 'selecting' + extraClasses;
@@ -184,6 +189,7 @@ function beginUpload() {
 
 function sendManifest() {
     const lifetime = parseInt(lifetimeInput.value);
+    const collection_name = collectionNameInput.value || null;
     const fileMetadata = files.map((file) => ({
         name: file.name,
         size: file.size,
@@ -192,6 +198,7 @@ function sendManifest() {
     socket.send(JSON.stringify({
         files: fileMetadata,
         lifetime,
+        collection_name,
         password: uploadPassword,
     }));
 }