New bottom upload btn + images count

src/webui/js/gallery-editor.js

@@ -54,11 +54,35 @@ function renderGallery() {
     renderTags(i, img.tags || []);
   });
 
-  // Show/hide Remove All button
+  // Update gallery count (top)
+  const galleryCount = document.getElementById('gallery-count');
+  if (galleryCount) {
+    galleryCount.innerHTML = `<p>${galleryImages.length} photos</p>`;
+  }
+
+  // Update gallery count (bottom)
+  const galleryCountBottom = document.getElementById('gallery-count-bottom');
+  if (galleryCountBottom) {
+    galleryCountBottom.innerHTML = `<p>${galleryImages.length} photos</p>`;
+  }
+
+  // Show/hide Remove All button (top)
   const removeAllBtn = document.getElementById('remove-all-gallery');
   if (removeAllBtn) {
     removeAllBtn.style.display = galleryImages.length > 0 ? 'inline-block' : 'none';
   }
+
+  // Show/hide bottom upload row
+  const bottomGalleryUpload = document.getElementById('bottom-gallery-upload');
+  if (bottomGalleryUpload) {
+    bottomGalleryUpload.style.display = galleryImages.length > 0 ? 'flex' : 'none';
+  }
+
+  // Show/hide Remove All button (bottom)
+  const removeAllBtnBottom = document.getElementById('remove-all-gallery-bottom');
+  if (removeAllBtnBottom) {
+    removeAllBtnBottom.style.display = galleryImages.length > 0 ? 'inline-block' : 'none';
+  }
 }
 
 // --- Render tags for a single image ---
@@ -244,11 +268,35 @@ function renderHero() {
     container.appendChild(div);
   });
 
-  // Show/hide Remove All button
+  // Update hero count (top)
+  const heroCount = document.getElementById('hero-count');
+  if (heroCount) {
+    heroCount.innerHTML = `<p>${heroImages.length} photos</p>`;
+  }
+
+  // Update hero count (bottom)
+  const heroCountBottom = document.getElementById('hero-count-bottom');
+  if (heroCountBottom) {
+    heroCountBottom.innerHTML = `<p>${heroImages.length} photos</p>`;
+  }
+
+  // Show/hide Remove All button (top)
   const removeAllBtn = document.getElementById('remove-all-hero');
   if (removeAllBtn) {
     removeAllBtn.style.display = heroImages.length > 0 ? 'inline-block' : 'none';
   }
+
+  // Show/hide bottom upload row
+  const bottomHeroUpload = document.getElementById('bottom-hero-upload');
+  if (bottomHeroUpload) {
+    bottomHeroUpload.style.display = heroImages.length > 0 ? 'flex' : 'none';
+  }
+
+  // Show/hide Remove All button (bottom)
+  const removeAllBtnBottom = document.getElementById('remove-all-hero-bottom');
+  if (removeAllBtnBottom) {
+    removeAllBtnBottom.style.display = heroImages.length > 0 ? 'inline-block' : 'none';
+  }
 }
 
 // --- Save gallery to server ---
@@ -429,9 +477,13 @@ document.addEventListener('DOMContentLoaded', () => {
 
   // Bulk delete buttons
   const removeAllGalleryBtn = document.getElementById('remove-all-gallery');
+  const removeAllGalleryBtnBottom = document.getElementById('remove-all-gallery-bottom');
   const removeAllHeroBtn = document.getElementById('remove-all-hero');
+  const removeAllHeroBtnBottom = document.getElementById('remove-all-hero-bottom');
   if (removeAllGalleryBtn) removeAllGalleryBtn.onclick = () => showDeleteModal('gallery-all');
+  if (removeAllGalleryBtnBottom) removeAllGalleryBtnBottom.onclick = () => showDeleteModal('gallery-all');
   if (removeAllHeroBtn) removeAllHeroBtn.onclick = () => showDeleteModal('hero-all');
+  if (removeAllHeroBtnBottom) removeAllHeroBtnBottom.onclick = () => showDeleteModal('hero-all');
 });
 
 // --- Initialize ---

src/webui/js/upload.js

@@ -11,6 +11,7 @@ function hideLoader() {
   if (loader) loader.classList.remove("active");
 }
 
+
 // --- Upload gallery images ---
 const galleryInput = document.getElementById('upload-gallery');
 if (galleryInput) {
@@ -47,6 +48,58 @@ if (heroInput) {
     const formData = new FormData();
     for (const file of files) formData.append('files', file);
 
+    try {
+      const res = await fetch('/api/hero/upload', { method: 'POST', body: formData });
+      const data = await res.json();
+      hideLoader();
+      if (res.ok) {
+        showToast(`✅ ${data.uploaded.length} hero image(s) uploaded!`, "success");
+        if (typeof refreshHero === "function") refreshHero();
+      } else showToast('Error: ' + data.error, "error");
+    } catch(err) {
+      hideLoader();
+      console.error(err);
+      showToast('Server error!', "error");
+    } finally { e.target.value = ''; }
+  });
+}
+
+// --- Upload gallery images (bottom button) ---
+const galleryInputBottom = document.getElementById('upload-gallery-bottom');
+if (galleryInputBottom) {
+  galleryInputBottom.addEventListener('change', async (e) => {
+    const files = e.target.files;
+    if (!files.length) return;
+    showLoader("Uploading photos...");
+    const formData = new FormData();
+    for (const file of files) formData.append('files', file);
+
+    try {
+      const res = await fetch('/api/gallery/upload', { method: 'POST', body: formData });
+      const data = await res.json();
+      hideLoader();
+      if (res.ok) {
+        showToast(`✅ ${data.uploaded.length} gallery image(s) uploaded!`, "success");
+        if (typeof refreshGallery === "function") refreshGallery();
+      } else showToast('Error: ' + data.error, "error");
+    } catch(err) {
+      hideLoader();
+      console.error(err);
+      showToast('Server error!', "error");
+    } finally { e.target.value = ''; }
+  });
+}
+
+// --- Upload hero images (bottom button) ---
+const heroInputBottom = document.getElementById('upload-hero-bottom');
+if (heroInputBottom) {
+  heroInputBottom.addEventListener('change', async (e) => {
+    const files = e.target.files;
+    if (!files.length) return;
+    showLoader("Uploading hero photos...");
+    const formData = new FormData();
+    for (const file of files) formData.append('files', file);
+
     try {
       const res = await fetch('/api/hero/upload', { method: 'POST', body: formData });
       const data = await res.json();