add: images in messages for supporters

app/public/messages.js

@@ -132,6 +132,14 @@ function create_message(e) {
 
     const body = new FormData();
 
+    // attach images
+    if (e.target.images) {
+        for (const file of e.target.images.files) {
+            body.append(file.name, file);
+        }
+    }
+
+    // add json body
     body.append(
         "body",
         JSON.stringify({
@@ -139,11 +147,13 @@ function create_message(e) {
         }),
     );
 
+    // send request
     fetch(`/api/v1/messages/${STATE.chat_id}`, { method: "POST", body })
         .then((res) => res.json())
         .then((res) => {
             if (res.ok) {
                 e.target.reset();
+                document.getElementById("images_zone").classList.add("hidden");
             } else {
                 show_message(res.message, res.ok);
             }
@@ -350,3 +360,38 @@ function unpin_message(id) {
             show_message(res.message, res.ok);
         });
 }
+
+function display_pending_images(e) {
+    document.getElementById("images_zone").innerHTML = "";
+    document.getElementById("images_zone").classList.remove("hidden");
+
+    if (e.target.files.length < 1) {
+        document.getElementById("images_zone").classList.add("hidden");
+        return;
+    }
+
+    let idx = 0;
+    for (const file of e.target.files) {
+        document.getElementById("images_zone").innerHTML +=
+            `<button class="button surface" onclick="remove_file_from_picker('images', ${idx})">${file.name}</button>`;
+        idx += 1;
+    }
+}
+
+function remove_file_from_picker(input_id, idx) {
+    const input = document.getElementById(input_id);
+    const files = Array.from(input.files);
+    files.splice(idx - 1, 1);
+
+    // update files
+    const list = new DataTransfer();
+
+    for (item of files) {
+        list.items.add(item);
+    }
+
+    input.files = list.files;
+
+    // render
+    display_pending_images({ target: input });
+}

app/public/style.css

@@ -822,3 +822,18 @@ menu.col {
 .message:focus .dropdown.hidden {
     display: flex !important;
 }
+
+.message img {
+    max-width: 50dvw;
+    max-height: 25dvh;
+}
+
+.message .upload {
+    border-radius: var(--radius);
+    box-shadow: var(--shadow-x-offset) var(--shadow-y-offset) var(--shadow-size)
+        var(--color-shadow);
+}
+
+.message .body p:last-of-type {
+    margin: 0 !important;
+}