94 lines
3.1 KiB
JavaScript
94 lines
3.1 KiB
JavaScript
const dropZone = htmx.find('#drop-zone');
|
|
const fileInput = htmx.find('#file-input');
|
|
const promptHtml = dropZone.innerHTML;
|
|
|
|
let selectedFile = null;
|
|
|
|
htmx.on(dropZone, 'click', () => {
|
|
if (selectedFile === null) fileInput.click();
|
|
});
|
|
|
|
htmx.on(fileInput, 'change', e => {
|
|
if (e.target.files[0]) onFileSelected(e.target.files[0]);
|
|
});
|
|
|
|
htmx.on(dropZone, 'dragover', e => {
|
|
e.preventDefault();
|
|
htmx.addClass(dropZone, 'dragover');
|
|
});
|
|
|
|
htmx.on(dropZone, 'dragleave', () => htmx.removeClass(dropZone, 'dragover'));
|
|
|
|
htmx.on(dropZone, 'drop', e => {
|
|
e.preventDefault();
|
|
htmx.removeClass(dropZone, 'dragover');
|
|
if (e.dataTransfer.files[0] && selectedFile === null) onFileSelected(e.dataTransfer.files[0]);
|
|
});
|
|
|
|
function onFileSelected(file) {
|
|
selectedFile = file;
|
|
htmx.ajax('GET', '/upload/options?name=' + encodeURIComponent(file.name), {
|
|
target: '#drop-zone',
|
|
swap: 'innerHTML'
|
|
});
|
|
}
|
|
|
|
async function startUpload() {
|
|
const expiryDays = htmx.find('#expiry-days')?.value;
|
|
const downloadLimit = htmx.find('#download-limit')?.value;
|
|
|
|
htmx.swap(dropZone, `
|
|
<div class="mb-3">
|
|
<div class="spinner-border text-success" role="status">
|
|
<span class="visually-hidden">Loading\u2026</span>
|
|
</div>
|
|
</div>
|
|
<div class="drop-zone-text" id="upload-status">Encrypting\u2026</div>`,
|
|
{ swapStyle: 'innerHTML' });
|
|
|
|
try {
|
|
const { payload, hash, base64urlKey } = await encryptFile(await selectedFile.arrayBuffer());
|
|
|
|
setStatus('Uploading\u2026');
|
|
|
|
const formData = new FormData();
|
|
formData.append('file', new Blob([payload]), selectedFile.name);
|
|
formData.append('hash', hash);
|
|
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 error ${response.status}`);
|
|
|
|
htmx.swap(dropZone, await response.text(), { swapStyle: 'innerHTML' });
|
|
htmx.process(dropZone);
|
|
htmx.find('#share-link').value = window.location.origin + '/download#' + base64urlKey;
|
|
|
|
} catch (err) {
|
|
htmx.swap(dropZone, `
|
|
<div class="drop-zone-icon mb-3">⚠</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>`,
|
|
{ swapStyle: 'innerHTML' });
|
|
}
|
|
}
|
|
|
|
function setStatus(msg) {
|
|
const el = htmx.find('#upload-status');
|
|
if (el) el.textContent = msg;
|
|
}
|
|
|
|
function resetUpload() {
|
|
selectedFile = null;
|
|
fileInput.value = '';
|
|
htmx.swap(dropZone, promptHtml, { swapStyle: 'innerHTML' });
|
|
}
|
|
|
|
async function copyLink() {
|
|
await navigator.clipboard.writeText(htmx.find('#share-link').value);
|
|
const btn = htmx.find('#copy-btn');
|
|
btn.textContent = 'Copied!';
|
|
setTimeout(() => { btn.textContent = 'Copy'; }, 2000);
|
|
}
|