file upload is modified

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

@@ -61,7 +61,7 @@
     #messageBoxContainer
     ucapUiFileUploadFor
     (fileSelected)="onFileSelected($event)"
-    (fileDragEnter)="onFileDragEnter()"
+    (fileDragEnter)="onFileDragEnter($event)"
     (fileDragOver)="onFileDragOver()"
     (fileDragLeave)="onFileDragLeave()"
   >
@@ -85,11 +85,6 @@
       </ucap-chat-messages>
     </perfect-scrollbar>
     <!-- CHAT MESSAGES -->
-  </div>
-  <!-- / CHAT CONTENT -->
-
-  <!-- CHAT FOOTER -->
-  <div fxFlex="0 0 auto" fxLayout="column">
     <div
       *ngIf="fileDragOver || (files && 0 < files.length)"
       class="file-drop-zone-container"
@@ -97,10 +92,15 @@
       <div class="file-drop-zone">
         <ucap-ui-file-upload-queue
           [(files)]="files"
+          [items]="fileItems"
         ></ucap-ui-file-upload-queue>
       </div>
     </div>
+  </div>
+  <!-- / CHAT CONTENT -->
 
+  <!-- CHAT FOOTER -->
+  <div fxFlex="0 0 auto" fxLayout="column">
     <!-- REPLY FORM -->
     <ucap-chat-form
       (send)="onSendMessage($event)"

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

@@ -55,24 +55,27 @@ $line-basic: 1px solid #dddddd;
     }
 
     .chat-content {
+      position: relative;
       background: transparent;
       overflow: auto;
       -webkit-overflow-scrolling: touch;
-    }
 
-    .file-drop-zone-container {
+      .file-drop-zone-container {
-      position: relative;
-
-      .file-drop-zone {
         position: absolute;
-        border: 2px solid gray;
+        top: 0;
-        background-color: white;
+        left: 0;
-        width: 600px;
+        width: 100%;
-        height: 150px;
+        height: 100%;
-        bottom: 0px;
+        background-color: rgba(255, 255, 255, 0.95);
-        margin: auto;
+
-        left: 0px;
+        .file-drop-zone {
-        right: 0px;
+          position: absolute;
+
+          top: 10%;
+          left: 10%;
+          width: 80%;
+          height: 80%;
+        }
       }
     }
   }

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

