stephan/bloombase
1
0
Fork 0
Code Issues 9 Pull requests Projects Releases Packages Wiki Activity Actions

fix: photo upload UX — remove camera capture, auto-submit on pick, update hero via HTMX OOB

Browse source
This commit is contained in:
Stephan Kerkman 2026-05-30 21:21:04 +02:00
parent fdbe821c8a
commit 0f53adc6a8
2 changed files with 24 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
plants/templates/plants/partials/photo_gallery.html
View file

@ -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 %}

2
plants/templates/plants/plant_detail.html
View file

@ -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>