Image attachment uploads

5 files changed, 53 insertions, 3 deletions

diff --git a/templates/activities/_image_upload.html b/templates/activities/_image_upload.html
new file mode 100644
index 0000000..974884a
--- /dev/null
+++ b/templates/activities/_image_upload.html
@@ -0,0 +1,15 @@
+<form
+  hx-encoding='multipart/form-data'
+  hx-post='{% url "compose_image_upload" %}'
+  hx-target="this"
+  hx-swap="outerHTML"
+  _="on htmx:xhr:progress(loaded, total)
+       set #attachmentProgress.value to (loaded/total)*100">
+    {% csrf_token %}
+    {% include "forms/_field.html" with field=form.image %}
+    {% include "forms/_field.html" with field=form.description %}
+    <div class="buttons">
+        <button _="on click show #attachmentProgress with display:block then hide me">Upload</button>
+        <progress id="attachmentProgress" value="0" max="100"></progress>
+    </div>
+</form>
diff --git a/templates/activities/_image_uploaded.html b/templates/activities/_image_uploaded.html
new file mode 100644
index 0000000..ad03120
--- /dev/null
+++ b/templates/activities/_image_uploaded.html
@@ -0,0 +1,19 @@
+<div class="uploaded-image">
+    <input type="hidden" name="attachment" value="{{ attachment.pk }}">
+    <img src="{{ attachment.thumbnail_url }}">
+    <p>
+        {{ attachment.name|default:"(no description)" }}
+    </p>
+    <div class="buttons">
+        <a class="button delete left" _="on click remove closest .uploaded_image">Remove</a>
+    </div>
+</div>
+{% if request.htmx %}
+<a class="button add-image"
+    hx-get='{% url "compose_image_upload" %}'
+    hx-target="this"
+    hx-swap="outerHTML"
+    _="on load if beep! length of beep! <.uploaded-image/> > 3 then hide me">
+    Add Image
+</a>
+{% endif %}
diff --git a/templates/activities/_post.html b/templates/activities/_post.html
index 1c3008b..2c84a02 100644
--- a/templates/activities/_post.html
+++ b/templates/activities/_post.html
@@ -73,7 +73,7 @@
         <div class="attachments">
             {% for attachment in post.attachments.all %}
                 {% if attachment.is_image %}
-                    <a href="{{ attachment.remote_url }}" class="image"><img src="{{ attachment.remote_url }}" title="{{ attachment.name }}"></a>
+                    <a href="{{ attachment.full_url }}" class="image"><img src="{{ attachment.thumbnail_url }}" title="{{ attachment.name }}"></a>
                 {% endif %}
             {% endfor %}
         </div>
diff --git a/templates/activities/compose.html b/templates/activities/compose.html
index 4809177..7065863 100644
--- a/templates/activities/compose.html
+++ b/templates/activities/compose.html
@@ -17,8 +17,24 @@
             {% include "forms/_field.html" with field=form.content_warning %}
             {% include "forms/_field.html" with field=form.visibility %}
         </fieldset>
+        <fieldset>
+            <legend>Images</legend>
+            {% if post %}
+                {% for attachment in post.attachments.all %}
+                    {% include "activities/_image_uploaded.html" %}
+                {% endfor %}
+            {% endif %}
+            {% if not post or post.attachments.count < 4 %}
+                <a class="button add-image"
+                    hx-get='{% url "compose_image_upload" %}'
+                    hx-target="this"
+                    hx-swap="outerHTML">
+                    Add Image
+                </a>
+            {% endif %}
+        </fieldset>
         <div class="buttons">
-            <button>{% if form.id.value %}Edit{% elif config_identity.toot_mode %}Toot!{% else %}Post{% endif %}</button>
+            <button>{% if post %}Save Edits{% elif config_identity.toot_mode %}Toot!{% else %}Post{% endif %}</button>
         </div>
     </form>
 {% endblock %}
diff --git a/templates/forms/_field.html b/templates/forms/_field.html
index 99db819..41f59d8 100644
--- a/templates/forms/_field.html
+++ b/templates/forms/_field.html
@@ -17,7 +17,7 @@
         {% endif %}
         {{ field }}
     </div>
-    {% if field.field.widget.input_type == "file" %}
+    {% if field.field.widget.input_type == "file" and field.value%}
         <img class="preview" src="{{ field.value }}">
     {% endif %}
 </div>