@@ -97,6 +97,7 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewChecked {
 
   fileDragOver = false;
   files: File[];
+  fileItems: DataTransferItemList;
 
   constructor(
     private store: Store<any>,
@@ -281,9 +282,10 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewChecked {
     this.logger.debug('fileSave', value);
   }
 
-  onFileDragEnter() {
+  onFileDragEnter(items: DataTransferItemList) {
-    this.logger.debug('onFileDragEnter');
+    this.logger.debug('onFileDragEnter', items);
     this.fileDragOver = true;
+    this.fileItems = items;
   }
 
   onFileDragOver() {

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

@@ -0,0 +1,198 @@
+const MimeExtensions: {
+  [param: string]: string;
+} = {
+  'application/envoy': 'evy',
+  'application/fractals': 'fif',
+  'application/futuresplash': 'spl',
+  'application/hta': 'hta',
+  'application/internet-property-stream': 'acx',
+  'application/mac-binhex40': 'hqx',
+  'application/msword': 'doc',
+  'application/msword': 'dot',
+  'application/octet-stream': '*',
+  'application/octet-stream': 'bin',
+  'application/octet-stream': 'class',
+  'application/octet-stream': 'dms',
+  'application/octet-stream': 'exe',
+  'application/octet-stream': 'lha',
+  'application/octet-stream': 'lzh',
+  'application/oda': 'oda',
+  'application/olescript': 'axs',
+  'application/pdf': 'pdf',
+  'application/pics-rules': 'prf',
+  'application/pkcs10': 'p10',
+  'application/pkix-crl': 'crl',
+  'application/postscript': 'ai',
+  'application/postscript': 'eps',
+  'application/postscript': 'ps',
+  'application/rtf': 'rtf',
+  'application/set-payment-initiation': 'setpay',
+  'application/set-registration-initiation': 'setreg',
+  'application/vnd.ms-excel': 'xla',
+  'application/vnd.ms-excel': 'xlc',
+  'application/vnd.ms-excel': 'xlm',
+  'application/vnd.ms-excel': 'xls',
+  'application/vnd.ms-excel': 'xlt',
+  'application/vnd.ms-excel': 'xlw',
+  'application/vnd.ms-outlook': 'msg',
+  'application/vnd.ms-pkicertstore': 'sst',
+  'application/vnd.ms-pkiseccat': 'cat',
+  'application/vnd.ms-pkistl': 'stl',
+  'application/vnd.ms-powerpoint': 'pot',
+  'application/vnd.ms-powerpoint': 'pps',
+  'application/vnd.ms-powerpoint': 'ppt',
+  'application/vnd.ms-project': 'mpp',
+  'application/vnd.ms-works': 'wcm',
+  'application/vnd.ms-works': 'wdb',
+  'application/vnd.ms-works': 'wks',
+  'application/vnd.ms-works': 'wps',
+  'application/winhlp': 'hlp',
+  'application/x-bcpio': 'bcpio',
+  'application/x-cdf': 'cdf',
+  'application/x-compress': 'z',
+  'application/x-compressed': 'tgz',
+  'application/x-cpio': 'cpio',
+  'application/x-csh': 'csh',
+  'application/x-director': 'dcr',
+  'application/x-director': 'dir',
+  'application/x-director': 'dxr',
+  'application/x-dvi': 'dvi',
+  'application/x-gtar': 'gtar',
+  'application/x-gzip': 'gz',
+  'application/x-hdf': 'hdf',
+  'application/x-internet-signup': 'ins',
+  'application/x-internet-signup': 'isp',
+  'application/x-iphone': 'iii',
+  'application/x-javascript': 'js',
+  'application/x-latex': 'latex',
+  'application/x-msaccess': 'mdb',
+  'application/x-mscardfile': 'crd',
+  'application/x-msclip': 'clp',
+  'application/x-msdownload': 'dll',
+  'application/x-msmediaview': 'm13',
+  'application/x-msmediaview': 'm14',
+  'application/x-msmediaview': 'mvb',
+  'application/x-msmetafile': 'wmf',
+  'application/x-msmoney': 'mny',
+  'application/x-mspublisher': 'pub',
+  'application/x-msschedule': 'scd',
+  'application/x-msterminal': 'trm',
+  'application/x-mswrite': 'wri',
+  'application/x-netcdf': 'cdf',
+  'application/x-netcdf': 'nc',
+  'application/x-perfmon': 'pma',
+  'application/x-perfmon': 'pmc',
+  'application/x-perfmon': 'pml',
+  'application/x-perfmon': 'pmr',
+  'application/x-perfmon': 'pmw',
+  'application/x-pkcs12': 'p12',
+  'application/x-pkcs12': 'pfx',
+  'application/x-pkcs7-certificates': 'p7b',
+  'application/x-pkcs7-certificates': 'spc',
+  'application/x-pkcs7-certreqresp': 'p7r',
+  'application/x-pkcs7-mime': 'p7c',
+  'application/x-pkcs7-mime': 'p7m',
+  'application/x-pkcs7-signature': 'p7s',
+  'application/x-sh': 'sh',
+  'application/x-shar': 'shar',
+  'application/x-shockwave-flash': 'swf',
+  'application/x-stuffit': 'sit',
+  'application/x-sv4cpio': 'sv4cpio',
+  'application/x-sv4crc': 'sv4crc',
+  'application/x-tar': 'tar',
+  'application/x-tcl': 'tcl',
+  'application/x-tex': 'tex',
+  'application/x-texinfo': 'texi',
+  'application/x-texinfo': 'texinfo',
+  'application/x-troff': 'roff',
+  'application/x-troff': 't',
+  'application/x-troff': 'tr',
+  'application/x-troff-man': 'man',
+  'application/x-troff-me': 'me',
+  'application/x-troff-ms': 'ms',
+  'application/x-ustar': 'ustar',
+  'application/x-wais-source': 'src',
+  'application/x-x509-ca-cert': 'cer',
+  'application/x-x509-ca-cert': 'crt',
+  'application/x-x509-ca-cert': 'der',
+  'application/ynd.ms-pkipko': 'pko',
+  'application/zip': 'zip',
+  'audio/basic': 'au',
+  'audio/basic': 'snd',
+  'audio/mid': 'mid',
+  'audio/mid': 'rmi',
+  'audio/mpeg': 'mp3',
+  'audio/x-aiff': 'aif',
+  'audio/x-aiff': 'aifc',
+  'audio/x-aiff': 'aiff',
+  'audio/x-mpegurl': 'm3u',
+  'audio/x-pn-realaudio': 'ra',
+  'audio/x-pn-realaudio': 'ram',
+  'audio/x-wav': 'wav',
+  'image/bmp': 'bmp',
+  'image/cis-cod': 'cod',
+  'image/gif': 'gif',
+  'image/ief': 'ief',
+  'image/jpeg': 'jpe',
+  'image/jpeg': 'jpeg',
+  'image/jpeg': 'jpg',
+  'image/pipeg': 'jfif',
+  'image/svg+xml': 'svg',
+  'image/tiff': 'tif',
+  'image/tiff': 'tiff',
+  'image/x-cmu-raster': 'ras',
+  'image/x-cmx': 'cmx',
+  'image/x-icon': 'ico',
+  'image/x-portable-anymap': 'pnm',
+  'image/x-portable-bitmap': 'pbm',
+  'image/x-portable-graymap': 'pgm',
+  'image/x-portable-pixmap': 'ppm',
+  'image/x-rgb': 'rgb',
+  'image/x-xbitmap': 'xbm',
+  'image/x-xpixmap': 'xpm',
+  'image/x-xwindowdump': 'xwd',
+  'message/rfc822': 'mht',
+  'message/rfc822': 'mhtml',
+  'message/rfc822': 'nws',
+  'text/css': 'css',
+  'text/h323': '323',
+  'text/html': 'htm',
+  'text/html': 'html',
+  'text/html': 'stm',
+  'text/iuls': 'uls',
+  'text/plain': 'bas',
+  'text/plain': 'c',
+  'text/plain': 'h',
+  'text/plain': 'txt',
+  'text/richtext': 'rtx',
+  'text/scriptlet': 'sct',
+  'text/tab-separated-values': 'tsv',
+  'text/webviewhtml': 'htt',
+  'text/x-component': 'htc',
+  'text/x-setext': 'etx',
+  'text/x-vcard': 'vcf',
+  'video/mpeg': 'mp2',
+  'video/mpeg': 'mpa',
+  'video/mpeg': 'mpe',
+  'video/mpeg': 'mpeg',
+  'video/mpeg': 'mpg',
+  'video/mpeg': 'mpv2',
+  'video/mp4': 'mp4',
+  'video/quicktime': 'mov',
+  'video/quicktime': 'qt',
+  'video/x-la-asf': 'lsf',
+  'video/x-la-asf': 'lsx',
+  'video/x-ms-asf': 'asf',
+  'video/x-ms-asf': 'asr',
+  'video/x-ms-asf': 'asx',
+  'video/x-msvideo': 'avi',
+  'video/x-sgi-movie': 'movie',
+  'x-world/x-vrml': 'flr',
+  'x-world/x-vrml': 'vrml',
+  'x-world/x-vrml': 'wrl',
+  'x-world/x-vrml': 'wrz',
+  'x-world/x-vrml': 'xaf',
+  'x-world/x-vrml': 'xof'
+};
+
+export class MimeUtil {}

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

@@ -6,7 +6,7 @@
   <div
     fxLayout="column"
     fxFlex="100"
-    fxFlex.gt-xs="50"
+    fxFlex.gt-xs="100"
     fxFlex.gt-md="25"
     *ngFor="let file of uploadFiles"
   >
@@ -23,4 +23,19 @@
       <mat-progress-bar mode="determinate" value="40"> </mat-progress-bar>
     </div>
   </div>
+
+  <div *ngIf="uploadItems" fxLayout="column">
+    <div>여기에 파일을 Drop하시면 업로드 됩니다.</div>
+    <div>
+      <div
+        fxLayout="row"
+        fxFlex="100"
+        fxFlex.gt-xs="20"
+        fxFlex.gt-md="25"
+        *ngFor="let item of uploadItems"
+      >
+        <mat-icon>image</mat-icon>
+      </div>
+    </div>
+  </div>
 </div>

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

@@ -10,12 +10,23 @@ import { NGXLogger } from 'ngx-logger';
 export class FileUploadQueueComponent implements OnInit {
   @Output()
   filesChange = new EventEmitter<File[]>();
+
   @Input() set files(files: File[]) {
     this.uploadFiles = files;
+    this.uploadItems = undefined;
   }
-
   uploadFiles: File[];
 
+  @Input() set items(items: DataTransferItemList) {
+    const uploadItems: DataTransferItem[] = [];
+    // tslint:disable-next-line: prefer-for-of
+    for (let i = 0; i < items.length; i++) {
+      uploadItems.push(items[i]);
+    }
+    this.uploadItems = [...uploadItems];
+  }
+  uploadItems: DataTransferItem[];
+
   constructor(private logger: NGXLogger) {}
 
   ngOnInit() {}

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

@@ -13,37 +13,53 @@ import { NGXLogger } from 'ngx-logger';
 })
 export class FileUploadForDirective {
   @Output()
-  public fileDragEnter: EventEmitter<any> = new EventEmitter();
+  public fileDragEnter = new EventEmitter<DataTransferItemList>();
 
   @Output()
-  public fileDragOver: EventEmitter<any> = new EventEmitter();
+  public fileDragOver = new EventEmitter<void>();
 
   @Output()
-  public fileDragLeave: EventEmitter<any> = new EventEmitter();
+  public fileDragLeave = new EventEmitter<void>();
 
   @Output()
-  public fileSelected: EventEmitter<File[]> = new EventEmitter<File[]>();
+  public fileSelected = new EventEmitter<File[]>();
 
   dragOver = false;
 
   constructor(private elementRef: ElementRef, private logger: NGXLogger) {}
 
   @HostListener('window:dragenter', ['$event'])
-  public onDragEnter(event: any): any {
+  public onDragEnter(event: DragEvent): any {
-    const files = event.dataTransfer.files;
+    if (!this.isFileDrag(event.dataTransfer)) {
+      return;
+    }
+
     if (!this.dragOver) {
-      this.fileDragEnter.emit(files);
+      this.fileDragEnter.emit(event.dataTransfer.items);
       this.dragOver = true;
     }
   }
 
   @HostListener('window:dragover', ['$event'])
-  public onDragOver(event: any): any {
+  public onDragOver(event: DragEvent): any {
+    if (!this.isFileDrag(event.dataTransfer)) {
+      return;
+    }
+
+    if (this.isEventInElement(event)) {
+      event.dataTransfer.dropEffect = 'copy';
+    } else {
+      event.dataTransfer.dropEffect = 'none';
+    }
     event.preventDefault();
   }
 
   @HostListener('window:dragleave', ['$event'])
-  public onDragLeave(event: any): any {
+  public onDragLeave(event: DragEvent): any {
+    if (!this.isFileDrag(event.dataTransfer)) {
+      return;
+    }
+
     if (event && event.pageX === 0 && event.pageY === 0) {
       this.fileDragLeave.emit();
       this.dragOver = false;
@@ -59,6 +75,9 @@ export class FileUploadForDirective {
 
   @HostListener('window:drop', ['$event'])
   public onDrop(event: any): any {
+    if (!this.isFileDrag(event.dataTransfer)) {
+      return;
+    }
     const files = event.dataTransfer.files;
     this.fileSelected.emit(files);
     event.preventDefault();
@@ -66,4 +85,34 @@ export class FileUploadForDirective {
     this.elementRef.nativeElement.value = '';
     this.dragOver = false;
   }
+
+  private isFileDrag(dataTransfer: DataTransfer): boolean {
+    if (0 >= dataTransfer.items.length) {
+      return false;
+    }
+
+    // tslint:disable-next-line: prefer-for-of
+    for (let i = 0; i < dataTransfer.items.length; i++) {
+      const element = dataTransfer.items[i];
+      if ('file' !== element.kind) {
+        return false;
+      }
+    }
+
+    return true;
+  }
+
+  private isEventInElement(event: DragEvent): boolean {
+    const rect: DOMRect = this.elementRef.nativeElement.getBoundingClientRect();
+
+    if (
+      event.pageX >= rect.left &&
+      event.pageX <= rect.left + rect.width &&
+      event.pageY >= rect.top &&
+      event.pageY <= rect.top + rect.height
+    ) {
+      return true;
+    }
+    return false;
+  }
 }