more htmx

Backend/src/main/java/com/gregor_lohaus/gtransfer/config/ConfigRuntimeHints.java

@@ -50,6 +50,11 @@ public class ConfigRuntimeHints implements RuntimeHintsRegistrar {
         MemberCategory.INVOKE_PUBLIC_CONSTRUCTORS,
         MemberCategory.ACCESS_DECLARED_FIELDS,
         MemberCategory.ACCESS_PUBLIC_FIELDS);
+    hints.reflection().registerType(UploadConfig.class,
+        MemberCategory.INVOKE_DECLARED_CONSTRUCTORS,
+        MemberCategory.INVOKE_PUBLIC_CONSTRUCTORS,
+        MemberCategory.ACCESS_DECLARED_FIELDS,
+        MemberCategory.ACCESS_PUBLIC_FIELDS);
     hints.reflection().registerType(TypeAdapter.class,
         MemberCategory.ACCESS_DECLARED_FIELDS,
         MemberCategory.ACCESS_PUBLIC_FIELDS);

Backend/src/main/java/com/gregor_lohaus/gtransfer/config/DefaultConfig.java

@@ -10,6 +10,7 @@ import com.gregor_lohaus.gtransfer.config.types.ServletConfig;
 import com.gregor_lohaus.gtransfer.config.types.SpringConfig;
 import com.gregor_lohaus.gtransfer.config.types.StorageService;
 import com.gregor_lohaus.gtransfer.config.types.StorageServiceType;
+import com.gregor_lohaus.gtransfer.config.types.UploadConfig;
 
 public class DefaultConfig {
   public static final Config config;
@@ -42,6 +43,12 @@ public class DefaultConfig {
     sc.servletConfig = svc;
 
     c.springConfig = sc;
+
+    UploadConfig uc = new UploadConfig();
+    uc.maxDownloadLimit = 100;
+    uc.maxExpiryDays = 30;
+    c.uploadConfig = uc;
+
     config = c;
   }
 }

Backend/src/main/java/com/gregor_lohaus/gtransfer/config/types/Config.java

@@ -11,4 +11,6 @@ public class Config implements TomlSerializable {
   public SpringConfig springConfig;
   @Nested(name = "storageService")
   public StorageService storageService;
+  @Nested(name = "upload")
+  public UploadConfig uploadConfig;
 }

Backend/src/main/java/com/gregor_lohaus/gtransfer/config/types/UploadConfig.java

@@ -0,0 +1,12 @@
+package com.gregor_lohaus.gtransfer.config.types;
+
+import com.gregor_lohaus.gtransfer.config.annotations.Property;
+
+import io.github.wasabithumb.jtoml.serial.TomlSerializable;
+
+public class UploadConfig implements TomlSerializable {
+  @Property(name = "maxDownloadLimit")
+  public Integer maxDownloadLimit;
+  @Property(name = "maxExpiryDays")
+  public Integer maxExpiryDays;
+}

Backend/src/main/java/com/gregor_lohaus/gtransfer/controller/UploadController.java

@@ -1,37 +1,63 @@
 package com.gregor_lohaus.gtransfer.controller;
 
 import java.io.IOException;
-import java.util.Map;
+import java.time.LocalDateTime;
 
 import org.springframework.beans.factory.annotation.Autowired;
-import org.springframework.http.ResponseEntity;
+import org.springframework.beans.factory.annotation.Value;
+import org.springframework.stereotype.Controller;
+import org.springframework.ui.Model;
+import org.springframework.web.bind.annotation.GetMapping;
 import org.springframework.web.bind.annotation.PostMapping;
 import org.springframework.web.bind.annotation.RequestParam;
-import org.springframework.web.bind.annotation.RestController;
 import org.springframework.web.multipart.MultipartFile;
 
 import com.gregor_lohaus.gtransfer.model.File;
 import com.gregor_lohaus.gtransfer.model.FileRepository;
 import com.gregor_lohaus.gtransfer.services.filewriter.AbstractStorageService;
 
