dc/ng2-file-upload
4
0
Fork 0
Code Issues 395 Pull Requests 27 Packages Projects Releases 4 Wiki Activity

fix(upload): merge fix and get filters fix

Browse Source
This commit is contained in:
Dmitriy Shekhovtsov
2016-05-12 15:15:03 +03:00
parent d938aa1c39
commit ef6091c670
4 changed files with 250 additions and 247 deletions
Download Patch File Download Diff File Expand all files Collapse all files

154
components/file-upload/file-type.class.ts Normal file
View File

@@ -0,0 +1,154 @@
export class FileType {
/* MS office */
public static mime_doc:string[] = [
'application/msword',
'application/msword',
'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
'application/vnd.openxmlformats-officedocument.wordprocessingml.template',
'application/vnd.ms-word.document.macroEnabled.12',
'application/vnd.ms-word.template.macroEnabled.12'
];
public static mime_xsl:string[] = [
'application/vnd.ms-excel',
'application/vnd.ms-excel',
'application/vnd.ms-excel',
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
'application/vnd.openxmlformats-officedocument.spreadsheetml.template',
'application/vnd.ms-excel.sheet.macroEnabled.12',
'application/vnd.ms-excel.template.macroEnabled.12',
'application/vnd.ms-excel.addin.macroEnabled.12',
'application/vnd.ms-excel.sheet.binary.macroEnabled.12'
];
public static mime_ppt:string[] = [
'application/vnd.ms-powerpoint',
'application/vnd.ms-powerpoint',
'application/vnd.ms-powerpoint',
'application/vnd.ms-powerpoint',
'application/vnd.openxmlformats-officedocument.presentationml.presentation',
'application/vnd.openxmlformats-officedocument.presentationml.template',
'application/vnd.openxmlformats-officedocument.presentationml.slideshow',
'application/vnd.ms-powerpoint.addin.macroEnabled.12',
'application/vnd.ms-powerpoint.presentation.macroEnabled.12',
'application/vnd.ms-powerpoint.presentation.macroEnabled.12',
'application/vnd.ms-powerpoint.slideshow.macroEnabled.12'
];
/* PSD */
public static mime_psd:string[] = [
'image/photoshop',
'image/x-photoshop',
'image/psd',
'application/photoshop',
'application/psd',
'zz-application/zz-winassoc-psd'
];
/* Compressed files */
public static mime_compress:string[] = [
'application/x-gtar',
'application/x-gcompress',
'application/compress',
'application/x-tar',
'application/x-rar-compressed',
'application/octet-stream'
];
public static getMimeClass(file:any):string {
let mimeClass = 'application';
if (this.mime_psd.indexOf(file.type) !== -1) {
mimeClass = 'image';
} else if (file.type.match('image.*')) {
mimeClass = 'image';
} else if (file.type.match('video.*')) {
mimeClass = 'video';
} else if (file.type.match('audio.*')) {
mimeClass = 'audio';
} else if (file.type === 'application/pdf') {
mimeClass = 'pdf';
} else if (this.mime_compress.indexOf(file.type) !== -1) {
mimeClass = 'compress';
} else if (this.mime_doc.indexOf(file.type) !== -1) {
mimeClass = 'doc';
} else if (this.mime_xsl.indexOf(file.type) !== -1) {
mimeClass = 'xls';
} else if (this.mime_ppt.indexOf(file.type) !== -1) {
mimeClass = 'ppt';
}
if (mimeClass === 'application') {
mimeClass = this.fileTypeDetection(file.name);
}
return mimeClass;
}
public static fileTypeDetection(inputFilename:string):string {
let types:{[key:string]:string} = {
'jpg': 'image',
'jpeg': 'image',
'tif': 'image',
'psd': 'image',
'bmp': 'image',
'png': 'image',
'nef': 'image',
'tiff': 'image',
'cr2': 'image',
'dwg': 'image',
'cdr': 'image',
'ai': 'image',
'indd': 'image',
'pin': 'image',
'cdp': 'image',
'skp': 'image',
'stp': 'image',
'3dm': 'image',
'mp3': 'audio',
'wav': 'audio',
'wma': 'audio',
'mod': 'audio',
'm4a': 'audio',
'compress': 'compress',
'rar': 'compress',
'7z': 'compress',
'lz': 'compress',
'z01': 'compress',
'pdf': 'pdf',
'xls': 'xls',
'xlsx': 'xls',
'ods': 'xls',
'mp4': 'video',
'avi': 'video',
'wmv': 'video',
'mpg': 'video',
'mts': 'video',
'flv': 'video',
'3gp': 'video',
'vob': 'video',
'm4v': 'video',
'mpeg': 'video',
'm2ts': 'video',
'mov': 'video',
'doc': 'doc',
'docx': 'doc',
'eps': 'doc',
'txt': 'doc',
'odt': 'doc',
'rtf': 'doc',
'ppt': 'ppt',
'pptx': 'ppt',
'pps': 'ppt',
'ppsx': 'ppt',
'odp': 'ppt'
};
let chunks = inputFilename.split('.');
if (chunks.length < 2) {
return 'application';
}
let extension = chunks[chunks.length - 1].toLowerCase();
if (types[extension] === undefined) {
return 'application';
} else {
return types[extension];
}
}
}

