file upload is modified
This commit is contained in:
parent
89ab43892d
commit
15121bceff
|
|
@ -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)"
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
position: relative;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(255, 255, 255, 0.95);
|
||||
|
||||
.file-drop-zone {
|
||||
position: absolute;
|
||||
border: 2px solid gray;
|
||||
background-color: white;
|
||||
width: 600px;
|
||||
height: 150px;
|
||||
bottom: 0px;
|
||||
margin: auto;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
|
||||
top: 10%;
|
||||
left: 10%;
|
||||
width: 80%;
|
||||
height: 80%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
this.logger.debug('onFileDragEnter');
|
||||
onFileDragEnter(items: DataTransferItemList) {
|
||||
this.logger.debug('onFileDragEnter', items);
|
||||
this.fileDragOver = true;
|
||||
this.fileItems = items;
|
||||
}
|
||||
|
||||
onFileDragOver() {
|
||||
|
|
|
|||
198
projects/ucap-webmessenger-core/src/lib/utils/mime.util.ts
Normal file
198
projects/ucap-webmessenger-core/src/lib/utils/mime.util.ts
Normal file
|
|
@ -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 {}
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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() {}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
const files = event.dataTransfer.files;
|
||||
public onDragEnter(event: DragEvent): any {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user