update file upload

src/app/components/main-chat/chat-content/chat-content.component.ts

@@ -1,5 +1,4 @@
 import {
-  AfterViewChecked,
   AfterViewInit,
   Component,
   ElementRef,
@@ -13,7 +12,6 @@ import { UserService } from '../../../service/user.service';
 import { SingleChatComponent } from '../single-chat/single-chat.component';
 import { ChatMsgBoxComponent } from '../chat-msg-box/chat-msg-box.component';
 import { CommonModule } from '@angular/common';
-import { DownloadFilesService } from '../../../service/files.service';
 import { ChannelService } from '../../../service/channel.service';
 import { InfoComponent } from '../info/info.component';
 

src/app/components/main-chat/chat-msg-box/chat-msg-box.component.html

@@ -62,12 +62,22 @@
         [btnBgHoverColor]="'#edeefe'"
         (click)="targetChatUser($event)"
       ></app-small-btn>
+      <!-- Warning message -->
+      @if (downloadFilesService.uploadFiles.length >= 1){
+      <p class="warningMessage">
+        {{ "channel-msg-box.text0" | translate }}
+      </p>
+      } @if(fileDataError){
+      <p class="warningMessage">
+        {{ "channel-msg-box.text1" | translate }}
+      </p>
+      }
       <div class="filteredElementWindow">
         @if (toggleBoolean.selectUserInMsgBox) {
         <div class="positionOfAllUsersInBox">
           @for(user of userService.getFiltertUsers; track user){
           <div class="user" (click)="chooseUser(user)">
-            <div class="positionImgs">
+            <div class="positionImg">
               <img src="{{ user.avatar }}" class="avatarImg" />
               <img
                 src="./assets/img/{{
@@ -82,15 +92,6 @@
         </div>
         }
       </div>
-      } @if(downloadFilesService.uploadFiles.length >= 1){
-      <p
-        [ngClass]="{
-          showWarningNotice: downloadFilesService.uploadFiles.length >= 1
-        }"
-        class="warningMessage"
-      >
-        {{ "channel-msg-box.text" | translate }}
-      </p>
       }
     </div>
     @if(textArea == ''){
@@ -110,7 +111,7 @@
       <h3 class="user2" (click)="chooseElement(i)">{{ i.name }}</h3>
       } }@else if (showUsers) { @for (i of userService.allUsers; track $index) {
       <div class="user2" (click)="chooseElement(i)">
-        <div class="positionImgs2">
+        <div class="positionImg2">
           <img src="{{ i.avatar }}" class="avatarImg2" />
           <img
             src="./assets/img/{{

src/app/components/main-chat/chat-msg-box/chat-msg-box.component.scss

@@ -67,8 +67,8 @@ app-small-btn {
   border-radius: 10px;
   padding: 5px 10px;
   background-color: #eee;
-  max-width: 40px;
+  width: 40px;
-  max-height: 20px;
+  height: 20px;
   margin-right: 12px;
   position: relative;
   @include displayFlex();
@@ -87,7 +87,7 @@ app-emoji-picker {
 }
 
 .positionDataFromPc {
-  margin-top: -40px;
+  margin-top: -32px;
   display: flex;
   width: 60px;
 }
@@ -114,19 +114,6 @@ app-emoji-picker {
   height: 100vh;
 }
 
-.showWarningNotice {
-  animation: shwoWN 0.3s ease-in-out;
-}
-
-@keyframes shwoWN {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
 .positionOfAllUsersInBox {
   position: absolute;
   bottom: 36px;
@@ -147,22 +134,18 @@ app-emoji-picker {
     padding: 6px;
     cursor: pointer;
     transition: 0.2s ease-in-out;
-
     &:hover {
       background-color: #edeefe;
       border-radius: 25px;
     }
-
+    .positionImg {
-    .positionImgs {
       @include displayFlex($a: flex-end);
-
       .avatarImg {
         width: 40px;
         height: 40px;
         object-fit: cover;
         border-radius: 50%;
       }
-
       .onlineIcon {
         width: 12px;
         height: 12px;
@@ -208,7 +191,7 @@ app-emoji-picker {
       background-color: #edeefe;
       border-radius: 25px;
     }
-    .positionImgs2 {
+    .positionImg2 {
       @include displayFlex($a: flex-end);
       .avatarImg2 {
         width: 40px;

src/app/components/main-chat/chat-msg-box/chat-msg-box.component.ts

@@ -46,14 +46,15 @@ export class ChatMsgBoxComponent {
   @ViewChild('textarea') textAreaRef!: ElementRef;
 
   hasFile: boolean = false;
+  fileDataError: boolean = false;
   currentFiles!: FileList;
-  files: any;
   getFileIcons = [
     './assets/img/documentIcon.svg',
     './assets/img/imgIcon.svg',
     './assets/img/mp3Icon.svg',
     './assets/img/pdfIcon.svg',
     './assets/img/videoIcon.svg',
+    null,
   ];
   textArea: string = '';
   isEmojiPickerVisible: boolean | undefined;
@@ -102,34 +103,52 @@ export class ChatMsgBoxComponent {
    */
   onFileChange(event: any) {
     if (this.downloadFilesService.uploadFiles.length < 1) {
-      this.currentFiles = event.target.files;
+      const file = event.target.files[0];
-      this.hasFile = this.currentFiles!.length > 0;
+      const icon = this.checkIcon({ type: file.type });
-      if (this.currentFiles) {
+      if (icon !== null) {
-        for (let i = 0; i < this.currentFiles.length; i++) {
+        this.currentFiles = event.target.files;
-          const fileInfo = this.currentFiles[i];
+        this.hasFile = this.currentFiles.length > 0;
-          this.downloadFilesService.uploadFiles.push(fileInfo);
+        if (this.currentFiles) {
+          for (let i = 0; i < this.currentFiles.length; i++) {
+            const fileInfo = this.currentFiles[i];
+            this.downloadFilesService.uploadFiles.push(fileInfo);
+          }
         }
+      } else {
+        this.fileDataError = true;
       }
     }
   }
 
   /**
    * Checks the file type and returns the corresponding icon.
+   * Img (1): PNG, GIF, JPG, JPEG
+   * Files (3): PDF
+   * Files (0): DOC, DOCX
+   * Audio (2): MP3, WAV
+   * Video (4): MP4, WMV, AVI
    * @param fileInfo The file object.
    * @returns The file icon path.
    */
-  checkIcon(fileInfo: any) {
+  checkIcon(fileInfo: { type: string }) {
-    if (fileInfo.type == 'audio/mpeg') {
+    const fileTypeMap: Record<string, number> = {
-      return this.getFileIcons[2];
+      'audio/mpeg': 2,
-    } else if (fileInfo.type == 'image/jpeg') {
+      'audio/wav': 2,
-      return this.getFileIcons[1];
+      'image/jpg': 1,
-    } else if (fileInfo.type == 'application/pdf') {
+      'image/jpeg': 1,
-      return this.getFileIcons[3];
+      'image/png': 1,
-    } else if (fileInfo.type == 'video/mp4') {
+      'image/gif': 1,
-      return this.getFileIcons[4];
+      'application/pdf': 3,
-    } else {
+      'application/msword': 0,
-      return this.getFileIcons[0];
+      'application/doc': 0,
-    }
+      'application/ms-doc': 0,
+      'application/vnd.openxmlformats-officedocument.wordprocessingml.document': 0,
+      'video/mp4': 4,
+      'video/x-ms-wmv': 4,
+      'video/avi': 4,
+    };
+
+    return this.getFileIcons[fileTypeMap[fileInfo.type] ?? 5];
   }
 
   /**

src/assets/i18n/de.json

@@ -73,7 +73,8 @@
   },
 
   "channel-msg-box": {
-    "text": "Die maximale Anzahl an Dateien beträgt 1.",
+    "text0": "Maximal eine Datei pro Nachricht",
+    "text1": "Dieses Dateiformat ist ungültig",
     "placeholder": "Geben Sie Ihre Nachricht ein"
   },
 

src/assets/i18n/en.json

@@ -73,7 +73,8 @@
   },
 
   "channel-msg-box": {
-    "text": "The maximum number of files is 1.",
+    "text0": "Maximum one file per message",
+    "text1": "This file format is invalid",
     "placeholder": "Enter your message"
   },