update

Author: Maxhu787

chat/chat.php

@@ -34,6 +34,7 @@
  <button onclick="scrollBottom()" id="scrollBottom" title="Go to the bottom"><img src="../assets/images/up-arrow.svg" style="height: 20px;"></button>
  <form id="message-form">
  <input type="text" id="message-input" placeholder="Type your message...">
+ <input type="file" id="file-upload">
  <button type="submit" id="submit">Send</button>
  </form>
  </div>
@@ -48,12 +49,13 @@
  <script src="./index.js"></script>
  <script>
  $('main').hide();
- const url = "https://g4o2-api.maxhu787.repl.co";
- // const url = "http://localhost:3000";
+ // const url = "https://g4o2-api.maxhu787.repl.co";
+ const url = "http://localhost:3000";
  const socket = io(url);
  const messages = document.getElementById('messages');
  const form = document.getElementById('message-form');
  const input = document.getElementById('message-input');
+ const fileUpload = document.getElementById('file-upload');
  const submitBtn = document.getElementById('submit');
  const user_id = '<?= $_SESSION['user_id'] ?>';
  // const user_id = parseInt(sessionStorage.getItem("user_id"));
@@ -175,6 +177,12 @@ function escapeHtml(text) {
  chatScroll()
  });
 
+ socket.on('image-submit', function(imageDetails) {
+ const image = new Message(imageDetails['message'], imageDetails['message_date'], imageDetails['user_id'], imageDetails['username'], imageDetails['pfp']);
+ image.appendMessage();
+ chatScroll()
+ });
+
  socket.on('message-error', function(err) {
  document.location.href = `https://http.cat/${err}`;
  })
@@ -191,10 +199,41 @@ function escapeHtml(text) {
  }
  socket.emit('message-submit', messageDetails);
  input.value = '';
- let noMsgElement = document.getElementById('no-msg');
- if (noMsgElement && getComputedStyle(noMsgElement).display !== "none") {
- noMsgElement.style.display = "none";
- }
+ // let noMsgElement = document.getElementById('no-msg');
+ // if (noMsgElement && getComputedStyle(noMsgElement).display !== "none") {
+ // noMsgElement.style.display = "none";
+ // }
+ }
+ if (fileUpload.value) {
+ const formData = new FormData();
+ formData.append('image', fileUpload.files[0]);
+
+ fetch(url.concat(`/upload-image`), {
+ method: 'POST',
+ body: formData
+ })
+ .then(response => {
+ if (!response.ok) {
+ throw new Error('Network response was not ok');
+ }
+ return response.json();
+ })
+ .then(data => {
+ console.log('Image upload successful:', data);
+ let date = new Date().toUTCString()
+ let temp = url.concat('/uploads/')
+ let message = temp.concat(data['filename'])
+ imageDetails = {
+ message: message,
+ message_date: date,
+ user_id: user_id
+ }
+ socket.emit('image-submit', imageDetails);
+ })
+ .catch(error => {
+ console.error('Error uploading image:', error);
+ });
+ fileUpload.value = ''
  }
  });
 

chat/css/chat.css

@@ -129,9 +129,11 @@ a:hover {
 #message-form {
  flex: .7;
  display: flex;
+
+ flex-direction: row;
 }
 
-#message-form input {
+#message-form input[type='text'] {
  font-size: 14px;
  padding-left: 12px;
  border-radius: 5px;
@@ -141,6 +143,10 @@ a:hover {
  flex: 7;
 }
 
+#message-form input[type='file'] {
+ flex: 4;
+}
+
 #message-form button {
  flex: 1;
  cursor: pointer;

chat/index.js

@@ -1024,6 +1024,12 @@ class Message {
 
  const urlRegex = new RegExp('(https?://[^\\s]+\\.[^\\s]+)', 'gi');
 
+ const imageImbedRegex = new RegExp('https?:\/\/localhost:3000\/uploads\/\w+\.\w+$', 'gi');
+
+ if(imageImbedRegex.test(this.message)) {
+ } else {
+ 
+ }
  const messageBodyDiv = document.createElement("div");
  messageBodyDiv.classList.add("message-body");
 
@@ -1039,7 +1045,6 @@ class Message {
  });
 
  messageBodyDiv.appendChild(messageSpan);
-
  messageContentDiv.appendChild(messageHeaderDiv);
  messageContentDiv.appendChild(messageBodyDiv);
 
@@ -1144,5 +1149,4 @@ class User {
  pElement.textContent = `User ${this.username} disconnected`;
  document.getElementById("messages").appendChild(pElement);
  }
-}
-
+}

pdo.php

@@ -2,7 +2,7 @@
 session_start();
 ob_start();
 ini_set('display_errors', 0);
-
+/*
 $HOST = 'sql12.freemysqlhosting.net';
 $PORT = 3306;
 $DB_NAME = 'sql12561191';
@@ -14,7 +14,7 @@
  $DB_PASSWORD
 );
 $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
-/*
+*/
 $HOST = 'localhost';
 $PORT = 3306;
 $DB_NAME = 'sql12561191';
@@ -26,4 +26,3 @@
  $DB_PASSWORD
 );
 $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
-*/