158
components/file-upload/file-type.ts
View File

@@ -1,158 +0,0 @@
export class FileType {
/* MS office */
static mime_doc = [
'application/msword',
'application/msword',
'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
'application/vnd.openxmlformats-officedocument.wordprocessingml.template',
'application/vnd.ms-word.document.macroEnabled.12',
'application/vnd.ms-word.template.macroEnabled.12'
];
static mime_xsl = [
'application/vnd.ms-excel',
'application/vnd.ms-excel',
'application/vnd.ms-excel',
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
'application/vnd.openxmlformats-officedocument.spreadsheetml.template',
'application/vnd.ms-excel.sheet.macroEnabled.12',
'application/vnd.ms-excel.template.macroEnabled.12',
'application/vnd.ms-excel.addin.macroEnabled.12',
'application/vnd.ms-excel.sheet.binary.macroEnabled.12'
];
static mime_ppt = [
'application/vnd.ms-powerpoint',
'application/vnd.ms-powerpoint',
'application/vnd.ms-powerpoint',
'application/vnd.ms-powerpoint',
'application/vnd.openxmlformats-officedocument.presentationml.presentation',
'application/vnd.openxmlformats-officedocument.presentationml.template',
'application/vnd.openxmlformats-officedocument.presentationml.slideshow',
'application/vnd.ms-powerpoint.addin.macroEnabled.12',
'application/vnd.ms-powerpoint.presentation.macroEnabled.12',
'application/vnd.ms-powerpoint.presentation.macroEnabled.12',
'application/vnd.ms-powerpoint.slideshow.macroEnabled.12'
];
/* PSD */
static mime_psd = [
'image/photoshop',
'image/x-photoshop',
'image/psd',
'application/photoshop',
'application/psd',
'zz-application/zz-winassoc-psd'
];
/* Compressed files */
static mime_compress = [
'application/x-gtar',
'application/x-gcompress',
'application/compress',
'application/x-tar',
'application/x-rar-compressed',
'application/octet-stream'
];
static getMimeClass(file) {
let mimeClass = 'application';
if (this.mime_psd.indexOf(file.type) !== -1) {
mimeClass = 'image';
} else if (file.type.match('image.*')) {
mimeClass = 'image';
} else if (file.type.match('video.*')) {
mimeClass = 'video';
} else if (file.type.match('audio.*')) {
mimeClass = 'audio';
} else if (file.type === 'application/pdf') {
mimeClass = 'pdf';
} else if (this.mime_compress.indexOf(file.type) !== -1) {
mimeClass = 'compress';
} else if (this.mime_doc.indexOf(file.type) !== -1) {
mimeClass = 'doc';
} else if (this.mime_xsl.indexOf(file.type) !== -1) {
mimeClass = 'xls';
} else if (this.mime_ppt.indexOf(file.type) !== -1) {
mimeClass = 'ppt';
}
if (mimeClass === 'application') {
mimeClass = this.fileTypeDetection(file.name);
}
return mimeClass;
}
static fileTypeDetection(inputFilename) {
let types = {
'jpg': 'image',
'jpeg': 'image',
'tif': 'image',
'psd': 'image',
'bmp': 'image',
'png': 'image',
'nef': 'image',
'tiff': 'image',
'cr2': 'image',
'dwg': 'image',
'cdr': 'image',
'ai': 'image',
'indd': 'image',
'pin': 'image',
'cdp': 'image',
'skp': 'image',
'stp': 'image',
'3dm': 'image',
'mp3': 'audio',
'wav': 'audio',
'wma': 'audio',
'mod': 'audio',
'm4a': 'audio',
'compress': 'compress',
'rar': 'compress',
'7z': 'compress',
'lz': 'compress',
'z01': 'compress',
'pdf': 'pdf',
'xls': 'xls',
'xlsx': 'xls',
'ods': 'xls',
'mp4': 'video',
'avi': 'video',
'wmv': 'video',
'mpg': 'video',
'mts': 'video',
'flv': 'video',
'3gp': 'video',
'vob': 'video',
'm4v': 'video',
'mpeg': 'video',
'm2ts': 'video',
'mov': 'video',
'doc': 'doc',
'docx': 'doc',
'eps': 'doc',
'rtf': 'doc',
'txt': 'doc',
'odt': 'doc',
'rtf': 'doc',
'ppt': 'ppt',
'pptx': 'ppt',
'pps': 'ppt',
'ppsx': 'ppt',
'odp': 'ppt'
};
let chunks = inputFilename.split('.');
if (chunks.length < 2) {
return 'application';
}
let extension = chunks[chunks.length - 1].toLowerCase();
if (types[extension] === undefined) {
return 'application';
} else {
return types[extension];
}
}
}

