gregor/gtransfer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

file previews

Browse Source
This commit is contained in:
Gregor Lohaus
2026-02-25 19:26:28 +01:00
parent dba1d571e7
commit 128d294ea1
2 changed files with 116 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
Backend/src/main/resources/static/download.js
View File

@@ -25,22 +25,7 @@ if (!fragment) {
setStatus('Decrypting\u2026');
const plaintext = await decryptFile(await response.arrayBuffer(), key);
const url = URL.createObjectURL(new Blob([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);
});
showPreview(filename, plaintext);
}
} 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' });
}