bug fixed

projects/ucap-webmessenger-api-common/src/lib/models/file-upload-item.ts

@@ -13,11 +13,14 @@ export class FileUploadItem {
     this.file = file;
   }
 
-  static fromFiles(files: File[]): FileUploadItem[] {
+  static fromFiles(files: FileList): FileUploadItem[] {
     const fileItems: FileUploadItem[] = [];
-    for (const file of files) {
-      fileItems.push(new FileUploadItem(file));
+
+    // tslint:disable-next-line: prefer-for-of
+    for (let i = 0; i < files.length; i++) {
+      fileItems.push(new FileUploadItem(files[i]));
     }
+
     return fileItems;
   }
 

projects/ucap-webmessenger-api-common/src/lib/services/common-api.service.ts

@@ -142,8 +142,15 @@ export class CommonApiService {
     );
   }
 
-  public acceptableExtensionForFileTalk(extension: string): boolean {
-    return -1 !== this.moduleConfig.acceptableFileExtensions.indexOf(extension);
+  public acceptableExtensionForFileTalk(extensions: string[]): boolean {
+    for (const extension of extensions) {
+      if (
+        -1 === this.moduleConfig.acceptableFileExtensions.indexOf(extension)
+      ) {
+        return false;
+      }
+    }
+    return true;
   }
 
   public fileTalkShare(

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

@@ -113,6 +113,7 @@
     <div class="file-drop-zone-container">
       <ucap-file-upload-queue
         #fileUploadQueue
+        [dropZoneIncludeParent]="true"
         class="file-drop-zone"
       ></ucap-file-upload-queue>
     </div>

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

@@ -386,6 +386,11 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
   onFileSelected(fileUploadItems: FileUploadItem[]) {
     this.logger.debug('onFileSelected', fileUploadItems);
 
+    const info = {
+      senderSeq: this.loginRes.userSeq,
+      roomSeq: this.roomInfo.roomSeq
+    };
+
     const allObservables: Observable<FileTalkSaveResponse>[] = [];
 
     for (const fileUploadItem of fileUploadItems) {
@@ -424,9 +429,9 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
           for (const res of resList) {
             this.store.dispatch(
               EventStore.send({
-                senderSeq: this.loginRes.userSeq,
+                senderSeq: info.senderSeq,
                 req: {
-                  roomSeq: this.roomInfo.roomSeq,
+                  roomSeq: info.roomSeq,
                   eventType: EventType.File,
                   sentMessage: res.returnJson
                 }
@@ -434,7 +439,9 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
             );
           }
         },
-        error => {},
+        error => {
+          this.logger.debug('onFileSelected error', error);
+        },
         () => {
           this.fileUploadQueue.onUploadComplete();
         }

projects/ucap-webmessenger-core/src/lib/utils/file.util.ts

@@ -0,0 +1,16 @@
+const regFileExtension = /(?:\.([^.]+))?$/;
+
+export class FileUtil {
+  static getExtension(fileName: string): string | undefined {
+    return regFileExtension.exec(fileName)[1];
+  }
+
+  static getExtensions(fileList: FileList): string[] {
+    const extensions: string[] = [];
+    // tslint:disable-next-line: prefer-for-of
+    for (let i = 0; i < fileList.length; i++) {
+      extensions.push(FileUtil.getExtension(fileList[i].name));
+    }
+    return extensions;
+  }
+}

projects/ucap-webmessenger-core/src/public-api.ts

@@ -20,4 +20,5 @@ export * from './lib/types/status-code.type';
 export * from './lib/types/status-type.type';
 export * from './lib/types/video-conference-type.type';
 
+export * from './lib/utils/file.util';
 export * from './lib/utils/string.util';

projects/ucap-webmessenger-ui-chat/src/lib/components/form.component.ts

@@ -55,17 +55,16 @@ export class FormComponent implements OnInit {
   }
 
   onChangeFileInput() {
-    const files: File[] = [];
-    for (let i = 0; i < this.fileInput.nativeElement.files.length; i++) {
-      files.push(this.fileInput.nativeElement.files.item(i));
-    }
-
-    const fileUploadItems = FileUploadItem.fromFiles(files);
+    const fileUploadItems = FileUploadItem.fromFiles(
+      this.fileInput.nativeElement.files
+    );
 
     if (!!this.fileUploadQueue) {
       this.fileUploadQueue.onFileSelected(fileUploadItems);
     }
 
     this.sendFiles.emit(fileUploadItems);
+
+    this.fileInput.nativeElement.value = '';
   }
 }

projects/ucap-webmessenger-ui/src/lib/components/file-upload-queue.component.ts

@@ -17,6 +17,9 @@ import { FileUploadItem } from '@ucap-webmessenger/api-common';
   styleUrls: ['./file-upload-queue.component.scss']
 })
 export class FileUploadQueueComponent implements OnInit, AfterViewInit {
+  @Input()
+  dropZoneIncludeParent = false;
+
   fileUploadItems: FileUploadItem[];
   uploadItems: DataTransferItem[];
 
@@ -90,11 +93,17 @@ export class FileUploadQueueComponent implements OnInit, AfterViewInit {
 
   private changeStyleDisplay(show: boolean): void {
     if (show || (!!this.fileUploadItems && 0 < this.fileUploadItems.length)) {
-      this.elementRef.nativeElement.parentElement.style.display = '';
-      // this.elementRef.nativeElement.style.display = '';
+      if (this.dropZoneIncludeParent) {
+        this.elementRef.nativeElement.parentElement.style.display = '';
+      } else {
+        this.elementRef.nativeElement.style.display = '';
+      }
     } else {
-      this.elementRef.nativeElement.parentElement.style.display = 'none';
-      // this.elementRef.nativeElement.style.display = 'none';
+      if (this.dropZoneIncludeParent) {
+        this.elementRef.nativeElement.parentElement.style.display = 'none';
+      } else {
+        this.elementRef.nativeElement.style.display = 'none';
+      }
     }
   }
 

projects/ucap-webmessenger-ui/src/lib/directives/file-upload-for.directive.ts

@@ -10,7 +10,11 @@ import {
 
 import { NGXLogger } from 'ngx-logger';
 import { FileUploadQueueComponent } from '../components/file-upload-queue.component';
-import { FileUploadItem } from '@ucap-webmessenger/api-common';
+import {
+  FileUploadItem,
+  CommonApiService
+} from '@ucap-webmessenger/api-common';
+import { FileUtil } from '@ucap-webmessenger/core';
 
 @Directive({
   selector: 'input[ucapFileUploadFor], div[ucapFileUploadFor]'
@@ -33,7 +37,11 @@ export class FileUploadForDirective implements AfterViewInit {
 
   dragOver = false;
 
-  constructor(private elementRef: ElementRef, private logger: NGXLogger) {}
+  constructor(
+    private commonApiService: CommonApiService,
+    private elementRef: ElementRef,
+    private logger: NGXLogger
+  ) {}
 
   ngAfterViewInit(): void {}
 
@@ -93,7 +101,22 @@ export class FileUploadForDirective implements AfterViewInit {
     if (!this.isFileDrag(event.dataTransfer)) {
       return;
     }
-    const files = event.dataTransfer.files;
+    const files: FileList = event.dataTransfer.files;
+
+    if (
+      !this.commonApiService.acceptableExtensionForFileTalk(
+        FileUtil.getExtensions(files)
+      )
+    ) {
+      this.logger.debug('window:drop not acceptable');
+      if (!!this.fileUploadQueue) {
+        this.fileUploadQueue.onDragLeave();
+      }
+      this.elementRef.nativeElement.value = '';
+      this.dragOver = false;
+      return;
+    }
+
     const fileUploadItems = FileUploadItem.fromFiles(files);
     this.fileSelected.emit(fileUploadItems);
     event.preventDefault();