81 lines
3.3 KiB
HTML
81 lines
3.3 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Upload — photo-pipeline</title>
|
|
<style>
|
|
:root { color-scheme: dark; }
|
|
body { font-family: system-ui, sans-serif; margin: 0; background: #111; color: #eee; }
|
|
header { padding: 1rem 1.5rem; border-bottom: 1px solid #333; display: flex; gap: 1.5rem; align-items: baseline; }
|
|
header h1 { font-size: 1.2rem; margin: 0; }
|
|
header a { color: #6cf; text-decoration: none; }
|
|
main { padding: 1.5rem; max-width: 700px; margin: 0 auto; }
|
|
.drop { border: 2px dashed #444; border-radius: 12px; padding: 3rem 2rem; text-align: center; color: #888; }
|
|
.drop.dragover { border-color: #6cf; background: #16222a; }
|
|
input[type=file] { margin: 1rem 0; }
|
|
button { background: #1d4; color: #031; border: 0; border-radius: 8px; padding: .6rem 1.2rem; font-size: 1rem; cursor: pointer; font-weight: 600; }
|
|
.hint { color: #666; font-size: .85rem; margin-top: 1.5rem; }
|
|
.hint code { background: #222; padding: .1rem .4rem; border-radius: 4px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<h1>📸 photo-pipeline</h1>
|
|
<a href="/">Overview</a>
|
|
<a href="/review">Review queue</a>
|
|
<a href="/pipeline">Pipeline</a>
|
|
<a href="/upload">Upload</a>
|
|
</header>
|
|
<main>
|
|
<h2>Upload to pipeline</h2>
|
|
<p>Drop Takeout archives (<code>.zip</code>/<code>.tgz</code>) or manifest files here.
|
|
They land in <code>/mnt/data/takeout/incoming/</code> — the watch flow picks them up
|
|
within 15 minutes and runs the pipeline automatically.</p>
|
|
|
|
<form id="upform" method="post" action="/upload" enctype="multipart/form-data">
|
|
<div class="drop" id="drop">
|
|
<p>Drag & drop files here, or click to browse</p>
|
|
<input type="file" id="fileinput" name="files" multiple>
|
|
</div>
|
|
<p><button type="submit">Upload</button></p>
|
|
<p id="status" style="color:#6cf;"></p>
|
|
</form>
|
|
|
|
<div class="hint">
|
|
<p>What can go here:</p>
|
|
<ul>
|
|
<li><code>*.txt</code> — a manifest of Takeout download URLs (one per line). The pipeline downloads them itself.</li>
|
|
<li><code>*.zip</code> / <code>*.tgz</code> — an already-downloaded Takeout archive.</li>
|
|
</ul>
|
|
</div>
|
|
</main>
|
|
<script>
|
|
const drop = document.getElementById('drop');
|
|
const input = document.getElementById('fileinput');
|
|
const status = document.getElementById('status');
|
|
|
|
drop.addEventListener('dragover', e => { e.preventDefault(); drop.classList.add('dragover'); });
|
|
drop.addEventListener('dragleave', () => drop.classList.remove('dragover'));
|
|
drop.addEventListener('drop', e => {
|
|
e.preventDefault();
|
|
drop.classList.remove('dragover');
|
|
input.files = e.dataTransfer.files;
|
|
status.textContent = input.files.length + ' file(s) selected';
|
|
});
|
|
input.addEventListener('change', () => {
|
|
status.textContent = input.files.length + ' file(s) selected';
|
|
});
|
|
|
|
document.getElementById('upform').addEventListener('submit', async e => {
|
|
e.preventDefault();
|
|
status.textContent = 'Uploading…';
|
|
const fd = new FormData(document.getElementById('upform'));
|
|
const resp = await fetch('/upload', { method: 'POST', body: fd });
|
|
const data = await resp.json();
|
|
status.textContent = `Done: ${data.saved} file(s) saved to incoming. Watch flow will process them.`;
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|