Add file uploads

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