From 300f14eb421e24ae134be0169fa98abebf2dad5c Mon Sep 17 00:00:00 2001
From: Stephan Kerkman <stephan@kerkman.io>
Date: Sun, 31 May 2026 14:41:10 +0200
Subject: [PATCH] feat: replace native file input with styled button in photo
 gallery

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 plants/templates/plants/partials/photo_gallery.html | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/plants/templates/plants/partials/photo_gallery.html b/plants/templates/plants/partials/photo_gallery.html
index a59ec96..5a68e3e 100644
--- a/plants/templates/plants/partials/photo_gallery.html
+++ b/plants/templates/plants/partials/photo_gallery.html
@@ -38,8 +38,10 @@
           hx-encoding="multipart/form-data" hx-indicator="#photo-upload-spinner">
         {% csrf_token %}
         <div class="d-flex gap-2 align-items-center flex-wrap">
-            <input type="file" name="image" accept="image/*"
-                   class="form-control form-control-sm" style="max-width:220px;">
+            <label class="btn btn-sm btn-outline-secondary mb-0" for="photo-upload-input">📷 Choose photo</label>
+            <input type="file" id="photo-upload-input" name="image" accept="image/*" class="d-none"
+                   onchange="document.getElementById('photo-filename').textContent = this.files[0]?.name || ''">
+            <span id="photo-filename" class="text-muted small"></span>
             <button type="submit" class="btn btn-sm btn-outline-secondary">Upload</button>
             <span id="photo-upload-spinner" class="htmx-indicator text-muted small">Uploading…</span>
         </div>