load_one_file_ok

public/style/chat.css

@@ -501,6 +501,36 @@ body {
     list-style: none;
 }
 
+.file-upload-container {
+    margin: 10px 0;
+}
+
+.file-list {
+    margin-top: 10px;
+}
+
+.file-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+    margin: 5px 0;
+    background: var(--background-color-secondary);
+    border-radius: 4px;
+}
+
+.remove-file {
+    background: none;
+    border: none;
+    color: var(--text-color);
+    cursor: pointer;
+    padding: 0 5px;
+}
+
+.remove-file:hover {
+    color: var(--error-color);
+}
+
 #message-input {
     width: 100%;
     height: 50px;

src/pages/chat/chat.ts

@@ -1162,15 +1162,18 @@ class ChatElement extends HTMLElement {
                         </div>
                         <div class="modal-body">
                             <textarea id="message-input" placeholder="Write your message here..."></textarea>
-                            <input type="file" id="file-input" placeholder="Select a file">
-                            <input type="date" id="date-input" placeholder="Select a date">
+                            <div class="file-upload-container">
+                                <input type="file" id="file-input" multiple>
+                                <div id="file-list"></div>
+                            </div>
+                            <input type="date" id="date-input">
                             <button id="send-request-button">Send</button>
                         </div>
                     </div>
                 `;
 
                 this.shadowRoot?.appendChild(modal);
-
+                this.handleFileClick(modal);
                 const closeButton = modal.querySelector('.close-modal');
                 closeButton?.addEventListener('click', () => {
                     modal.remove();
@@ -1179,6 +1182,31 @@ class ChatElement extends HTMLElement {
         }
     }
 
+    //function for the click on files in the modal
+    private handleFileClick(modal: HTMLDivElement) {
+        const fileInput = modal.querySelector('#file-input') as HTMLInputElement;
+        const fileList = modal.querySelector('#file-list');
+
+                fileInput?.addEventListener('change', () => {
+                    if (fileList && fileInput.files) {
+                        fileList.innerHTML = '';
+                        Array.from(fileInput.files).forEach(file => {
+                            const fileItem = document.createElement('div');
+                            fileItem.className = 'file-item';
+                            fileItem.innerHTML = `
+                                <span>${file.name}</span>
+                                <button class="remove-file">&times;</button>
+                            `;
+                            fileList.appendChild(fileItem);
+
+                            fileItem.querySelector('.remove-file')?.addEventListener('click', () => {
+                                fileItem.remove();
+                            });
+                        });
+                    }
+                });
+    }
+
     private async generateMembersList(members: string[]) {
         let html = '';
         for (const member of members) {