file previews

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

@@ -25,22 +25,7 @@ if (!fragment) {
         setStatus('Decrypting\u2026');
         const plaintext = await decryptFile(await response.arrayBuffer(), key);
 
-        const url = URL.createObjectURL(new Blob([plaintext]));
+        showPreview(filename, plaintext);
-        const a = document.createElement('a');
-        a.href = url;
-        a.download = filename;
-
-        htmx.swap(htmx.find('#download-state'), `
-            <div class="drop-zone-icon mb-3">&#x1F512;</div>
-            <div class="fw-medium mb-2">${filename}</div>
-            <button id="download-btn" class="btn btn-outline-success mt-2">Download</button>`,
-            { swapStyle: 'innerHTML' });
-
-        htmx.on(htmx.find('#download-btn'), 'click', () => {
-            a.click();
-            URL.revokeObjectURL(url);
-            showSuccess(filename);
-        });
     }
 } catch (err) {
     showError('Decryption failed: ' + err.message);
@@ -51,10 +36,89 @@ function setStatus(msg) {
     if (el) el.textContent = msg;
 }
 
+function escapeHtml(str) {
+    return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+}
+
+function getMimeType(filename) {
+    const ext = filename.split('.').pop().toLowerCase();
+    const types = {
+        jpg: 'image/jpeg', jpeg: 'image/jpeg', png: 'image/png', gif: 'image/gif',
+        webp: 'image/webp', svg: 'image/svg+xml', bmp: 'image/bmp', ico: 'image/x-icon',
+        mp4: 'video/mp4', webm: 'video/webm', ogv: 'video/ogg', mov: 'video/quicktime',
+        mp3: 'audio/mpeg', wav: 'audio/wav', ogg: 'audio/ogg', flac: 'audio/flac',
+        aac: 'audio/aac', m4a: 'audio/mp4',
+        txt: 'text/plain', md: 'text/plain', csv: 'text/csv', log: 'text/plain',
+        json: 'application/json', xml: 'text/xml',
+        js: 'text/plain', ts: 'text/plain', py: 'text/plain', java: 'text/plain',
+        c: 'text/plain', cpp: 'text/plain', h: 'text/plain', sh: 'text/plain',
+        yaml: 'text/plain', yml: 'text/plain', toml: 'text/plain', ini: 'text/plain',
+        pdf: 'application/pdf',
+    };
+    return types[ext] || 'application/octet-stream';
+}
+
+function showPreview(filename, plaintext) {
+    const mimeType = getMimeType(filename);
+    const blob = new Blob([plaintext], { type: mimeType });
+    const url = URL.createObjectURL(blob);
+    window.addEventListener('unload', () => URL.revokeObjectURL(url));
+
+    const name = escapeHtml(filename);
+    const downloadBtn = `<button id="download-btn" class="btn btn-outline-success mt-2">Download</button>`;
+    let previewHtml;
+
+    if (mimeType.startsWith('image/')) {
+        previewHtml = `
+            <img src="${url}" alt="${name}" class="preview-media mb-3">
+            <div class="fw-medium mb-2">${name}</div>
+            ${downloadBtn}`;
+    } else if (mimeType.startsWith('video/')) {
+        previewHtml = `
+            <video src="${url}" controls class="preview-media mb-3"></video>
+            <div class="fw-medium mb-2">${name}</div>
+            ${downloadBtn}`;
+    } else if (mimeType.startsWith('audio/')) {
+        previewHtml = `
+            <div class="drop-zone-icon mb-3">&#x1F3B5;</div>
+            <div class="fw-medium mb-2">${name}</div>
+            <audio src="${url}" controls class="preview-audio mb-3"></audio>
+            ${downloadBtn}`;
+    } else if (mimeType === 'application/pdf') {
+        previewHtml = `
+            <div class="fw-medium mb-2">${name}</div>
+            <iframe src="${url}" class="preview-pdf mb-3"></iframe>
+            ${downloadBtn}`;
+    } else if (mimeType.startsWith('text/') || mimeType === 'application/json') {
+        const text = new TextDecoder().decode(plaintext);
+        const preview = text.length > 10000 ? text.slice(0, 10000) + '\n\u2026' : text;
+        previewHtml = `
+            <div class="fw-medium mb-2">${name}</div>
+            <pre class="preview-text mb-3">${escapeHtml(preview)}</pre>
+            ${downloadBtn}`;
+    } else {
+        previewHtml = `
+            <div class="drop-zone-icon mb-3">&#x1F4C4;</div>
+            <div class="fw-medium mb-2">${name}</div>
+            ${downloadBtn}`;
+    }
+
+    htmx.swap(htmx.find('#download-state'), previewHtml, { swapStyle: 'innerHTML' });
+
+    htmx.on(htmx.find('#download-btn'), 'click', () => {
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = filename;
+        a.click();
+        showSuccess(filename);
+    });
+}
+
 function showSuccess(filename) {
+    const name = escapeHtml(filename);
     htmx.swap(htmx.find('#download-state'), `
         <div class="drop-zone-icon mb-3">&#x2705;</div>
-        <div class="fw-medium mb-1">${filename}</div>
+        <div class="fw-medium mb-1">${name}</div>
         <div class="drop-zone-text mb-3">Your download has started.</div>
         <a href="/" class="btn btn-link drop-zone-text text-decoration-none">Send a file</a>`,
         { swapStyle: 'innerHTML' });
@@ -63,7 +127,7 @@ function showSuccess(filename) {
 function showError(msg) {
     htmx.swap(htmx.find('#download-state'), `
         <div class="drop-zone-icon mb-3">&#x26A0;</div>
-        <div class="drop-zone-text mb-3">${msg}</div>
+        <div class="drop-zone-text mb-3">${escapeHtml(msg)}</div>
         <a href="/" class="btn btn-link drop-zone-text text-decoration-none">Go home</a>`,
         { swapStyle: 'innerHTML' });
 }

Backend/src/main/resources/static/style.css

@@ -65,3 +65,37 @@ footer, footer a {
 footer a:hover {
     color: #8b949e;
 }
+
+.preview-media {
+    max-width: 100%;
+    border-radius: 8px;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.preview-audio {
+    width: 100%;
+}
+
+.preview-pdf {
+    width: 100%;
+    height: 420px;
+    border: none;
+    border-radius: 8px;
+    display: block;
+}
+
+.preview-text {
+    text-align: left;
+    max-height: 320px;
+    overflow: auto;
+    background: #0d1117;
+    padding: 1rem;
+    border-radius: 8px;
+    font-size: 0.78rem;
+    color: #e6edf3;
+    border: 1px solid #30363d;
+    white-space: pre-wrap;
+    word-break: break-word;
+}