puttaalu
003a4057bf
The server derives a photo's slug from the uploaded filename, so two photos with the same name in one batch would overwrite each other. Each card now gets a slug that is unique among the current cards (second same-named photo becomes -2, -3, …), computed with a client mirror of the server's sanitiseSlug and sent as the multipart filename. The slug is assigned once when a photo is added, so it stays stable across retries. Kept client-side on purpose: a server-side "slug exists -> suffix" would turn the apps' idempotent re-upload retries (same filename overwrites the same post) into duplicates.
304 lines
12 KiB
HTML
304 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Upload — Photo Gallery</title>
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,400;0,600;0,700;1,400&family=Manjari:wght@100;400;700&display=swap">
|
|
<link rel="stylesheet" href="/static/style.css">
|
|
<link rel="icon" href="/static/favicon.ico" sizes="any">
|
|
<link rel="icon" type="image/png" href="/static/web-32.png" sizes="32x32">
|
|
<link rel="apple-touch-icon" href="/static/web-192.png">
|
|
<style>
|
|
.upload-page { max-width: 640px; margin: 0 auto; padding: 32px 20px 80px; }
|
|
.upload-page h2 {
|
|
font-family: var(--serif); font-size: 22px; font-weight: 600;
|
|
color: var(--fg); margin-bottom: 20px;
|
|
}
|
|
.pick-btn, .submit-btn {
|
|
width: 100%; background: var(--bg1); border: 1px solid var(--bg2);
|
|
color: var(--fg2); font-family: var(--serif); font-size: 16px; font-weight: 600;
|
|
padding: 12px; cursor: pointer; transition: background .2s, color .2s;
|
|
}
|
|
.pick-btn:hover:not(:disabled), .submit-btn:hover:not(:disabled) { background: var(--bg2); color: var(--fg); }
|
|
.submit-btn:disabled { opacity: .35; cursor: not-allowed; }
|
|
.pick-btn { margin-bottom: 20px; }
|
|
#file-input { display: none; }
|
|
|
|
#empty {
|
|
display: flex; align-items: center; justify-content: center;
|
|
height: 140px; background: var(--bg0); color: var(--fg4);
|
|
font-family: var(--serif); margin-bottom: 20px;
|
|
}
|
|
|
|
.card { display: grid; grid-template-columns: 84px 1fr auto; gap: 14px; align-items: start; padding: 14px 0; border-top: 1px solid var(--bg1); }
|
|
.card .thumb { width: 84px; height: 84px; background: var(--bg1); object-fit: cover; display: block; }
|
|
.card .fields { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
|
|
.card input {
|
|
width: 100%; box-sizing: border-box; background: var(--bg0);
|
|
border: 1px solid var(--bg2); color: var(--fg); font-size: 15px; padding: 8px 10px; outline: none;
|
|
}
|
|
.card input[type="text"] { font-family: var(--serif); }
|
|
.card input[type="date"] { font-family: monospace; font-size: 13px; color-scheme: dark; width: auto; }
|
|
.card input:focus { border-color: var(--fg4); }
|
|
.card input:disabled { opacity: .5; }
|
|
.c-remove {
|
|
background: none; border: none; color: var(--fg4); font-size: 16px; cursor: pointer; padding: 4px;
|
|
}
|
|
.c-status { font-family: monospace; font-size: 12px; min-height: 16px; }
|
|
.c-status.ok { color: #b8bb26; }
|
|
.c-status.err { color: #fb4934; }
|
|
.c-status.up { color: var(--fg4); }
|
|
.c-status a { color: #8ec07c; }
|
|
|
|
#bar { margin-top: 20px; }
|
|
#summary { margin-top: 12px; font-family: monospace; font-size: 13px; color: var(--fg4); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="upload-page">
|
|
<a href="/" class="back-btn">← Gallery</a>
|
|
<h2>Upload photos</h2>
|
|
|
|
<input type="file" id="file-input" accept=".jpg,.jpeg,.png" multiple>
|
|
<button class="pick-btn" id="pick-btn">Choose photos</button>
|
|
|
|
<div id="empty">No photos selected</div>
|
|
<div id="list"></div>
|
|
|
|
<div id="bar" style="display:none">
|
|
<button class="submit-btn" id="post-btn">Post photos</button>
|
|
<div id="summary"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/static/tagcomplete.js"></script>
|
|
<script>
|
|
const fileInput = document.getElementById('file-input');
|
|
const pickBtn = document.getElementById('pick-btn');
|
|
const list = document.getElementById('list');
|
|
const emptyEl = document.getElementById('empty');
|
|
const bar = document.getElementById('bar');
|
|
const postBtn = document.getElementById('post-btn');
|
|
const summary = document.getElementById('summary');
|
|
|
|
// One entry per chosen photo. status: pending | uploading | ok | error.
|
|
let items = [];
|
|
let seq = 0;
|
|
let posting = false;
|
|
|
|
pickBtn.addEventListener('click', () => fileInput.click());
|
|
fileInput.addEventListener('change', () => {
|
|
for (const file of fileInput.files) addItem(file);
|
|
fileInput.value = ''; // allow re-choosing the same file
|
|
refresh();
|
|
});
|
|
|
|
// Mirror of the server's sanitiseSlug, so the client can predict the slug a
|
|
// filename yields and keep two files in one batch from colliding.
|
|
function slugify(name) {
|
|
let out = '';
|
|
for (const ch of name.toLowerCase()) {
|
|
if ((ch >= 'a' && ch <= 'z') || (ch >= '0' && ch <= '9') || ch === '-') out += ch;
|
|
else if (ch === ' ' || ch === '_') out += '-';
|
|
}
|
|
return out;
|
|
}
|
|
|
|
// A slug unique among the current cards. The server derives the slug from
|
|
// the uploaded filename, so two photos named the same would otherwise
|
|
// overwrite each other; the second (third, …) gets -2, -3, …
|
|
function uniqueSlug(filename) {
|
|
const stem = filename.replace(/\.[^.]+$/, '');
|
|
const base = slugify(stem) || 'photo';
|
|
let candidate = base;
|
|
let n = 2;
|
|
while (items.some((i) => i.slug === candidate)) candidate = base + '-' + (n++);
|
|
return candidate;
|
|
}
|
|
|
|
function addItem(file) {
|
|
const ext = (file.name.match(/\.[^.]+$/)?.[0] || '.jpg').toLowerCase();
|
|
const item = { id: ++seq, file, ext, slug: '', status: 'pending', el: null };
|
|
item.slug = uniqueSlug(file.name); // before push, so it compares against the others
|
|
items.push(item);
|
|
item.el = buildCard(item);
|
|
list.appendChild(item.el);
|
|
// Preview.
|
|
const url = URL.createObjectURL(file);
|
|
const img = item.el.querySelector('.thumb');
|
|
img.onload = () => URL.revokeObjectURL(url);
|
|
img.src = url;
|
|
// Prefill date from EXIF, else file mtime.
|
|
prefillDate(item, file);
|
|
// Tag autocomplete on this card's tags field.
|
|
if (window.TagComplete) window.TagComplete.attach(item.el.querySelector('.c-tags'));
|
|
}
|
|
|
|
function buildCard(item) {
|
|
const el = document.createElement('div');
|
|
el.className = 'card';
|
|
el.innerHTML = `
|
|
<img class="thumb" alt="">
|
|
<div class="fields">
|
|
<input type="text" class="c-caption" placeholder="Caption" autocomplete="off">
|
|
<input type="date" class="c-date">
|
|
<input type="text" class="c-tags" placeholder="tags, comma-separated" autocomplete="off">
|
|
<div class="c-status"></div>
|
|
</div>
|
|
<button class="c-remove" title="Remove">✕</button>`;
|
|
el.querySelector('.c-remove').addEventListener('click', () => removeItem(item.id));
|
|
return el;
|
|
}
|
|
|
|
async function prefillDate(item, file) {
|
|
let d = null;
|
|
try { d = await readExifDate(file); } catch (_) {}
|
|
if (!d && file.lastModified) d = new Date(file.lastModified).toISOString().slice(0, 10);
|
|
if (!d) d = new Date().toISOString().slice(0, 10);
|
|
item.el.querySelector('.c-date').value = d;
|
|
}
|
|
|
|
function removeItem(id) {
|
|
const item = items.find((i) => i.id === id);
|
|
if (!item || item.status === 'uploading') return;
|
|
item.el.remove();
|
|
items = items.filter((i) => i.id !== id);
|
|
refresh();
|
|
}
|
|
|
|
function refresh() {
|
|
const has = items.length > 0;
|
|
emptyEl.style.display = has ? 'none' : 'flex';
|
|
bar.style.display = has ? 'block' : 'none';
|
|
pickBtn.textContent = has ? 'Add more photos' : 'Choose photos';
|
|
updateButton();
|
|
}
|
|
|
|
function pending() { return items.filter((i) => i.status !== 'ok'); }
|
|
|
|
function updateButton() {
|
|
const n = pending().length;
|
|
postBtn.disabled = posting || n === 0;
|
|
postBtn.textContent = posting
|
|
? 'Posting…'
|
|
: n === 0 ? 'All posted' : (n === 1 ? 'Post 1 photo' : `Post ${n} photos`);
|
|
}
|
|
|
|
function setStatus(item, cls, html) {
|
|
const s = item.el.querySelector('.c-status');
|
|
s.className = 'c-status ' + cls;
|
|
s.innerHTML = html;
|
|
}
|
|
|
|
function setDisabled(item, disabled) {
|
|
item.el.querySelectorAll('input').forEach((i) => (i.disabled = disabled));
|
|
item.el.querySelector('.c-remove').disabled = disabled;
|
|
}
|
|
|
|
async function postOne(item) {
|
|
item.status = 'uploading';
|
|
setDisabled(item, true);
|
|
setStatus(item, 'up', 'Uploading…');
|
|
|
|
const form = new FormData();
|
|
// Send under the deduped slug so the server (which slugs from the
|
|
// filename) can't overwrite another photo in the same batch.
|
|
form.append('image', item.file, item.slug + item.ext);
|
|
form.append('caption', item.el.querySelector('.c-caption').value);
|
|
form.append('date', item.el.querySelector('.c-date').value);
|
|
form.append('tags', item.el.querySelector('.c-tags').value);
|
|
|
|
try {
|
|
const res = await fetch('/upload', { method: 'POST', body: form });
|
|
const text = (await res.text()).trim();
|
|
if (res.ok) {
|
|
item.status = 'ok';
|
|
const slug = text.replace(/^uploaded\s+/, '').replace(/\.[^.]+$/, '');
|
|
setStatus(item, 'ok', '✓ posted · <a href="/photo/' + encodeURIComponent(slug) + '/" target="_blank" rel="noopener">view</a>');
|
|
} else {
|
|
item.status = 'error';
|
|
setDisabled(item, false);
|
|
setStatus(item, 'err', '✗ ' + (text || res.status));
|
|
}
|
|
} catch (err) {
|
|
item.status = 'error';
|
|
setDisabled(item, false);
|
|
setStatus(item, 'err', '✗ ' + err.message);
|
|
}
|
|
}
|
|
|
|
postBtn.addEventListener('click', async () => {
|
|
if (posting) return;
|
|
posting = true;
|
|
updateButton();
|
|
if (window.TagComplete) window.TagComplete.invalidate();
|
|
|
|
// Sequential: gentler on mobile connections, and the rebuild is debounced
|
|
// server-side anyway.
|
|
const todo = pending();
|
|
let done = 0;
|
|
for (const item of todo) {
|
|
await postOne(item);
|
|
done++;
|
|
summary.textContent = `${done}/${todo.length} processed`;
|
|
}
|
|
|
|
posting = false;
|
|
const ok = items.filter((i) => i.status === 'ok').length;
|
|
const failed = items.filter((i) => i.status === 'error').length;
|
|
summary.textContent = `${ok} posted` + (failed ? `, ${failed} failed (press Post to retry)` : '');
|
|
updateButton();
|
|
});
|
|
|
|
// Read DateTimeOriginal from a JPEG's EXIF APP1 segment. Returns "YYYY-MM-DD"
|
|
// or null if the file isn't a JPEG, has no EXIF, or lacks the tag.
|
|
async function readExifDate(file) {
|
|
if (!/jpe?g$/i.test(file.type) && !/\.jpe?g$/i.test(file.name)) return null;
|
|
const buf = await file.slice(0, 65536).arrayBuffer();
|
|
const view = new DataView(buf);
|
|
if (view.getUint16(0) !== 0xFFD8) return null;
|
|
|
|
let offset = 2;
|
|
while (offset + 4 < view.byteLength) {
|
|
const marker = view.getUint16(offset);
|
|
if (marker < 0xFF00) return null;
|
|
const size = view.getUint16(offset + 2);
|
|
if (marker === 0xFFE1 && view.getUint32(offset + 4) === 0x45786966) {
|
|
const tiff = offset + 10;
|
|
const little = view.getUint16(tiff) === 0x4949;
|
|
const get16 = (o) => view.getUint16(o, little);
|
|
const get32 = (o) => view.getUint32(o, little);
|
|
const ifd0 = tiff + get32(tiff + 4);
|
|
|
|
let exifIfd = 0;
|
|
const n = get16(ifd0);
|
|
for (let i = 0; i < n; i++) {
|
|
const e = ifd0 + 2 + i * 12;
|
|
if (get16(e) === 0x8769) { exifIfd = tiff + get32(e + 8); break; }
|
|
}
|
|
if (!exifIfd) return null;
|
|
|
|
const en = get16(exifIfd);
|
|
for (let i = 0; i < en; i++) {
|
|
const e = exifIfd + 2 + i * 12;
|
|
if (get16(e) === 0x9003) {
|
|
const count = get32(e + 4);
|
|
const dataOff = count > 4 ? tiff + get32(e + 8) : e + 8;
|
|
let s = '';
|
|
for (let k = 0; k < count - 1; k++) s += String.fromCharCode(view.getUint8(dataOff + k));
|
|
const m = s.match(/^(\d{4}):(\d{2}):(\d{2})/);
|
|
return m ? `${m[1]}-${m[2]}-${m[3]}` : null;
|
|
}
|
|
}
|
|
return null;
|
|
}
|
|
offset += 2 + size;
|
|
}
|
|
return null;
|
|
}
|
|
</script>
|
|
<script src="/static/session.js"></script>
|
|
</body>
|
|
</html>
|