Add functionality to attachment button, fix escape ev listener preventing all events default behavior.

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;

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>

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;

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');

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);
+    });
 }

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;
     }
 };