From 0f53adc6a81714e48a11d5f1b60c378f54c9af4b Mon Sep 17 00:00:00 2001
From: Stephan Kerkman <stephan@kerkman.io>
Date: Sat, 30 May 2026 21:21:04 +0200
Subject: [PATCH] =?UTF-8?q?fix:=20photo=20upload=20UX=20=E2=80=94=20remove?=
 =?UTF-8?q?=20camera=20capture,=20auto-submit=20on=20pick,=20update=20hero?=
 =?UTF-8?q?=20via=20HTMX=20OOB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../plants/partials/photo_gallery.html        | 26 ++++++++++++++++---
 plants/templates/plants/plant_detail.html     |  2 ++
 2 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/plants/templates/plants/partials/photo_gallery.html b/plants/templates/plants/partials/photo_gallery.html
index 7bcae6f..0a41fee 100644
--- a/plants/templates/plants/partials/photo_gallery.html
+++ b/plants/templates/plants/partials/photo_gallery.html
@@ -35,12 +35,30 @@
 
     <form method="post" action="{% url 'upload_photo' plant.pk %}" enctype="multipart/form-data"
           hx-post="{% url 'upload_photo' plant.pk %}" hx-target="#photo-gallery" hx-swap="outerHTML"
-          hx-encoding="multipart/form-data">
+          hx-encoding="multipart/form-data" hx-indicator="#photo-upload-spinner"
+          id="photo-upload-form">
         {% csrf_token %}
+        <input type="file" name="image" accept="image/*"
+               class="d-none" id="photo-file-input"
+               onchange="this.form.querySelector('#photo-upload-label').textContent = this.files[0]?.name ?? 'Add photo'; this.form.requestSubmit();">
         <div class="d-flex gap-2 align-items-center">
-            <input type="file" name="image" accept="image/*" capture="environment"
-                   class="form-control form-control-sm" style="max-width:220px;">
-            <button type="submit" class="btn btn-sm btn-outline-secondary">Upload</button>
+            <label for="photo-file-input" id="photo-upload-label"
+                   class="btn btn-sm btn-outline-secondary mb-0" style="cursor:pointer;">
+                Add photo
+            </label>
+            <span id="photo-upload-spinner" class="htmx-indicator text-muted small">Uploading…</span>
         </div>
     </form>
 </div>
+
+{% if request.htmx %}
+<div id="plant-hero-container" hx-swap-oob="true">
+{% if plant.species and plant.species.api_image_url %}
+<img src="{{ plant.species.api_image_url }}" class="plant-hero rounded mb-3" alt="{{ plant.species.common_name }}">
+{% elif plant.thumbnail_url %}
+<img src="{{ plant.thumbnail_url }}" class="plant-hero rounded mb-3" alt="{{ plant.name }}">
+{% else %}
+<div class="plant-hero-placeholder rounded mb-3">🌿</div>
+{% endif %}
+</div>
+{% endif %}
diff --git a/plants/templates/plants/plant_detail.html b/plants/templates/plants/plant_detail.html
index eff6f5a..97085b4 100644
--- a/plants/templates/plants/plant_detail.html
+++ b/plants/templates/plants/plant_detail.html
@@ -8,6 +8,7 @@
     <a href="{% url 'plant_edit' plant.pk %}" class="btn btn-sm btn-outline-secondary">✏️</a>
 </div>
 
+<div id="plant-hero-container">
 {% if plant.species and plant.species.api_image_url %}
 <img src="{{ plant.species.api_image_url }}" class="plant-hero rounded mb-3" alt="{{ plant.species.common_name }}">
 {% elif plant.thumbnail_url %}
@@ -15,6 +16,7 @@
 {% else %}
 <div class="plant-hero-placeholder rounded mb-3">🌿</div>
 {% endif %}
+</div>
 
 <div class="d-flex justify-content-between align-items-start mb-1">
     <div>