From 68c3a5d84ec1cf1ab846eb5ea4f9904fabf6a048 Mon Sep 17 00:00:00 2001
From: trisua <me@trisua.com>
Date: Sun, 11 May 2025 15:34:09 -0400
Subject: [PATCH] add: ability to upload images while creating a reply or
 answer

---
 crates/app/src/public/html/misc/requests.html | 33 +++++++++++++++----
 crates/app/src/public/html/post/post.html     | 12 ++++++-
 2 files changed, 38 insertions(+), 7 deletions(-)

diff --git a/crates/app/src/public/html/misc/requests.html b/crates/app/src/public/html/misc/requests.html
index c991d00..ca3e46f 100644
--- a/crates/app/src/public/html/misc/requests.html
+++ b/crates/app/src/public/html/misc/requests.html
@@ -108,7 +108,14 @@
                         ></textarea>
                     </div>
 
+                    <div id="files_list" class="flex gap-2 flex-wrap"></div>
+
                     <div class="flex gap-2">
+                        {{ components::emoji_picker(element_id="content",
+                        render_dialog=true) }} {% if is_supporter %} {{
+                        components::file_picker(files_list_id="files_list") }}
+                        {% endif %}
+
                         <button class="primary">{{ text "requests:label.answer" }}</button>
                         <button type="button" class="red quaternary" onclick="trigger('me::remove_question', ['{{ question[0].id }}'])">{{ text "general:action.delete" }}</button>
                         <button type="button" class="red quaternary" onclick="trigger('me::ip_block_question', ['{{ question[0].id }}'])">{{ text "auth:action.ip_block" }}</button>
@@ -166,16 +173,30 @@
     window.answer_question_from_form = async (e, answering) => {
         e.preventDefault();
         await trigger("atto::debounce", ["posts::create"]);
-        fetch("/api/v1/posts", {
-            method: "POST",
-            headers: {
-                "Content-Type": "application/json",
-            },
-            body: JSON.stringify({
+
+        // create body
+        const body = new FormData();
+
+        if (e.target.file_picker) {
+            for (const file of e.target.file_picker.files) {
+                body.append(file.name, file);
+            }
+        }
+
+        body.append(
+            "body",
+            JSON.stringify({
                 content: e.target.content.value,
                 community: "{{ config.town_square }}",
                 answering,
             }),
+        );
+
+        // ...
+        fetch("/api/v1/posts", {
+            method: "POST",
+
+            body,
         })
             .then((res) => res.json())
             .then((res) => {
diff --git a/crates/app/src/public/html/post/post.html b/crates/app/src/public/html/post/post.html
index f6d7d2c..2137ae9 100644
--- a/crates/app/src/public/html/post/post.html
+++ b/crates/app/src/public/html/post/post.html
@@ -43,9 +43,13 @@
                 ></textarea>
             </div>
 
+            <div id="files_list" class="flex gap-2 flex-wrap"></div>
+
             <div class="flex gap-2">
                 {{ components::emoji_picker(element_id="content",
-                render_dialog=true) }}
+                render_dialog=true) }} {% if is_supporter %} {{
+                components::file_picker(files_list_id="files_list") }} {% endif
+                %}
 
                 <button class="primary">
                     {{ text "communities:action.create" }}
@@ -294,6 +298,12 @@
         // create body
         const body = new FormData();
 
+        if (e.target.file_picker) {
+            for (const file of e.target.file_picker.files) {
+                body.append(file.name, file);
+            }
+        }
+
         body.append(
             "body",
             JSON.stringify({