From 83fc6052adb0f6e663fd00593852357593a0808e Mon Sep 17 00:00:00 2001
From: Maxwell Jeffress <max@maxwellj.xyz>
Date: Mon, 25 Nov 2024 14:25:42 +1100
Subject: [PATCH] Add file uploads

---
 client-web/index.css  |  6 ++++
 client-web/index.html |  2 ++
 client-web/index.js   | 74 ++++++++++++++++++++++++++++++++++++++++++-
 3 files changed, 81 insertions(+), 1 deletion(-)

diff --git a/client-web/index.css b/client-web/index.css
index 47b1212..801005b 100644
--- a/client-web/index.css
+++ b/client-web/index.css
@@ -170,6 +170,12 @@ body {
     width: 100%;
 }
 
+.file {
+    float: left;
+    border-radius: 10px;
+    margin: 5px 0;
+}
+
 /* Create a container for message input and send button */
 .input-container {
     display: flex;
diff --git a/client-web/index.html b/client-web/index.html
index 581b442..fb774b5 100644
--- a/client-web/index.html
+++ b/client-web/index.html
@@ -35,7 +35,9 @@
                     <div id="users" class="suttle"></div>
                     <div id="messagebox" class="box" style="height: 600px;"><div></div></div>
                     <div id="typing" class="suttle"></div>
+                    <div id="upload" class="suttle" style="display: none;"><input type="file" id="fileupload"><button class="bluebutton" onclick="uploadFile()">Upload</button></input></div>
                     <div class="input-container">
+                        <button onclick="showFileUpload()" class="bluebutton">📁</button>
                         <input type="text" id="messageInput" placeholder="Send a message...">
                         <button onclick="sendMessage()" class="bluebutton">Send</button>
                     </div>
diff --git a/client-web/index.js b/client-web/index.js
index 7727e02..360b601 100644
--- a/client-web/index.js
+++ b/client-web/index.js
@@ -62,7 +62,16 @@ function getSignupUrl() {
 
     return `${protocol}://${cleanUrl}:${serverPort}/api/createaccount/`;
 }
+function getUploadUrl() {
+    const serverUrl = document.getElementById('serverUrl').value.trim();
+    const serverPort = document.getElementById('serverPort').value;
+    const useWss = document.getElementById('securityStatus').checked;
+    const protocol = useWss ? 'https' : 'http';
 
+    const cleanUrl = serverUrl.replace(/^(https?:\/\/|wss?:\/\/)/, '');
+
+    return `${protocol}://${cleanUrl}:${serverPort}/api/upload`;
+}
 function connect() {
     username = document.getElementById('username').value;
     password = document.getElementById('password').value;
@@ -147,6 +156,23 @@ function connect() {
                 }
                 return;
             }
+            if (message.type == "file") {
+                const messagesDiv = document.getElementById('messagebox');
+                const fileElement = document.createElement('embed');
+                if (fileElement) {
+                    if (messagesDiv) {
+                        messagesDiv.appendChild(fileElement);
+                        messagesDiv.scrollTop = messagesDiv.scrollHeight;
+                        fileElement.className = "file";
+                        fileElement.src = message.content;
+                        fileElement.height = 200;
+                        fileElement.addEventListener("click", function() {
+                            window.open(message.content, "_blank");
+                        });
+                    }
+                }
+                return;
+            }
             const messagesDiv = document.getElementById('messagebox');
             const messageElement = document.createElement('div');
             if (messageElement) {
@@ -176,7 +202,7 @@ function sendMessage() {
         "username": username,
         "token": md5(password),
         "content": message
-    }
+        }
 
     if (processedMessage && ws && ws.readyState === WebSocket.OPEN) {
         ws.send(JSON.stringify(processedMessage));
@@ -206,6 +232,52 @@ function sendMessage() {
     }
 }
 
+function showFileUpload() {
+    const fileUploadElement = document.getElementById("upload");
+    if (fileUploadElement) {
+        fileUploadElement.style.display = "block";
+    }
+}
+
+async function uploadFile() {
+    console.log("placeholder");
+    const fileInput = document.getElementById("fileupload");
+
+    if (!fileInput.files.length) {
+        alert("Please add a file!");
+        return;
+    }
+    const formData = new FormData();
+    formData.append("file", fileInput.files[0]);
+    try {
+        const response = await fetch(getUploadUrl(), {
+            method: 'POST',
+            mode: "no-cors",
+            body: formData
+        });
+        if (response.ok) {
+            const result = await response.text();
+            const processedMessage = {
+                "type": "message",
+                "username": username,
+                "token": md5(password),
+                "content": `Sent a file`
+            }
+            if (processedMessage && ws && ws.readyState === WebSocket.OPEN) {
+                ws.send(JSON.stringify(processedMessage));
+            }
+        } else {
+            alert("Something went wrong lmao");
+        }
+    } catch (error) {
+        alert(error);
+    }
+    const fileUploadElement = document.getElementById("upload");
+    if (fileUploadElement) {
+        fileUploadElement.style.display = "none";
+    }
+}
+
 document.getElementById('messageInput').addEventListener('keypress', (event) => {
     if (event.key === 'Enter') {
         sendMessage();