111
components/file-upload/file-uploader.class.ts
View File

@@ -1,23 +1,24 @@
import {FileLikeObject} from './file-like-object.class'; import {FileLikeObject} from './file-like-object.class';
import {FileItem} from './file-item.class'; import {FileItem} from './file-item.class';
import {FileType} from './file-type'; import {FileType} from './file-type.class';
function isFile(value: any) {
function isFile(value:any):boolean {
return (File && value instanceof File); return (File && value instanceof File);
} }
// function isFileLikeObject(value:any) { // function isFileLikeObject(value:any) {
export interface Headers { export interface Headers {
name: string; name:string;
value: string; value:string;
} }
export interface FileUploaderOptionsInterface { export interface FileUploaderOptions {
allowedMimeType?: Array<string>; allowedMimeType?:Array<string>;
allowedFileType?: Array<string>; allowedFileType?:Array<string>;
autoUpload?:boolean; autoUpload?:boolean;
isHTML5?:boolean; isHTML5?:boolean;
filters?:Array<any>; filters?:Array<any>;
headers?: Array<Headers>; headers?:Array<Headers>;
maxFileSize?: number; maxFileSize?:number;
queueLimit?:number; queueLimit?:number;
removeAfterUpload?:boolean; removeAfterUpload?:boolean;
url?:string; url?:string;
@@ -25,26 +26,27 @@ export interface FileUploaderOptionsInterface {
export class FileUploader { export class FileUploader {
public authToken: string; public authToken:string;
public isUploading: boolean = false; public isUploading:boolean = false;
public queue: Array<any> = []; public queue:Array<any> = [];
public progress: number = 0; public progress:number = 0;
public _nextIndex:number = 0; public _nextIndex:number = 0;
public options:any; public autoUpload:any;
private _failFilterIndex: number;
public options: FileUploaderOptionsInterface = { public options:FileUploaderOptions = {
autoUpload: false, autoUpload: false,
isHTML5: true, isHTML5: true,
filters: [], filters: [],
removeAfterUpload: false, removeAfterUpload: false
}; };
private _failFilterIndex:number;
constructor() { public constructor(options:any) {
this.setOptions(options);
} }
public setOptions(options: any) { public setOptions(options:any):void {
this.options = Object.assign(this.options, options); this.options = Object.assign(this.options, options);
this.authToken = options.authToken; this.authToken = options.authToken;
@@ -66,19 +68,18 @@ export class FileUploader {
// this.options.filters.unshift({name: 'folder', fn: this._folderFilter}); // this.options.filters.unshift({name: 'folder', fn: this._folderFilter});
} }
public addToQueue(files:any[], options?:any, filters?:any):void {
public addToQueue(files: any[], options?: any, filters?: any) { let list:any[] = [];
let list: any[] = [];
for (let file of files) { for (let file of files) {
list.push(file); list.push(file);
} }
let arrayOfFilters = this._getFilters(filters); let arrayOfFilters = this._getFilters(filters);
let count = this.queue.length; let count = this.queue.length;
let addedFileItems: any[] = []; let addedFileItems:any[] = [];
list.map((some:any) => { list.map((some:any) => {
if (!options) { if (!options) {
options = this.options; options = this.options;
} }
let temp = new FileLikeObject(some); let temp = new FileLikeObject(some);
if (this._isValidFile(temp, arrayOfFilters, options)) { if (this._isValidFile(temp, arrayOfFilters, options)) {
@@ -216,19 +217,8 @@ export class FileUploader {
return {item, response, status, headers}; return {item, response, status, headers};
} }
private _mimeTypeFilter(item: any) { public onCancelItem(item:any, response:any, status:any, headers:any):any {
return !(this.options.allowedMimeType && this.options.allowedMimeType.indexOf(item.type) === -1); return {item, response, status, headers};
}
private _fileSizeFilter(item: any) {
return !(this.options.maxFileSize && item.size > this.options.maxFileSize);
}
private _fileTypeFilter(item: any) {
return !(this.options.allowedFileType &&
this.options.allowedFileType.indexOf(FileType.getMimeClass(item)) === -1);
}
} }
public onCompleteItem(item:any, response:any, status:any, headers:any):any { public onCompleteItem(item:any, response:any, status:any, headers:any):any {
@@ -239,6 +229,19 @@ export class FileUploader {
return void 0; return void 0;
} }
public _mimeTypeFilter(item:any):boolean {
return !(this.options.allowedMimeType && this.options.allowedMimeType.indexOf(item.type) === -1);
}
public _fileSizeFilter(item:any):boolean {
return !(this.options.maxFileSize && item.size > this.options.maxFileSize);
}
public _fileTypeFilter(item:any):boolean {
return !(this.options.allowedFileType &&
this.options.allowedFileType.indexOf(FileType.getMimeClass(item)) === -1);
}
public _onErrorItem(item:any, response:any, status:any, headers:any):void { public _onErrorItem(item:any, response:any, status:any, headers:any):void {
item._onError(response, status, headers); item._onError(response, status, headers);
this.onErrorItem(item, response, status, headers); this.onErrorItem(item, response, status, headers);
@@ -259,7 +262,7 @@ export class FileUploader {
} }
protected _headersGetter(parsedHeaders:any):any { protected _headersGetter(parsedHeaders:any):any {
return (name: any) => { return (name:any) => {
if (name) { if (name) {
return parsedHeaders[name.toLowerCase()] || void 0; return parsedHeaders[name.toLowerCase()] || void 0;
} }
@@ -324,7 +327,7 @@ export class FileUploader {
} }
private _getTotalProgress(value:number = 0):number { private _getTotalProgress(value:number = 0):number {
if (this.removeAfterUpload) { if (this.options.removeAfterUpload) {
return value; return value;
} }
let notUploaded = this.getNotUploadedItems().length; let notUploaded = this.getNotUploadedItems().length;
@@ -336,14 +339,17 @@ export class FileUploader {
private _getFilters(filters:any):any { private _getFilters(filters:any):any {
if (!filters) { if (!filters) {
return this.filters; return this.options.filters;
} }
if (Array.isArray(filters)) { if (Array.isArray(filters)) {
return filters; return filters;
} }
let names = filters.match(/[^\s,]+/g); if (typeof filters === 'string') {
return this.filters let names = filters.match(/[^\s,]+/g);
.filter((filter:any) => names.indexOf(filter.name) !== -1); return this.options.filters
.filter((filter:any) => names.indexOf(filter.name) !== -1);
}
return this.options.filters;
} }
private _render():any { private _render():any {
@@ -351,12 +357,12 @@ export class FileUploader {
// todo: ? // todo: ?
} }
private _folderFilter(item:any):boolean { // private _folderFilter(item:any):boolean {
return !!(item.size || item.type); // return !!(item.size || item.type);
} // }
private _queueLimitFilter():boolean { private _queueLimitFilter():boolean {
return this.queueLimit === undefined || this.queue.length < this.queueLimit; return this.options.queueLimit === undefined || this.queue.length < this.options.queueLimit;
} }
private _isValidFile(file:any, filters:any, options:any):boolean { private _isValidFile(file:any, filters:any, options:any):boolean {
@@ -380,6 +386,7 @@ export class FileUploader {
});*/ });*/
return response; return response;
} }
/* tslint:enable */ /* tslint:enable */
private _parseHeaders(headers:any):any { private _parseHeaders(headers:any):any {
let parsed:any = {}; let parsed:any = {};
@@ -401,8 +408,8 @@ export class FileUploader {
} }
/*private _iframeTransport(item:any) { /*private _iframeTransport(item:any) {
// todo: implement it later // todo: implement it later
}*/ }*/
private _onWhenAddingFileFailed(item:any, filter:any, options:any):void { private _onWhenAddingFileFailed(item:any, filter:any, options:any):void {
this.onWhenAddingFileFailed(item, filter, options); this.onWhenAddingFileFailed(item, filter, options);
@@ -429,11 +436,13 @@ export class FileUploader {
this.onProgressAll(total); this.onProgressAll(total);
this._render(); this._render();
} }
/* tslint:disable */ /* tslint:disable */
private _onSuccessItem(item:any, response:any, status:any, headers:any):void { private _onSuccessItem(item:any, response:any, status:any, headers:any):void {
item._onSuccess(response, status, headers); item._onSuccess(response, status, headers);
this.onSuccessItem(item, response, status, headers); this.onSuccessItem(item, response, status, headers);
} }
/* tslint:enable */ /* tslint:enable */
private _onCancelItem(item:any, response:any, status:any, headers:any):void { private _onCancelItem(item:any, response:any, status:any, headers:any):void {
item._onCancel(response, status, headers); item._onCancel(response, status, headers);

74
demo/components/file-upload/zs-file-demo/demo.ts
View File

@@ -1,32 +1,26 @@
import {Component, EventEmitter, ElementRef, Renderer, Input} from 'angular2/core'; import {Component, ElementRef, Renderer, Input, HostListener, HostBinding, OnInit} from '@angular/core';
import {FileUploader, FileUploaderOptionsInterface} from '../../../../ng2-file-upload'; import {FileUploader, FileUploaderOptions} from '../../../../ng2-file-upload';
@Component({ @Component({
selector: 'demo-file-upload', selector: 'demo-file-upload',
providers: [FileUploader], providers: [FileUploader],
directives: [],
pipes: [],
host: {
'(drop)': 'onDrop($event)',
'(dragover)': 'onDragOver($event)',
'(dragleave)': 'onDragLeave($event)',
'[class.hover]': 'isHover'
},
template: require('./demo.html'), template: require('./demo.html'),
styles: [':host {border:1px solid black; padding:59px;display: block;}' + styles: [':host {border:1px solid black; padding:59px;display: block;}' +
'.hover {border: 3px solid green; backgroud: black;}'] '.hover {border: 3px solid green; backgroud: black;}']
}) })
export class DemoFileUpload { export class DemoFileUploadComponent implements OnInit {
@Input() url: string; @Input() public url:string;
@Input() queueLimit: number; @Input() public queueLimit:number;
@Input() maxFileSize: number; @Input() public maxFileSize:number;
@Input() autoUpload: boolean; @Input() public autoUpload:boolean;
@Input() allowedMimeType: Array<string>; @Input() public allowedMimeType:Array<string>;
@Input() allowedFileType: Array<string>; @Input() public allowedFileType:Array<string>;
@Input() headers: Array<any>; @Input() public headers:Array<any>;
private inputs = ['allowedMimeType', @HostBinding('class.hover') private isHover:boolean = false;
private inputs:string[] = ['allowedMimeType',
'allowedFileType', 'allowedFileType',
'autoUpload', 'autoUpload',
'isHTML5', 'isHTML5',
@@ -34,20 +28,24 @@ export class DemoFileUpload {
'maxFileSize', 'maxFileSize',
'queueLimit', 'queueLimit',
'removeAfterUpload', 'removeAfterUpload',
'url', 'url'
]; ];
private uploaderOptions: FileUploaderOptionsInterface = {}; private uploaderOptions:FileUploaderOptions = {};
private isHover: boolean = false; private multiple:boolean = true;
private multiple: boolean = true;
constructor(private element: ElementRef, private element:ElementRef;
private fileUploadService: FileUploader, private fileUploadService:FileUploader;
private renderer: Renderer) { private renderer:Renderer;
public constructor(element:ElementRef, fileUploadService:FileUploader, renderer:Renderer) {
this.element = element;
this.fileUploadService = fileUploadService;
this.renderer = renderer;
} }
ngOnInit() { public ngOnInit():any {
for (let input of this.inputs) { for (let input of this.inputs) {
if (this[input]) { if (this[input]) {
this.uploaderOptions[input] = this[input]; this.uploaderOptions[input] = this[input];
@@ -58,8 +56,8 @@ export class DemoFileUpload {
this.multiple = (!this.queueLimit || this.queueLimit > 1); this.multiple = (!this.queueLimit || this.queueLimit > 1);
} }
@HostListener('drop', ['$event'])
onDrop(event: any) { public onDrop(event:any):void {
this._preventAndStop(event); this._preventAndStop(event);
this.isHover = false; this.isHover = false;
@@ -70,7 +68,8 @@ export class DemoFileUpload {
this.fileUploadService.addToQueue(transfer.files); this.fileUploadService.addToQueue(transfer.files);
} }
onDragOver(event: any) { @HostListener('dragover', ['$event'])
public onDragOver(event:any):void {
this._preventAndStop(event); this._preventAndStop(event);
if (this.isHover) { if (this.isHover) {
@@ -84,29 +83,29 @@ export class DemoFileUpload {
this.isHover = true; this.isHover = true;
} }
onDragLeave(event: any): any { @HostListener('dragleave', ['$event'])
public onDragLeave(event:any):void {
this._preventAndStop(event); this._preventAndStop(event);
if (event.currentTarget === (<any>this).element[0]) { if (event.currentTarget === (this as any).element[0]) {
return; return;
} }
this.isHover = false; this.isHover = false;
} }
onChange($event) { public onChange($event:any):void {
this.fileUploadService.addToQueue($event.srcElement.files); this.fileUploadService.addToQueue($event.srcElement.files);
} }
private _getTransfer(event:any):any {
private _getTransfer(event: any): any {
return event.dataTransfer ? event.dataTransfer : event.originalEvent.dataTransfer; return event.dataTransfer ? event.dataTransfer : event.originalEvent.dataTransfer;
} }
private _preventAndStop(event: any): any { private _preventAndStop(event:any):any {
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
} }
private _haveFiles(types: any): any { private _haveFiles(types:any):any {
if (!types) { if (!types) {
return false; return false;
} }
@@ -120,5 +119,4 @@ export class DemoFileUpload {
} }
} }
} }