data size upload limit

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

@@ -63,7 +63,8 @@
         (click)="targetChatUser($event)"
       ></app-small-btn>
       <!-- Warning message -->
-      @if (downloadFilesService.uploadFiles.length >= 1){
+      @if (downloadFilesService.uploadFiles.length >= 1 && !fileDataError &&
+      !fileSizeError){
       <p class="warningMessage">
         {{ "channel-msg-box.text0" | translate }}
       </p>
@@ -71,6 +72,10 @@
       <p class="warningMessage">
         {{ "channel-msg-box.text1" | translate }}
       </p>
+      } @if(fileSizeError){
+      <p class="warningMessage">
+        {{ "channel-msg-box.text2" | translate }}
+      </p>
       }
       <div class="filteredElementWindow">
         @if (toggleBoolean.selectUserInMsgBox) {

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

@@ -47,6 +47,7 @@ export class ChatMsgBoxComponent {
 
   hasFile: boolean = false;
   fileDataError: boolean = false;
+  fileSizeError: boolean = false;
   currentFiles!: FileList;
   getFileIcons = [
     './assets/img/documentIcon.svg',
@@ -104,9 +105,11 @@ export class ChatMsgBoxComponent {
   onFileChange(event: any) {
     if (this.downloadFilesService.uploadFiles.length < 1) {
       const file = event.target.files[0];
-      const icon = this.checkIcon({ type: file.type });
+      const fileIcon = this.checkIcon({ type: file.type });
-      if (icon !== null) {
+      const fileSize = this.checkFileSize(file.size);
+      if (fileIcon !== null && fileIcon && fileSize) {
         this.fileDataError = false;
+        this.fileSizeError = false;
         this.currentFiles = event.target.files;
         this.hasFile = this.currentFiles.length > 0;
         if (this.currentFiles) {
@@ -115,12 +118,23 @@ export class ChatMsgBoxComponent {
             this.downloadFilesService.uploadFiles.push(fileInfo);
           }
         }
+      } else if (fileIcon) {
+        this.fileSizeError = true;
       } else {
         this.fileDataError = true;
       }
     }
   }
 
+  checkFileSize(fileSize: number): boolean {
+    const maxSizeInBytes = 1 * 1024 * 1024; // Maximum file size of 1 MB
+    if (fileSize <= maxSizeInBytes) {
+      return true;
+    } else {
+      return false;
+    }
+  }
+
   /**
    * Checks the file type and returns the corresponding icon.
    * Img (1): PNG, GIF, JPG, JPEG

src/assets/i18n/de.json

@@ -75,6 +75,7 @@
   "channel-msg-box": {
     "text0": "Maximal eine Datei pro Nachricht",
     "text1": "Dieses Dateiformat ist ungültig",
+    "text2": "Dateigröße max. 1 MB",
     "placeholder": "Geben Sie Ihre Nachricht ein"
   },
 

src/assets/i18n/en.json

@@ -75,6 +75,7 @@
   "channel-msg-box": {
     "text0": "Maximum one file per message",
     "text1": "This file format is invalid",
+    "text2": "File size max. 1 MB",
     "placeholder": "Enter your message"
   },