Add hero image upload button for blog posts

This commit is contained in:
Davide Scaini
2026-05-07 12:27:33 +02:00
parent 4af3660653
commit d6eda096d9
+40
View File
@@ -17,6 +17,7 @@
let uploading = false;
let dragOver = false;
let fileInput: HTMLInputElement;
let heroFileInput: HTMLInputElement;
$: section = SECTIONS.find(s => s.slug === selectedSection) ?? null;
$: subs = section?.sub ?? [];
@@ -112,6 +113,35 @@
}
}
function setHeroImage(url: string) {
const line = `heroImage: ${url}`;
if (/^heroImage:/m.test(content)) {
content = content.replace(/^heroImage:.*$/m, line);
} else {
// Insert before the closing --- of the frontmatter block
const closeIdx = content.indexOf('\n---', content.indexOf('---') + 3);
if (closeIdx !== -1) {
content = content.slice(0, closeIdx) + '\n' + line + content.slice(closeIdx);
}
}
}
async function uploadHero(files: FileList | File[]) {
const file = Array.from(files)[0];
if (!file) return;
uploading = true;
try {
const fd = new FormData();
fd.append('file', file);
const r = await fetch('/api/assets', { method: 'POST', body: fd, credentials: 'include' });
if (!r.ok) { errorMsg = `Upload fallito: ${await r.text()}`; return; }
const d = await r.json();
setHeroImage(d.url);
} finally {
uploading = false;
}
}
async function uploadFiles(files: FileList | File[]) {
uploading = true;
try {
@@ -220,6 +250,16 @@
style="color: var(--accent); border-color: var(--accent)"
>Visualizza →</a>
{/if}
{#if apiBase === '/stories'}
<button
on:click={() => heroFileInput.click()}
disabled={uploading}
class="text-xs text-zinc-500 hover:text-zinc-300 transition-colors px-2 py-1 rounded border border-zinc-700 hover:border-zinc-500 disabled:opacity-40"
title="Imposta immagine di copertina"
>{uploading ? '…' : '+ Copertina'}</button>
<input bind:this={heroFileInput} type="file" accept="image/*" class="hidden"
on:change={e => e.currentTarget.files && uploadHero(e.currentTarget.files)} />
{/if}
{#if !isNew}
<button
on:click={deletePage}