Feature: File sharing support in chat

public/package.json

@@ -12,7 +12,7 @@
     "emoji-picker-react": "^3.5.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-icons": "^4.3.1",
+    "react-icons": "^4.12.0",
     "react-router-dom": "^6.2.1",
     "react-scripts": "5.0.0",
     "react-toastify": "^8.1.1",

public/src/components/ChatContainer.jsx

@@ -86,22 +86,25 @@ export default function ChatContainer({ currentChat, socket }) {
         <Logout />
       </div>
       <div className="chat-messages">
-        {messages.map((message) => {
-          return (
-            <div ref={scrollRef} key={uuidv4()}>
-              <div
-                className={`message ${
-                  message.fromSelf ? "sended" : "recieved"
-                }`}
-              >
-                <div className="content ">
-                  <p>{message.message}</p>
-                </div>
-              </div>
-            </div>
-          );
-        })}
+  {messages.map((message) => {
+    const isFile = typeof message.message === "string" && message.message.startsWith("/uploads/");
+    return (
+      <div ref={scrollRef} key={uuidv4()}>
+        <div className={`message ${message.fromSelf ? "sended" : "recieved"}`}>
+          <div className="content ">
+            {isFile ? (
+              <a href={`http://localhost:3001${message.message}`} target="_blank" rel="noopener noreferrer">
+                Download File
+              </a>
+            ) : (
+              <p>{message.message}</p>
+            )}
+          </div>
+        </div>
       </div>
+    );
+  })}
+</div>
       <ChatInput handleSendMsg={handleSendMsg} />
     </Container>
   );

public/src/components/ChatInput.jsx

@@ -3,23 +3,41 @@ import { BsEmojiSmileFill } from "react-icons/bs";
 import { IoMdSend } from "react-icons/io";
 import styled from "styled-components";
 import Picker from "emoji-picker-react";
+import axios from "axios";
+import { sendMessageRoute,host } from "../utils/APIRoutes";
+import { AiOutlinePaperClip } from "react-icons/ai";
 
 export default function ChatInput({ handleSendMsg }) {
   const [msg, setMsg] = useState("");
   const [showEmojiPicker, setShowEmojiPicker] = useState(false);
+  const [file, setFile] = useState(null);
   const handleEmojiPickerhideShow = () => {
     setShowEmojiPicker(!showEmojiPicker);
   };
 
+
   const handleEmojiClick = (event, emojiObject) => {
     let message = msg;
     message += emojiObject.emoji;
     setMsg(message);
   };
 
-  const sendChat = (event) => {
+  const handleFileChange = (e) => {
+    setFile(e.target.files[0]);
+  };
+
+  // Handle file upload and send
+  const sendChat = async (event) => {
     event.preventDefault();
-    if (msg.length > 0) {
+    if (file) {
+      const formData = new FormData();
+      formData.append("file", file);
+      const response = await axios.post(`${host}/api/messages/upload`, formData, {
+        headers: { "Content-Type": "multipart/form-data" },
+      });
+      handleSendMsg(response.data.fileUrl); // send file URL as message
+      setFile(null);
+    } else if (msg.length > 0) {
       handleSendMsg(msg);
       setMsg("");
     }
@@ -33,13 +51,23 @@ export default function ChatInput({ handleSendMsg }) {
           {showEmojiPicker && <Picker onEmojiClick={handleEmojiClick} />}
         </div>
       </div>
-      <form className="input-container" onSubmit={(event) => sendChat(event)}>
+      <form className="input-container" onSubmit={sendChat}>
         <input
           type="text"
           placeholder="type your message here"
           onChange={(e) => setMsg(e.target.value)}
           value={msg}
         />
+        {/* WhatsApp-style paperclip icon for file upload */}
+        <label htmlFor="file-upload" className="file-attach">
+          <AiOutlinePaperClip size={24} />
+        </label>
+        <input
+          id="file-upload"
+          type="file"
+          style={{ display: "none" }}
+          onChange={handleFileChange}
+        />
         <button type="submit">
           <IoMdSend />
         </button>
@@ -103,24 +131,33 @@ const Container = styled.div`
     border-radius: 2rem;
     display: flex;
     align-items: center;
-    gap: 2rem;
+    gap: 1rem;
     background-color: #ffffff34;
-    input {
-      width: 90%;
+    input[type="text"] {
+      width: 80%;
       height: 60%;
       background-color: transparent;
       color: white;
       border: none;
       padding-left: 1rem;
       font-size: 1.2rem;
-
       &::selection {
         background-color: #9a86f3;
       }
       &:focus {
         outline: none;
       }
     }
+    .file-attach {
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      color: #9a86f3;
+      margin-right: 0.5rem;
+      svg {
+        font-size: 1.7rem;
+      }
+    }
     button {
       padding: 0.3rem 2rem;
       border-radius: 2rem;
@@ -141,4 +178,4 @@ const Container = styled.div`
       }
     }
   }
-`;
+`;

public/src/utils/APIRoutes.js

@@ -1,4 +1,4 @@
-export const host = "http://localhost:5000";
+export const host = "http://localhost:3001";
 export const loginRoute = `${host}/api/auth/login`;
 export const registerRoute = `${host}/api/auth/register`;
 export const logoutRoute = `${host}/api/auth/logout`;