From f784ab0c781d34aa710f5f7d66f18d295c0cc994 Mon Sep 17 00:00:00 2001
From: moanos <julian-samuel@gebuehr.net>
Date: Sat, 6 Sep 2025 16:06:12 +0200
Subject: [PATCH] feat: Restyle the image upload

---
 src/fellchensammlung/models.py                |  2 +-
 .../fellchensammlung/forms/form-image.html    | 78 ++++++++++++-------
 2 files changed, 50 insertions(+), 30 deletions(-)

diff --git a/src/fellchensammlung/models.py b/src/fellchensammlung/models.py
index c6e9f69..1ab40ba 100644
--- a/src/fellchensammlung/models.py
+++ b/src/fellchensammlung/models.py
@@ -343,7 +343,7 @@ class User(AbstractUser):
 
 
 class Image(models.Model):
-    image = models.ImageField(upload_to='images')
+    image = models.ImageField(upload_to='images', verbose_name=_("Bild"), help_text=_("Wähle ein Bild aus"))
     alt_text = models.TextField(max_length=2000, verbose_name=_('Alternativtext'),
                                 help_text=_("Beschreibe das Bild für blinde und sehbehinderte Menschen"))
     owner = models.ForeignKey(User, on_delete=models.CASCADE)
diff --git a/src/fellchensammlung/templates/fellchensammlung/forms/form-image.html b/src/fellchensammlung/templates/fellchensammlung/forms/form-image.html
index 0bdd388..8c946b4 100644
--- a/src/fellchensammlung/templates/fellchensammlung/forms/form-image.html
+++ b/src/fellchensammlung/templates/fellchensammlung/forms/form-image.html
@@ -4,40 +4,58 @@
 {% load widget_tweaks %}
 
 {% block content %}
-    <div>
-        {% blocktranslate %}
-            Lade hier ein Foto hoch - wähle den Titel wie du willst und mach bitte eine Bildbeschreibung,
-            damit die Fotos auch für blinde und sehbehinderte Personen zugänglich sind.
-        {% endblocktranslate %}
-        <p><a class="button" target="_blank"
-              href="https://www.dbsv.org/bildbeschreibung-4-regeln.html">{% translate 'Anleitung für Bildbeschreibungen' %}</a>
+    <div class="block">
+        <p>
+            {% blocktranslate %}
+                Lade hier ein Foto hoch. Füge bitte eine Bildbeschreibung hinzu,
+                damit die Fotos auch für blinde und sehbehinderte Personen zugänglich sind.
+            {% endblocktranslate %}
         </p>
     </div>
-    <form method="post" enctype="multipart/form-data">
-        {% csrf_token %}
-        <div class="field">
-            <label class="label" for="image">{{ form.image.label }}</label>
-            {{ form.image|add_class:"input"|attr:"id:image" }}
-        </div>
-
-        <!--- Image Preview: Only shown if image gets selected --->
-        <div class="field" id="image-preview-wrapper" style="display: none;">
-            <label class="label">{% translate "Vorschau" %}</label>
-            <div class="box has-text-centered">
-                <figure class="image is-256x256 is-inline-block">
-                    <img id="image-preview" src="" alt="{% translate 'Bildvorschau' %}" class="is-rounded">
-                </figure>
+    <div class="block">
+        <form method="post" enctype="multipart/form-data">
+            {% csrf_token %}
+            <div class="file has-name is-boxed is-primary is-">
+                <label class="file-label" for="image">
+                    {{ form.image|add_class:"file-input"|attr:"id:image" }}
+                    <span class="file-cta">
+                          <span class="file-icon">
+                            <i class="fas fa-upload"></i>
+                          </span>
+                          <span class="file-label">{{ form.image.help_text }}</span>
+                    </span>
+                    <span class="file-name" id="image-upload-filename">...</span>
+                </label>
             </div>
-        </div>
 
-        <div class="field">
-            <label class="label" for="alt-text">{{ form.alt_text.label }}</label>
-            {{ form.alt_text|add_class:"textarea"|attr:"id:alt-text"|attr:"rows:3" }}
-            <div class="is-danger">{{ form.alt_text.errors }}</div>
-        </div>
-        <input class="button is-primary" type="submit" value="{% translate "Speichern" %}">
-    </form>
+            <!--- Image Preview: Only shown if image gets selected --->
+            <div class="field" id="image-preview-wrapper" style="display: none;">
+                <label class="label">{% translate "Vorschau" %}</label>
+                <div class="box has-text-centered">
+                    <figure class="image is-256x256 is-inline-block">
+                        <img id="image-preview" src="" alt="{% translate 'Bildvorschau' %}" class="is-rounded">
+                    </figure>
+                </div>
+            </div>
 
+            <div class="field">
+                <label class="label" for="alt-text">{{ form.alt_text.label }}</label>
+                {{ form.alt_text|add_class:"textarea"|attr:"id:alt-text"|attr:"rows:3" }}
+                <div class="help">
+                    {{ form.alt_text.help_text }}
+                </div>
+                <div class="is-danger">{{ form.alt_text.errors }}</div>
+            </div>
+            <input class="button is-primary" type="submit" value="{% translate "Speichern" %}">
+        </form>
+    </div>
+
+    <div class="block">
+        <a class="button is-info is-warning is-fullwidth" target="_blank"
+           href="https://www.dbsv.org/bildbeschreibung-4-regeln.html">
+            <i class="fa-solid fa-link fa-fw"></i> {% translate 'Anleitung für Bildbeschreibungen' %}
+        </a>
+    </div>
 
 
     <script>
@@ -45,6 +63,7 @@
             const input = document.getElementById("image");
             const previewWrapper = document.getElementById("image-preview-wrapper");
             const preview = document.getElementById("image-preview");
+            const filename = document.getElementById("image-upload-filename");
 
             input.addEventListener("change", function () {
                 const file = this.files[0];
@@ -53,6 +72,7 @@
                     reader.onload = function (e) {
                         preview.src = e.target.result;
                         previewWrapper.style.display = "block";
+                        filename.innerText = file.name;
                     }
                     reader.readAsDataURL(file);
                 } else {