파일업로드 유효성 체크 적용

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts

@@ -584,12 +584,16 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
           info.sentMessageJson || info.sentMessage
         );
 
-        this.snackBarPreviewEvent = this.snackBarService.open(message, this.translateService.instant('common.messages.confirm'), {
+        this.snackBarPreviewEvent = this.snackBarService.open(
-          // duration: 3000,
+          message,
-          verticalPosition: 'bottom',
+          this.translateService.instant('common.messages.confirm'),
-          horizontalPosition: 'center',
+          {
-          panelClass: ['chat-snackbar-class']
+            // duration: 3000,
-        });
+            verticalPosition: 'bottom',
+            horizontalPosition: 'center',
+            panelClass: ['chat-snackbar-class']
+          }
+        );
         this.snackBarPreviewEvent.onAction().subscribe(() => {
           this.setEventMoreInit();
           this.scrollToBottom();
@@ -1052,6 +1056,68 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
 
     const allObservables: Observable<FileTalkSaveResponse>[] = [];
 
+    const fileAllowSize =
+      !!this.sessionVerInfo && this.sessionVerInfo.fileAllowSize
+        ? this.sessionVerInfo.fileAllowSize
+        : environment.productConfig.CommonSetting.defaultFileAllowSize;
+
+    if (fileAllowSize > 0) {
+      if (
+        fileUploadItems.filter(
+          fui => fui.file.size > fileAllowSize * 1024 * 1024
+        ).length
+      ) {
+        this.dialogService.open<
+          AlertDialogComponent,
+          AlertDialogData,
+          AlertDialogResult
+        >(AlertDialogComponent, {
+          width: '360px',
+          data: {
+            title: '',
+            message: this.translateService.instant(
+              'common.file.errors.oversize',
+              {
+                maxSize: fileAllowSize
+              }
+            )
+          }
+        });
+        if (!!this.fileUploadQueue) {
+          this.fileUploadQueue.onUploadComplete();
+        }
+        return;
+      }
+    }
+
+    const checkExt = this.commonApiService.acceptableExtensionForFileTalk(
+      fileUploadItems.map(fui => FileUtil.getExtension(fui.file.name))
+    );
+    if (!checkExt.accept) {
+      if (!!this.fileUploadQueue) {
+        this.fileUploadQueue.onUploadComplete();
+      }
+
+      this.dialogService.open<
+        AlertDialogComponent,
+        AlertDialogData,
+        AlertDialogResult
+      >(AlertDialogComponent, {
+        data: {
+          title: 'Alert',
+          html: `${this.translateService.instant(
+            'common.file.errors.notSupporedType'
+          )} ${
+            checkExt.reject.length > 0
+              ? '<br/>(' + checkExt.reject.join(',') + ')'
+              : ''
+          }`
+        }
+      });
+
+      return;
+    }
+
     for (const fileUploadItem of fileUploadItems) {
       let thumbnail: File;
       if (
@@ -1127,6 +1193,10 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
             this.translateService.instant('common.file.errors.failToUpload'),
             this.translateService.instant('common.file.errors.label')
           );
+
+          if (!!this.fileUploadQueue) {
+            this.fileUploadQueue.onUploadComplete();
+          }
         },
         () => {
           this.fileUploadQueue.onUploadComplete();

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/message/message-write.dialog.component.html

@@ -11,6 +11,7 @@
       [detail]="data.detail"
       [detailContents]="data.detailContents"
       [curReceiverList]="data.receiverList"
+      [fileAllowSize]="fileAllowSize"
       (send)="onSend($event)"
       (selectReceiver)="onSelectReceiver($event)"
       (cancel)="onCancel()"

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/message/message-write.dialog.component.ts

@@ -7,13 +7,11 @@ import {
   DetailResponse,
   DetailContent,
   MessageApiService,
-  DetailReceiver,
   MessageType
 } from '@ucap-webmessenger/api-message';
 
 import { LoginResponse } from '@ucap-webmessenger/protocol-authentication';
 import { NGXLogger } from 'ngx-logger';
-import { MessageStatusCode } from '@ucap-webmessenger/api';
 import {
   WriteComponent as UCapMessageWriteComponent,
   Message,
@@ -25,10 +23,17 @@ import {
   CreateChatDialogData,
   CreateChatDialogResult
 } from '../chat/create-chat.dialog.component';
-import { UserSelectDialogType, EnvironmentsInfo } from '@app/types';
+import {
+  UserSelectDialogType,
+  EnvironmentsInfo,
+  KEY_VER_INFO
+} from '@app/types';
 import { take } from 'rxjs/operators';
 import { UserInfoSS } from '@ucap-webmessenger/protocol-query';
 import { TranslateService } from '@ngx-translate/core';
+import { VersionInfo2Response } from '@ucap-webmessenger/api-public';
+import { SessionStorageService } from '@ucap-webmessenger/web-storage';
+import { environment } from '../../../../../environments/environment';
 
 export interface MessageWriteDialogData {
   loginRes: LoginResponse;
@@ -57,6 +62,10 @@ export class MessageWriteDialogComponent implements OnInit {
   @ViewChild('messageWrite', { static: true })
   messageWrite: UCapMessageWriteComponent;
 
+  sessionVerInfo: VersionInfo2Response;
+
+  fileAllowSize: number;
+
   isModify = false;
 
   constructor(
@@ -68,11 +77,21 @@ export class MessageWriteDialogComponent implements OnInit {
     private messageApiService: MessageApiService,
     private snackBarService: SnackBarService,
     private translateService: TranslateService,
+    private sessionStorageService: SessionStorageService,
     private logger: NGXLogger,
     private dialogService: DialogService
   ) {}
 
   ngOnInit(): void {
+    this.sessionVerInfo = this.sessionStorageService.get<VersionInfo2Response>(
+      KEY_VER_INFO
+    );
+
+    this.fileAllowSize =
+      !!this.sessionVerInfo && this.sessionVerInfo.fileAllowSize
+        ? this.sessionVerInfo.fileAllowSize
+        : environment.productConfig.CommonSetting.defaultFileAllowSize;
+
     if (!!this.data.detail && !!this.data.detail.msgInfo) {
       this.isModify = true;
     }

projects/ucap-webmessenger-app/src/assets/i18n/en.json

@@ -349,12 +349,13 @@
       "errors": {
         "label": "File errors",
         "failToUpload": "File upload failed.",
-        "failToSave": "File save failed.",
+        "failToSave": "File save failed. Please 'Save As'.",
-        "failToSaveSomeOfAll": "Some of file(s) save failed",
+        "failToSaveSomeOfAll": "Some of file(s) save failed. Please 'Save As'.",
         "failToSpecifyPath": "Specifing of save path failed.",
         "expired": "This file has expired",
         "noPreview": "This file does not support preview.",
-        "notSupporedType": "File format is not supported."
+        "notSupporedType": "File format is not supported.",
+        "oversize": "You cannot upload files larger than {{size}} megabytes."
       }
     },
     "clipboard": {

projects/ucap-webmessenger-app/src/assets/i18n/ko.json

@@ -349,12 +349,13 @@
       "errors": {
         "label": "파일 에러",
         "failToUpload": "파일 업로드에 실패하였습니다.",
-        "failToSave": "파일 저장에 실패하였습니다.",
+        "failToSave": "파일 저장에 실패하였습니다. '다른 이름으로 저장' 하십시요.",
-        "failToSaveSomeOfAll": "파일 저장 중 일부 파일이 실패하였습니다.",
+        "failToSaveSomeOfAll": "파일 저장 중 일부 파일이 실패하였습니다. '다른 이름으로 저장' 하십시요.",
         "failToSpecifyPath": "저장경로 지정에 실패하였습니다.",
         "expired": "기간이 만료된 파일입니다",
         "noPreview": "미리보기를 지원하지 않는 파일입니다.",
-        "notSupporedType": "지원하지 않는 파일형식입니다."
+        "notSupporedType": "지원하지 않는 파일형식입니다.",
+        "oversize": "{{maxSize}}MB 이상 파일을 업로드 할 수 없습니다."
       }
     },
     "clipboard": {

projects/ucap-webmessenger-app/src/environments/environment.daesang.dev.ts

@@ -64,6 +64,8 @@ export const environment: Environment = {
       }
     },
     CommonSetting: {
+      defaultFileAllowSize: 100,
+
       editableProfileImage: false,
 
       useMyDeptGroup: true,

projects/ucap-webmessenger-app/src/environments/environment.daesang.prod.ts

@@ -64,6 +64,8 @@ export const environment: Environment = {
       }
     },
     CommonSetting: {
+      defaultFileAllowSize: 100,
+
       editableProfileImage: false,
 
       useMyDeptGroup: true,

projects/ucap-webmessenger-app/src/environments/environment.dev.ts

@@ -64,6 +64,8 @@ export const environment: Environment = {
       }
     },
     CommonSetting: {
+      defaultFileAllowSize: 100,
+
       editableProfileImage: true,
 
       useMyDeptGroup: false,

projects/ucap-webmessenger-app/src/environments/environment.prod.ts

@@ -64,6 +64,8 @@ export const environment: Environment = {
       }
     },
     CommonSetting: {
+      defaultFileAllowSize: 100,
+
       editableProfileImage: true,
 
       useMyDeptGroup: false,

projects/ucap-webmessenger-app/src/environments/environment.type.ts

@@ -64,6 +64,9 @@ export interface Environment {
     defaultSettings: Settings;
 
     CommonSetting: {
+      /** 파일업로드 제한 사이즈 (mb) */
+      defaultFileAllowSize: number;
+
       /** 내 프로필 이미지 수정 가능 여부 */
       editableProfileImage: boolean;
 

projects/ucap-webmessenger-ui-message/src/lib/components/write.component.ts

@@ -11,7 +11,13 @@ import {
   Input
 } from '@angular/core';
 
-import { ucapAnimations, DialogService } from '@ucap-webmessenger/ui';
+import {
+  ucapAnimations,
+  DialogService,
+  AlertDialogResult,
+  AlertDialogComponent,
+  AlertDialogData
+} from '@ucap-webmessenger/ui';
 
 import { NGXLogger } from 'ngx-logger';
 
@@ -36,7 +42,8 @@ import {
 } from '../dialogs/schedule-send.dialog.component';
 import { RoleCode } from '@ucap-webmessenger/protocol-authentication';
 import { EmployeeType } from '@ucap-webmessenger/protocol-room';
-import { contentTracing } from 'electron';
+import { TranslateService } from '@ngx-translate/core';
+import { CommonApiService } from '@ucap-webmessenger/api-common';
 
 const ATTR_FILE = 'UCAP_ATTR_FILE';
 
@@ -79,19 +86,18 @@ export class WriteComponent implements OnInit, OnDestroy, AfterViewInit {
   detailContents?: string;
   @Input()
   isModify = false;
+  @Input()
+  fileAllowSize: number;
 
   @Output()
   send = new EventEmitter<Message | MessageModify>();
-
   @Output()
   cancel = new EventEmitter<void>();
-
   @Output()
   selectReceiver = new EventEmitter<UserInfo[]>();
 
   @ViewChild('editor', { static: true })
   editor: ElementRef<HTMLDivElement>;
-
   @ViewChild('fileInput', { static: true })
   fileInput: ElementRef<HTMLInputElement>;
 
@@ -106,6 +112,8 @@ export class WriteComponent implements OnInit, OnDestroy, AfterViewInit {
     private formBuilder: FormBuilder,
     private dialogService: DialogService,
     private changeDetectorRef: ChangeDetectorRef,
+    private translateService: TranslateService,
+    private commonApiService: CommonApiService,
     private logger: NGXLogger
   ) {}
 
@@ -157,6 +165,10 @@ export class WriteComponent implements OnInit, OnDestroy, AfterViewInit {
     this.fileInput.nativeElement.onchange = async () => {
       const fileList: FileList = self.fileInput.nativeElement.files;
 
+      if (!this.validUploadFile(fileList)) {
+        return;
+      }
+
       for (let i = 0; i < fileList.length; i++) {
         const file = fileList.item(i);
 
@@ -179,6 +191,10 @@ export class WriteComponent implements OnInit, OnDestroy, AfterViewInit {
     this.fileInput.nativeElement.onchange = () => {
       const fileList: FileList = this.fileInput.nativeElement.files;
 
+      if (!this.validUploadFile(fileList)) {
+        return;
+      }
+
       if (!self.attachmentList) {
         self.attachmentList = [];
       }
@@ -194,6 +210,65 @@ export class WriteComponent implements OnInit, OnDestroy, AfterViewInit {
     };
   }
 
+  validUploadFile(fileList: FileList): boolean {
+    let valid = true;
+    if (this.fileAllowSize > 0) {
+      for (let i = 0; i < fileList.length; i++) {
+        const file = fileList.item(i);
+        if (file.size > this.fileAllowSize * 1024 * 1024) {
+          valid = false;
+          break;
+        }
+      }
+      if (!valid) {
+        this.dialogService.open<
+          AlertDialogComponent,
+          AlertDialogData,
+          AlertDialogResult
+        >(AlertDialogComponent, {
+          width: '360px',
+          data: {
+            title: '',
+            message: this.translateService.instant(
+              'common.file.errors.oversize',
+              {
+                maxSize: this.fileAllowSize
+              }
+            )
+          }
+        });
+
+        return valid;
+      }
+    }
+
+    const checkExt = this.commonApiService.acceptableExtensionForFileTalk(
+      FileUtil.getExtensions(fileList)
+    );
+    if (!checkExt.accept) {
+      this.dialogService.open<
+        AlertDialogComponent,
+        AlertDialogData,
+        AlertDialogResult
+      >(AlertDialogComponent, {
+        data: {
+          title: 'Alert',
+          html: `${this.translateService.instant(
+            'common.file.errors.notSupporedType'
+          )} ${
+            checkExt.reject.length > 0
+              ? '<br/>(' + checkExt.reject.join(',') + ')'
+              : ''
+          }`
+        }
+      });
+
+      return valid;
+    }
+
+    return valid;
+  }
+
   onPasteEditor(event: ClipboardEvent) {
     const text = document.createTextNode(
       event.clipboardData.getData('text/plain')