-@RestController
+@Controller
 public class UploadController {
 
+    @Value("${gtransfer-config.upload.maxDownloadLimit:100}")
+    private Integer maxDownloadLimit;
+
+    @Value("${gtransfer-config.upload.maxExpiryDays:30}")
+    private Integer maxExpiryDays;
+
     @Autowired
     private AbstractStorageService storageService;
 
     @Autowired
     private FileRepository fileRepository;
 
+    @GetMapping("/upload/options")
+    public String options(@RequestParam String name, Model model) {
+        model.addAttribute("name", name);
+        model.addAttribute("maxExpiryDays", maxExpiryDays);
+        model.addAttribute("maxDownloadLimit", maxDownloadLimit);
+        return "upload/options :: form";
+    }
+
     @PostMapping("/upload")
-    public ResponseEntity<Map<String, String>> upload(
+    public String upload(
             @RequestParam("file") MultipartFile file,
             @RequestParam("hash") String hash,
-            @RequestParam("name") String name) throws IOException {
+            @RequestParam("name") String name,
+            @RequestParam(required = false) Integer expiryDays,
+            @RequestParam(required = false) Integer downloadLimit,
+            Model model) throws IOException {
 
         storageService.put(hash, file.getBytes());
-        fileRepository.save(new File(hash, hash, name, null));
 
-        return ResponseEntity.ok(Map.of("id", hash));
+        int days = expiryDays != null ? Math.min(expiryDays, maxExpiryDays) : maxExpiryDays;
+        Integer limit = downloadLimit != null ? Math.min(downloadLimit, maxDownloadLimit) : null;
+
+        File f = new File(hash, hash, name, LocalDateTime.now().plusDays(days));
+        f.setDownloadLimit(limit);
+        fileRepository.save(f);
+
+        model.addAttribute("id", hash);
+        return "upload/result :: view";
     }
 }

Backend/src/main/resources/static/crypto.js

@@ -0,0 +1,28 @@
+async function encryptFile(arrayBuffer) {
+    const key = await crypto.subtle.generateKey(
+        { name: 'AES-GCM', length: 256 },
+        true,
+        ['encrypt', 'decrypt']
+    );
+
+    const iv = crypto.getRandomValues(new Uint8Array(12));
+
+    const ciphertext = await crypto.subtle.encrypt({ name: 'AES-GCM', iv }, key, arrayBuffer);
+
+    // Payload: 12-byte IV prepended to ciphertext
+    const payload = new Uint8Array(12 + ciphertext.byteLength);
+    payload.set(iv, 0);
+    payload.set(new Uint8Array(ciphertext), 12);
+
+    // SHA-256(rawKey) → file identifier sent to server; server never sees the key itself
+    const rawKey = await crypto.subtle.exportKey('raw', key);
+    const hash = Array.from(new Uint8Array(await crypto.subtle.digest('SHA-256', rawKey)))
+        .map(b => b.toString(16).padStart(2, '0'))
+        .join('');
+
+    // Base64url-encode key for URL fragment
+    const base64urlKey = btoa(String.fromCharCode(...new Uint8Array(rawKey)))
+        .replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '');
+
+    return { payload, hash, base64urlKey };
+}

Backend/src/main/resources/static/upload.js

@@ -1,28 +1,17 @@
 const dropZone = document.getElementById('drop-zone');
 const fileInput = document.getElementById('file-input');
-
+const promptHtml = dropZone.innerHTML;
-const views = {
-    prompt:    document.getElementById('view-prompt'),
-    selected:  document.getElementById('view-selected'),
-    uploading: document.getElementById('view-uploading'),
-    result:    document.getElementById('view-result'),
-};
 
 let selectedFile = null;
 
