From de6b8ddce8705a78b2a09a9cd080627eb4b2157d Mon Sep 17 00:00:00 2001
From: Davide Scaini <davide.scaini@alumni.cern>
Date: Mon, 4 May 2026 12:21:07 +0200
Subject: [PATCH] Add image upload UI and /assets Vite proxy to PageEditor

---
 astro.config.mjs                 |  1 +
 src/components/PageEditor.svelte | 41 +++++++++++++++++++++++++++++++-
 2 files changed, 41 insertions(+), 1 deletion(-)

diff --git a/astro.config.mjs b/astro.config.mjs
index 8fe3bde..5ee3171 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -79,6 +79,7 @@ export default defineConfig({
         '/api': 'http://localhost:8001',
         '/pages': 'http://localhost:8001',
         '/stories': 'http://localhost:8001',
+        '/assets': 'http://localhost:8001',
         '/rebuild': 'http://localhost:8001',
       },
     },
diff --git a/src/components/PageEditor.svelte b/src/components/PageEditor.svelte
index 49a775f..955174a 100644
--- a/src/components/PageEditor.svelte
+++ b/src/components/PageEditor.svelte
@@ -9,6 +9,9 @@
   let saveStatus = '';
   let savedUrl = '';
   let errorMsg = '';
+  let uploading = false;
+  let dragOver = false;
+  let fileInput: HTMLInputElement;
 
   function reset(detail: { slug?: string; apiBase?: string }) {
     apiBase = detail.apiBase ?? '/pages';
@@ -76,6 +79,23 @@
     }
   }
 
+  async function uploadFiles(files: FileList | File[]) {
+    uploading = true;
+    try {
+      for (const file of Array.from(files)) {
+        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()}`; continue; }
+        const d = await r.json();
+        const ref = `\n![${d.filename.replace(/\.[^.]+$/, '')}](${d.url})`;
+        content = content.trimEnd() + ref;
+      }
+    } finally {
+      uploading = false;
+    }
+  }
+
   function handleKeydown(e: KeyboardEvent) {
     if (e.key === 'Escape') open = false;
     if ((e.metaKey || e.ctrlKey) && e.key === 's') { e.preventDefault(); save(); }
@@ -116,7 +136,7 @@
       <input
         type="text"
         bind:value={slug}
-        placeholder="nome-pagina"
+        placeholder="nome-pagina  o  cartella/nome"
         class="bg-transparent text-sm font-mono outline-none flex-1 min-w-0"
         style="color: var(--text-2)"
         autofocus
@@ -167,6 +187,25 @@
     style="color: var(--text-2)"
     placeholder="Scrivi in markdown…"
     spellcheck="false"
+    on:dragover|preventDefault={() => dragOver = true}
+    on:dragleave={() => dragOver = false}
+    on:drop|preventDefault={e => { dragOver = false; if (e.dataTransfer?.files) uploadFiles(e.dataTransfer.files); }}
   ></textarea>
+
+  <!-- Image upload bar -->
+  <div
+    class="shrink-0 flex items-center gap-3 px-4 py-2 border-t text-xs transition-colors"
+    style="border-color: var(--border); background: {dragOver ? 'var(--bg-2)' : 'transparent'}"
+  >
+    <button
+      on:click={() => fileInput.click()}
+      disabled={uploading}
+      class="text-zinc-500 hover:text-zinc-300 transition-colors disabled:opacity-40"
+      title="Carica immagine"
+    >{uploading ? 'Caricamento…' : '+ Immagine'}</button>
+    <span class="text-zinc-600">oppure trascina un file nell'editor</span>
+    <input bind:this={fileInput} type="file" accept="image/*" multiple class="hidden"
+      on:change={e => e.currentTarget.files && uploadFiles(e.currentTarget.files)} />
+  </div>
 </div>
 {/if}