From ccb123318152115596e5319b075213bf6b7e8fbd Mon Sep 17 00:00:00 2001
From: Adrian Victor <adrianvictor@disroot.org>
Date: Tue, 14 Jul 2026 16:28:33 -0300
Subject: [PATCH] Add functionality to attachment button, fix escape ev
 listener preventing all events default behavior.

---
 app.js     | 19 +++++++++++++++++--
 index.html |  3 ++-
 style.css  |  4 ++--
 ui.js      |  4 ++--
 utils.js   | 24 ++++++++++++++++++++++++
 waha.js    | 24 +++++++++++++++++++++++-
 6 files changed, 70 insertions(+), 8 deletions(-)

diff --git a/app.js b/app.js
index ab3e33f..38586be 100644
--- a/app.js
+++ b/app.js
@@ -34,9 +34,8 @@ document.addEventListener('DOMContentLoaded', async () => {
 
 function setupEventListeners() {
     document.addEventListener('keydown', (e) => {
-        e.preventDefault();
-
         if (e.code == "Escape") {
+            e.preventDefault();
             ui.toggleChatState();
         }
     });
@@ -75,6 +74,14 @@ function setupEventListeners() {
         if (e.target == e.currentTarget) ui.toggleChatBottomBar();
     });
 
+    elements.attachmentBtn.addEventListener('click', () => {
+        elements.attachmentInput.click();
+    })
+    elements.attachmentInput.addEventListener('change', function () {
+        const firstFile = this.files[0];
+        sendFileMessage(firstFile);
+    })
+
     elements.backToSidebarBtn.addEventListener('click', () => {
         elements.sidebar.classList.remove('hidden');
         elements.activeChatContainer.classList.add('hidden');
@@ -281,6 +288,14 @@ async function sendMessage() {
     }
 }
 
+async function sendFileMessage(file) {
+    try {
+        console.log(await waha.sendFileMessage(activeChatState.id, file));
+    } catch (error) {
+        console.error(error.message);
+    }
+}
+
 function openSettings() {
     elements.inputWahaUrl.value = config.wahaUrl;
     elements.inputSession.value = config.session;
diff --git a/index.html b/index.html
index 631cbcf..02bbde6 100644
--- a/index.html
+++ b/index.html
@@ -117,7 +117,8 @@
                 </footer>
                 <!-- Bottom Bar -->
                 <footer id="chat-bottom-bar" class="chat-expanded-panel alternate-panel collapsed">
-                    <button class="icon-btn send-btn mif-attachment mif-2x" title="Attach file"></button>
+                    <input id="attachment-input" style="display: none;" type="file">
+                    <button id="attachment-btn" class="icon-btn send-btn mif-attachment mif-2x" title="Attach file"></button>
                 </footer>
             </div>
         </main>
diff --git a/style.css b/style.css
index 1cbebd8..a195358 100644
--- a/style.css
+++ b/style.css
@@ -618,13 +618,13 @@ input:focus {
     transform: translateY(100%);
 }
 
-.alternate-panel button {
+.alternate-panel button, .alternate-panel input {
     border: medium solid white;
     border-radius: 100%;
     background-color: transparent;
 }
 
-.alternate-panel button:hover {
+.alternate-panel button:hover, .alternate-panel input:hover {
     border-color: white;
     background-color: white;
     color: black;
diff --git a/ui.js b/ui.js
index a3b6181..8327b88 100644
--- a/ui.js
+++ b/ui.js
@@ -31,6 +31,8 @@ export const elements = {
     chatBottomBar: document.getElementById('chat-bottom-bar'),
     chatBottomBarBtn: document.getElementById('chat-bottom-bar-btn'),
     chatInputPanel: document.getElementById('chat-input-panel'),
+    attachmentInput: document.getElementById('attachment-input'),
+    attachmentBtn: document.getElementById('attachment-btn'),
 };
 
 export const ui = {
@@ -90,7 +92,6 @@ export const ui = {
         }
         
         for (const chat of chats) {
-            console.log(chat);
             const li = document.createElement('li');
             li.className = `chat-item ${activeChat && activeChat.id === chat.id ? 'active' : ''}`;
             li.dataset.id = chat.id;
@@ -142,7 +143,6 @@ export const ui = {
     * Append a single message (used for optimistic updates immediately upon sending)
     */
     appendSingleMessage(msg, activeChatName, userID, chatId) {
-        console.log(msg);
         const isOutgoing = msg.fromMe || msg.sender === 'me';
         
         const groupDiv = document.createElement('div');
diff --git a/utils.js b/utils.js
index 8ab5f29..e9bea41 100644
--- a/utils.js
+++ b/utils.js
@@ -78,4 +78,28 @@ export function compensateMessageOrdering(messages) {
 
     // Clean up temporary property
     return msgs.map(({ _time, ...m }) => m);
+}
+
+export function getBase64(file) {
+    return new Promise((resolve, reject) => {
+        console.log("Reading file...", file);
+
+        const reader = new FileReader();
+
+        reader.onload = () => {
+            resolve(reader.result.split(",")[1]);
+        };
+
+        reader.onerror = (e) => {
+            console.error("Error", e);
+            reject(e);
+        };
+
+        reader.onabort = () => {
+            console.log("Aborted");
+            reject(new Error("Aborted"));
+        };
+
+        reader.readAsDataURL(file);
+    });
 }
\ No newline at end of file
diff --git a/waha.js b/waha.js
index 5d4ae69..4ce4abf 100644
--- a/waha.js
+++ b/waha.js
@@ -1,4 +1,5 @@
 import { config } from "./config.js";
+import { getBase64 } from "./utils.js";
 
 async function request(path, options = {}) {
     const url = `${config.wahaUrl}${path}`;
@@ -11,7 +12,7 @@ async function request(path, options = {}) {
         headers['X-Api-Key'] = config.apiKey;
     }
 
-    console.log(`[WAHA] ${options.method || 'GET'} ${url}`, options.body ? JSON.parse(options.body) : '');
+    // console.log(`[WAHA] ${options.method || 'GET'} ${url}`, options.body ? JSON.parse(options.body) : '');
 
     const response = await fetch(url, { ...options, headers });
     if (!response.ok) {
@@ -139,5 +140,26 @@ export const waha = {
                 session: config.session
             })
         });
+    },
+
+    async sendFileMessage(chatId, file) {
+        const fileBase64 = await getBase64(file);
+        console.log(fileBase64)
+        const body = {
+            method: 'POST',
+            body: JSON.stringify({
+                chatId,
+                file: {
+                    mimetype: file.type,
+                    filename: file.name,
+                    data: fileBase64
+                },
+                session: config.session
+            })
+        };
+        console.log(body);
+        const result = await request('/api/sendFile', body);
+        console.log(result);
+        return result;
     }
 };