Files
Void-Homelab/public/components/dropzone.js
root 063c29a835 feat(ui): drag-drop capture onto the main panel
Drops into #main POST /api/capture/upload one file at a time, with
space_id pre-filled from localStorage.last_space_id (set whenever the
space view renders).

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-06-01 03:56:30 +10:00

43 lines
1.6 KiB
JavaScript

// Drag-drop wrapper for /api/capture/upload. Pre-fills space_id from
// localStorage.last_space_id (set when the space view renders).
export function attachDropzone(target) {
function highlight(on) {
target.style.outline = on ? '2px dashed var(--accent)' : '';
target.style.outlineOffset = on ? '-6px' : '';
}
let counter = 0; // dragenter/leave on children would otherwise toggle
target.addEventListener('dragenter', e => { e.preventDefault(); counter++; if (counter === 1) highlight(true); });
target.addEventListener('dragleave', () => { counter = Math.max(0, counter - 1); if (counter === 0) highlight(false); });
target.addEventListener('dragover', e => { e.preventDefault(); });
target.addEventListener('drop', async e => {
e.preventDefault();
counter = 0;
highlight(false);
const files = [...(e.dataTransfer?.files || [])];
if (!files.length) return;
const space_id = localStorage.getItem('last_space_id');
if (!space_id) {
alert('Open a space first so we know where to drop these.');
return;
}
const token = localStorage.getItem('void_token') || '';
let ok = 0, fail = 0;
for (const f of files) {
const fd = new FormData();
fd.append('file', f);
fd.append('space_id', space_id);
try {
const res = await fetch('/api/capture/upload', {
method: 'POST',
headers: { Authorization: 'Bearer ' + token },
body: fd
});
if (res.ok) ok++; else fail++;
} catch { fail++; }
}
const msg = `${ok} file${ok === 1 ? '' : 's'} queued` + (fail ? ` (${fail} failed)` : '');
console.log(msg);
});
}