diff --git a/projects/ucap-webmessenger-api-common/src/lib/models/file-upload-item.ts b/projects/ucap-webmessenger-api-common/src/lib/models/file-upload-item.ts index 25fbbf69..0239627b 100644 --- a/projects/ucap-webmessenger-api-common/src/lib/models/file-upload-item.ts +++ b/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; } diff --git a/projects/ucap-webmessenger-api-common/src/lib/services/common-api.service.ts b/projects/ucap-webmessenger-api-common/src/lib/services/common-api.service.ts index 46dfe58a..600935df 100644 --- a/projects/ucap-webmessenger-api-common/src/lib/services/common-api.service.ts +++ b/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( diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html index 4b643ac4..8b09b433 100644 --- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html +++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html @@ -113,6 +113,7 @@
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts index 2327dcf5..20f78302 100644 --- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts +++ b/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[] = []; 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(); } diff --git a/projects/ucap-webmessenger-core/src/lib/utils/file.util.ts b/projects/ucap-webmessenger-core/src/lib/utils/file.util.ts new file mode 100644 index 00000000..6cfa31f0 --- /dev/null +++ b/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; + } +} diff --git a/projects/ucap-webmessenger-core/src/public-api.ts b/projects/ucap-webmessenger-core/src/public-api.ts index e23278e6..b426d4aa 100644 --- a/projects/ucap-webmessenger-core/src/public-api.ts +++ b/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'; diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/form.component.ts b/projects/ucap-webmessenger-ui-chat/src/lib/components/form.component.ts index 85a384e2..08215862 100644 --- a/projects/ucap-webmessenger-ui-chat/src/lib/components/form.component.ts +++ b/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 = ''; } } diff --git a/projects/ucap-webmessenger-ui/src/lib/components/file-upload-queue.component.ts b/projects/ucap-webmessenger-ui/src/lib/components/file-upload-queue.component.ts index cf7143bb..1d1ef39a 100644 --- a/projects/ucap-webmessenger-ui/src/lib/components/file-upload-queue.component.ts +++ b/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'; + } } } diff --git a/projects/ucap-webmessenger-ui/src/lib/directives/file-upload-for.directive.ts b/projects/ucap-webmessenger-ui/src/lib/directives/file-upload-for.directive.ts index 62fb4c11..f14c79e0 100644 --- a/projects/ucap-webmessenger-ui/src/lib/directives/file-upload-for.directive.ts +++ b/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();