-function showView(name) {
-    Object.entries(views).forEach(([key, el]) => el.classList.toggle('d-none', key !== name));
-}
-
 // ── File selection ────────────────────────────────────────────────────────────
 
 dropZone.addEventListener('click', () => {
-    if (views.prompt.classList.contains('d-none')) return;
+    if (selectedFile === null) fileInput.click();
-    fileInput.click();
 });
 
 fileInput.addEventListener('change', e => {
-    if (e.target.files[0]) selectFile(e.target.files[0]);
+    if (e.target.files[0]) onFileSelected(e.target.files[0]);
 });
 
 dropZone.addEventListener('dragover', e => {
@@ -35,101 +24,78 @@ dropZone.addEventListener('dragleave', () => dropZone.classList.remove('dragover
 dropZone.addEventListener('drop', e => {
     e.preventDefault();
     dropZone.classList.remove('dragover');
-    if (e.dataTransfer.files[0]) selectFile(e.dataTransfer.files[0]);
+    if (e.dataTransfer.files[0] && selectedFile === null) onFileSelected(e.dataTransfer.files[0]);
 });
 
-function selectFile(file) {
+function onFileSelected(file) {
     selectedFile = file;
-    document.getElementById('selected-name').textContent = file.name;
+    // Use htmx to fetch the options form — server renders max values from config
-    showView('selected');
+    htmx.ajax('GET', '/upload/options?name=' + encodeURIComponent(file.name), {
+        target: '#drop-zone',
+        swap: 'innerHTML'
+    });
 }
 
-document.getElementById('reset-btn').addEventListener('click', e => {
+// ── Upload (called from onclick in server-rendered options form) ──────────────
-    e.stopPropagation();
-    selectedFile = null;
-    fileInput.value = '';
-    showView('prompt');
-});
 
-document.getElementById('new-upload-btn').addEventListener('click', e => {
+async function startUpload() {
-    e.stopPropagation();
+    const expiryDays = document.getElementById('expiry-days')?.value;
-    selectedFile = null;
+    const downloadLimit = document.getElementById('download-limit')?.value;
-    fileInput.value = '';
-    showView('prompt');
-});
 
-// ── Upload ────────────────────────────────────────────────────────────────────
+    dropZone.innerHTML = `
-
+        <div class="mb-3">
-document.getElementById('upload-btn').addEventListener('click', async e => {
+            <div class="spinner-border text-success" role="status">
-    e.stopPropagation();
+                <span class="visually-hidden">Loading\u2026</span>
-    await upload();
+            </div>
-});
+        </div>
-
+        <div class="drop-zone-text" id="upload-status">Encrypting\u2026</div>`;
-function setStatus(msg) {
-    document.getElementById('upload-status').textContent = msg;
-}
-
-async function upload() {
-    const file = selectedFile;
-    showView('uploading');
 
     try {
-        setStatus('Generating encryption key\u2026');
+        const { payload, hash, base64urlKey } = await encryptFile(await selectedFile.arrayBuffer());
-        const key = await crypto.subtle.generateKey(
-            { name: 'AES-GCM', length: 256 },
-            true,
-            ['encrypt', 'decrypt']
-        );
-
-        const iv = crypto.getRandomValues(new Uint8Array(12));
-
-        setStatus('Encrypting\u2026');
-        const ciphertext = await crypto.subtle.encrypt(
-            { name: 'AES-GCM', iv },
-            key,
-            await file.arrayBuffer()
-        );
-
-        // Payload: 12-byte IV prepended to ciphertext
-        const payload = new Uint8Array(12 + ciphertext.byteLength);
-        payload.set(iv, 0);
-        payload.set(new Uint8Array(ciphertext), 12);
-
-        // SHA-256(rawKey) → file identifier sent to server (server never sees the key)
-        const rawKey = await crypto.subtle.exportKey('raw', key);
-        const hash = Array.from(new Uint8Array(await crypto.subtle.digest('SHA-256', rawKey)))
-            .map(b => b.toString(16).padStart(2, '0'))
-            .join('');
-
-        // Base64url-encode key for URL fragment
-        const base64urlKey = btoa(String.fromCharCode(...new Uint8Array(rawKey)))
-            .replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '');
 
         setStatus('Uploading\u2026');
+
         const formData = new FormData();
-        formData.append('file', new Blob([payload]), file.name);
+        formData.append('file', new Blob([payload]), selectedFile.name);
         formData.append('hash', hash);
-        formData.append('name', file.name);
+        formData.append('name', selectedFile.name);
+        if (expiryDays)    formData.append('expiryDays', expiryDays);
+        if (downloadLimit) formData.append('downloadLimit', downloadLimit);
 
         const response = await fetch('/upload', { method: 'POST', body: formData });
-        if (!response.ok) throw new Error(`Server responded with ${response.status}`);
+        if (!response.ok) throw new Error(`Server error ${response.status}`);
 
-        const { id } = await response.json();
+        // Server returns HTML fragment; append key fragment client-side
-        document.getElementById('share-link').value =
+        dropZone.innerHTML = await response.text();
-            `${window.location.origin}/download/${id}#${base64urlKey}`;
+        htmx.process(dropZone);
-        showView('result');
+        document.getElementById('share-link').value += '#' + base64urlKey;
 
     } catch (err) {
-        setStatus(`Error: ${err.message}`);
+        dropZone.innerHTML = `
+            <div class="drop-zone-icon mb-3">&#x26A0;</div>
+            <div class="drop-zone-text mb-3">${err.message}</div>
+            <button class="btn btn-link drop-zone-text text-decoration-none" onclick="resetUpload()">Try again</button>`;
     }
 }
 
-// ── Copy link ─────────────────────────────────────────────────────────────────
+function setStatus(msg) {
+    const el = document.getElementById('upload-status');
+    if (el) el.textContent = msg;
+}
 
-document.getElementById('copy-btn').addEventListener('click', async e => {
+// ── Reset (called from onclick in server-rendered fragments) ──────────────────
-    e.stopPropagation();
+
+function resetUpload() {
+    selectedFile = null;
+    fileInput.value = '';
+    dropZone.innerHTML = promptHtml;
+}
+
+// ── Copy link (called from onclick in result fragment) ────────────────────────
+
+async function copyLink() {
     await navigator.clipboard.writeText(document.getElementById('share-link').value);
     const btn = document.getElementById('copy-btn');
     btn.textContent = 'Copied!';
     setTimeout(() => { btn.textContent = 'Copy'; }, 2000);
-});
+}

Backend/src/main/resources/templates/index.html

@@ -8,6 +8,7 @@
     <link rel="stylesheet" th:href="@{/style.css}">
     <script th:src="@{/webjars/bootstrap/dist/js/bootstrap.bundle.min.js}" defer></script>
     <script th:src="@{/webjars/htmx.org/dist/htmx.min.js}" defer></script>
+    <script th:src="@{/crypto.js}" defer></script>
     <script th:src="@{/upload.js}" defer></script>
 </head>
 <body class="d-flex flex-column min-vh-100">
@@ -27,52 +28,14 @@
                 </p>
             </div>
             <div class="col-lg-7 d-flex justify-content-center justify-content-lg-end">
+                <input type="file" id="file-input" hidden>
                 <div id="drop-zone" class="drop-zone text-center py-5 px-4 w-100">
-
+                    <div class="drop-zone-icon mb-3">&#x1F4C2;</div>
-                    <!-- State: prompt (default) -->
+                    <div class="mb-2">
-                    <div id="view-prompt">
+                        <strong>Choose a file</strong>
-                        <div class="drop-zone-icon mb-3">&#x1F4C2;</div>
+                        <span class="drop-zone-text"> or drag and drop here</span>
-                        <div class="mb-2">
-                            <strong>Choose a file</strong>
-                            <span class="drop-zone-text"> or drag and drop here</span>
-                        </div>
-                        <div class="drop-zone-text small">Any file type &middot; Up to <span th:text="${maxFileSize}">10GB</span></div>
                     </div>
-
+                    <div class="drop-zone-text small">Any file type &middot; Up to <span th:text="${maxFileSize}">10GB</span></div>
-                    <!-- State: file selected -->
-                    <div id="view-selected" class="d-none">
-                        <div class="drop-zone-icon mb-3">&#x1F4C4;</div>
-                        <div class="fw-medium mb-3" id="selected-name"></div>
-                        <div class="d-flex gap-2 justify-content-center">
-                            <button id="upload-btn" class="btn btn-success px-4">Send</button>
-                            <button id="reset-btn" class="btn btn-link drop-zone-text text-decoration-none">Change file</button>
-                        </div>
-                    </div>
-
-                    <!-- State: uploading -->
-                    <div id="view-uploading" class="d-none">
-                        <div class="mb-3">
-                            <div class="spinner-border text-success" role="status">
-                                <span class="visually-hidden">Loading...</span>
-                            </div>
-                        </div>
-                        <div class="drop-zone-text" id="upload-status">Preparing&hellip;</div>
-                    </div>
-
-                    <!-- State: result -->
-                    <div id="view-result" class="d-none">
-                        <div class="drop-zone-icon mb-3">&#x2705;</div>
-                        <div class="drop-zone-text mb-3">Your file is ready to share</div>
-                        <div class="input-group mb-2">
-                            <input type="text" id="share-link" class="form-control form-control-sm" readonly>
-                            <button id="copy-btn" class="btn btn-outline-success btn-sm">Copy</button>
-                        </div>
-                        <button id="new-upload-btn" class="btn btn-link drop-zone-text text-decoration-none small">
-                            Send another file
-                        </button>
-                    </div>
-
-                    <input type="file" id="file-input" hidden>
                 </div>
             </div>
         </div>

Backend/src/main/resources/templates/upload/options.html

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html xmlns:th="http://www.thymeleaf.org">
+<body>
+<div th:fragment="form">
+    <div class="drop-zone-icon mb-3">&#x1F4C4;</div>
+    <div class="fw-medium mb-3 text-truncate" th:text="${name}">filename</div>
+
+    <div class="row g-2 mb-3 text-start">
+        <div class="col-6">
+            <label for="expiry-days" class="form-label drop-zone-text small">Expires after (days)</label>
+            <input type="number" id="expiry-days" class="form-control form-control-sm"
+                   min="1" th:max="${maxExpiryDays}" th:value="${maxExpiryDays}">
+        </div>
+        <div class="col-6">
+            <label for="download-limit" class="form-label drop-zone-text small">Download limit</label>
+            <input type="number" id="download-limit" class="form-control form-control-sm"
+                   min="1" th:max="${maxDownloadLimit}" placeholder="Unlimited">
+        </div>
+    </div>
+
+    <div class="d-flex gap-2 justify-content-center">
+        <button class="btn btn-success px-4" onclick="startUpload()">Send</button>
+        <button class="btn btn-link drop-zone-text text-decoration-none" onclick="resetUpload()">Change file</button>
+    </div>
+</div>
+</body>
+</html>

Backend/src/main/resources/templates/upload/result.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html xmlns:th="http://www.thymeleaf.org">
+<body>
+<div th:fragment="view">
+    <div class="drop-zone-icon mb-3">&#x2705;</div>
+    <div class="drop-zone-text mb-3">Your file is ready to share</div>
+    <div class="input-group mb-2">
+        <input type="text" id="share-link" class="form-control form-control-sm"
+               th:value="@{/download/{id}(id=${id})}" readonly>
+        <button id="copy-btn" class="btn btn-outline-success btn-sm" onclick="copyLink()">Copy</button>
+    </div>
+    <button class="btn btn-link drop-zone-text text-decoration-none small" onclick="resetUpload()">
+        Send another file
+    </button>
+</div>
+</body>
+</html>