add: added image attachments to messages

front/src/components/MessageComponent.tsx

@@ -131,6 +131,13 @@ export default function MessageComponent({ message, user, channel }: {
                     </div>
                 </div>
             </div>
+            {message.has_attachments == true && (
+                <div className="message-attachments">
+                    {message.attachments.map((attachment) => (
+                        <img src={`/api/attachments/${attachment.file_name}`} alt="attachment" className="message-attachment" />
+                    ))}
+                </div>
+            )}
             <div>
                 {message.content.toLocaleLowerCase().includes("gros cochon") && (
                     <img src="/pig.png" alt="Gros cochon" className="pig" />

front/src/pages/ChannelPage.tsx

@@ -23,8 +23,20 @@ export default function ChannelPage({socket}: {socket: WebSocket}) {
 
     function handleSubmit(e: React.FormEvent) {
         e.preventDefault();
+
+        const formData = new FormData();
+        const fileInput = document.getElementById("attachment") as HTMLInputElement;
+        if (fileInput.files) {
+            formData.append("attachment", fileInput.files[0]);
+        }
+        formData.append("token", token);
+        formData.append("message", message);
         axios
-            .post(`/api/channels/${name}/messages/send`, { token, message})
+            .post(`/api/channels/${name}/messages/send`, formData, { 
+                headers: {
+                    "Content-Type": "multipart/form-data",
+                }
+            })
             .then(() => {
                 setMessage("");
                 setSearchedUsers([]);
@@ -204,6 +216,7 @@ export default function ChannelPage({socket}: {socket: WebSocket}) {
                             onChange={(e) => setMessage(e.target.value)}
                             ref={ref}
                         />
+                        <input type="file" name="attachment" id="attachment" />
                         <button type="submit">Send</button>
                         {searchedUsers.length > 0 && (
                             <div className="mentions">

front/src/styles/MessageComponent.css

@@ -42,6 +42,17 @@
     max-height: 1em;
 }
 
+.message-attachments {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.message-attachment {
+    max-width: 100px;
+}
+
 .message-replies {
     width: 100%;
     display: flex;

front/src/types.tsx

@@ -25,17 +25,27 @@ export type Mention = {
 
 export type Mentions = Mention[]
 
+export type Attachment = {
+    id: number
+    message_id: number
+    file_name: string
+}
+
+export type Attachments = Attachment[]
+
 export type Message = {
     id: number
     user_id: number
     username: string
     content: string
     date: number
-    channel_id: number
     channel_name: string
+    has_mentions: boolean
+    has_replies: boolean
+    has_attachments: boolean
     mentions: Mentions
     replies: Messages
-    has_replies: boolean
+    attachments: Attachments
 }
 
 export type Messages = Message[]